es6总结

23 篇文章 0 订阅
2 篇文章 0 订阅
  • 新增块级作用域(let/const)
    let / const / var 区别

    声明方式变量提升暂时性死区重复声明初始值作用域
    var允许不存在允许不需要除块级
    let不允许存在不允许不需要块级
    const不允许存在不允许需要块级

    1.let 和 const 定义的变量在定义语句之前,如果使用会抛出错误(形成了暂时性死区),而 var 不会。
    2.const 声明一个只读的常量。一旦声明,常量的值就不能改变。const 基础类型无法修改 对象的属性值和数组的值可以修改

    暂时性死区:在代码块内,使用 let/const 声明变量之前,该变量都是不可用的(会抛出错误)。这在语法上,称为“暂时性死区”。本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。

  • 解构赋值

  • 字符串新增方法

  • 数组扩展
    Array.from() 将伪数组对象或可遍历对象转换为真数组
    Array.of 将一系列值转化为数组 Array.of( )方法总会创建一个包含所有传入参数的数组,而不管参数的数量与类型
    find,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。

    [1, 4, -5, 10].find((n) => n < 0) // -5

    findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。

      [1, 5, 10, 15].findIndex(function(value, index, arr) {
        return value > 9;
      }) // 2
    

    Array.prototype.includes方法返回一个布尔值,表示某个数组是否包含给定的值。该方法的第二个参数表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置,如果这时它大于数组长度(比如第二个参数为-4,但数组长度为3),则会重置为从0开始。

    [1, 2, 3].includes(2) // true
    [1, 2, 3].includes(3, -1); // true
    [1, 2, 3, 5, 1].includes(1, 2); // true

    entries(),keys() 和 values()

    ES6 提供entries(),keys()和values(),用于遍历数组。它们都返回一个遍历器对象,可以用for…of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。

      for (let index of ['a', 'b'].keys()) {
        console.log(index);
      }
      // 0
      // 1
      
      for (let elem of ['a', 'b'].values()) {
        console.log(elem);
      }
      // 'a'
      // 'b'
      
      for (let [index, elem] of ['a', 'b'].entries()) {
        console.log(index, elem);
      }
      // 0 "a"
      // 1 "b"
    
    

    Array.prototype.flat()用于将嵌套的数组“拉平”
    flatMap()方法对原数组的每个成员执行一个函数(相当于执行Array.prototype.map()),然后对返回值组成的数组执行flat()方法。该方法返回一个新数组,不改变原数组。

    // 相当于 [[2, 4], [3, 6], [4, 8]].flat()
    [2, 3, 4].flatMap((x) => [x, x * 2])
    // [2, 4, 3, 6, 4, 8]
    
  • 模板字符串

  • 函数参数允许设置默认值,引入了rest参数

    ES6 引入 rest 参数(形式为…变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了。

      //求和
      function addNumbers(...numbers){
        return numbers.reduce((sum,number) => {
          return sum + number;
        },0)
       }
       console.log(addNumbers(1,2,3,4,5));//15
    
  • Symbol
    Symbol表示独一无二的值。Symbol 值通过 Symbol 函数生成,使用 typeof,结果为 “symbol”。

    let s = Symbol()
    typeof s // “symbol”

    Symbol 函数前不能使用 new 命令,否则会报错。这是因为生成的 Symbol 是一个原始类型的值,不是对象。Symbol函数可以接受一个字符串作为参数,表示对 Symbol 实例的描述,主要是为了在控制台显示,或者转为字符串时,比较容易区分。如果 Symbol 的参数是一个对象,就会调用该对象的 toString 方法,将其转为字符串,然后才生成一个 Symbol 值。Symbol 值不能与其他类型的值进行运算,会报错。Symbol 值可以显式转为字符串,也可以转为布尔值,但是不能转为数值。

  • Set/Map
    Set
    它类似于数组,但是成员的值都是唯一的,没有重复的值。Set本身是一个构造函数,用来生成 Set 数据结构。

    let set = new Set([1, 2, 3, 4, 4]);
    console.log(set); // Set(4) {1, 2, 3, 4}
    
    set = new Set(document.querySelectorAll('div'));
    console.log(set.size); // 66
    

    Set 函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化。Set 内部判断两值是否相等类似于精确相等运算符(===),主要的区别是向 Set 加入值时认为NaN等于自身,而精确相等运算符认为NaN不等于自身。在Set中,两个对象是不想等的。
    操作方法有:

    1. add(value):添加某个值,返回 Set 结构本身。
    2. delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
    3. has(value):返回一个布尔值,表示该值是否为 Set 的成员。
    4. clear():清除所有成员,无返回值。

    遍历操作有:

    1. Set.prototype.keys():返回键名的遍历器
    2. Set.prototype.values():返回键值的遍历器
    3. Set.prototype.entries():返回键值对的遍历器
    4. Set.prototype.forEach():使用回调函数遍历每个成员

    WeakSet与Set的区别:

    1. WeakSet 的成员只能是对象,而不能是其他类型的值。
    2. WeakSet 中的对象都是弱引用,即垃圾回收机制不考虑 WeakSet 对该对象的引用,所以也不能遍历。

    Map
    Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。如果对同一个键多次赋值,后面的值将覆盖前面的值。Map 的键实际上是跟内存地址绑定的,只要内存地址不一样,就视为两个键。
    属性与方法

    1. size属性返回 Map 结构的成员总数
    2. Map.prototype.set(key, value),set方法设置键名key对应的键值为value,然后返回整个 Map 结构。如果key已经有值,则键值会被更新,否则就新生成该键。
    3. get方法读取key对应的键值,如果找不到key,返回undefined。
    4. has方法返回一个布尔值,表示某个键是否在当前 Map 对象之中。
    5. delete方法删除某个键,返回true。如果删除失败,返回false。
    6. clear方法清除所有成员,没有返回值。

    遍历方法同Set

    WeakMap与Map的区别:

    1. WeakMap只接受对象作为键名(null除外),不接受其他类型的值作为键名。
    2. WeakMap的键名所指向的对象,不计入垃圾回收机制。
    3. 没有遍历操作。
  • Promise

  • Generator
    Generator 函数是一个状态机,封装了多个内部状态。调用 Generator 函数,返回一个遍历器对象,代表 Generator 函数的内部指针。以后,每次调用遍历器对象的next方法,就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值,是yield表达式后面那个表达式的值;done属性是一个布尔值,表示是否遍历结束。

    yield 表达式
    由于 Generator 函数返回的遍历器对象,只有调用next方法才会遍历下一个内部状态,所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志。

    遍历器对象的next方法的运行逻辑如下。

    (1)遇到yield表达式,就暂停执行后面的操作,并将紧跟在yield后面的那个表达式的值,作为返回的对象的value属性值。

    (2)下一次调用next方法时,再继续往下执行,直到遇到下一个yield表达式。

    (3)如果没有再遇到新的yield表达式,就一直运行到函数结束,直到return语句为止,并将return语句后面的表达式的值,作为返回的对象的value属性值。

    (4)如果该函数没有return语句,则返回的对象的value属性值为undefined。

  • async/await

  • class

    // ES5
    function Point(x, y) {
      this.x = x;
      this.y = y;
    }
    
    Point.prototype.toString = function () {
      return '(' + this.x + ', ' + this.y + ')';
    };
    
    var p = new Point(1, 2);
    
    //ES6
    class Point {
      constructor(x, y) {
        this.x = x;
        this.y = y;
      }
    
      toString() {
        return '(' + this.x + ', ' + this.y + ')';
      }
    }
    

    类和普通函数的区别:

    1. ES6 class 内部所有定义的方法都是不可枚举的;
    2. ES6 class 必须使用 new 调用,否则会报错;
    3. ES6 class 不存在变量提升,因为 ES6 不会把类的声明提升到代码头部;
    4. ES6 class 默认是严格模式;
    5. ES5的继承,实质是先创造子类的实例对象this,然后再将父类的方法添加到this上面(Parent.apply(this))。ES6的继承机制完全不同,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this。
      super相关
  • Module

  • 箭头函数
    箭头函数与普通函数区别:
    (1)函数体内的this对象,指向定义时所在的对象,而不是使用时所在的对象。
    (2)不可以当作构造函数,也就是说,不可以使用new命令也没有new.target和原型,否则会抛出一个错误。因为箭头函数并没有 [[Construct]] 方法。
    (3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
    (4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。

  • proxy

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值