es6总结

Posted 2021-10-05 喝冬瓜汤的丁小白

ES6总结

es6的由来

在es6之前都是以版本号递增的,由于从2015年起修改方案，每年6年发布一版稳定版,以当年年份命名，所以2015年发布的一版以es2015命名，且这一版做了特别大的改动，在以前的版本号命名就是es6，所以把2015年之后的版本统称es6,其实每年的改动都有自己的版本命名es2016、es2017 但都是在2015的基础上，做小范围的改动

let和const特性

• 不存在变量提升
• 暂时性死区
• 不允许重复声明

• 块级作用域的好处

  • 防止内层变量覆盖全局变量
  • 用来计数的循环变量泄露为全局变量

解构赋值

• 只要某种数据结构具有Iterator接口，都可以采用数组形式的解构赋值，属于一种模式匹配
• 默认值使用严格相等运算符，只能将undefine的值进行默认值赋
• 如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值
• 字符串解构赋值会将字符串先转化成类似数组的对象
• 布尔值和数字解构赋值会将其转化成对象类型

• 不能使用圆括号的场景

  • 变量声明语句中
  • 函数参数中
  • 语句赋值中，不能将整个模式，或嵌套模式中的一层，放在圆括号之中

• 解构赋值的用途

  • 交换变量的值
  • 从函数中返回多个值
  • 函数参数的定义
  • 提取json数据
  • 函数参数的默认值
  • for of 遍历map结构
  • 输入模块的指定方法

  字符串扩展

  • 新增字符串的遍历接口 字符串也可使用for of 遍历

  • es6提供了字符串新的方法

    • includes()：返回布尔值，表示是否找到了参数字符串。
    • startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。

    • endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。

         var s = \'Hello world!\';
      
         s.startsWith(\'world\', 6) // true
         s.endsWith(\'Hello\', 5) // true

  • repeat()：返回一个新字符串，表示将原字符串重复n次串的头部。

  • padStart用于头部补全，padEnd用于尾部补全。第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。

    \'xxx\'.padStart(2, \'ab\') // \'xxx\'
    \'x\'.padEnd(5, \'ab\') // \'xabab\'

• 支持模版字符串

正则扩展

• 与正则相关的方法，全都定义在RegExp对象上。
• 新增u、y修饰符，u用于unicode,y和g差不多 只不过要从头匹配
• 新增两个属性sticky判断是否用了y修饰符 flags返回正则表达式的修饰符

数值扩展

• 新增Number.isFinite()和Number.isNAN() 区别于全局方法 只对数值有效 不做类型转换
• ES6将全局方法parseInt()和parseFloat()，移植到Number对象上面，行为完全保持不变。逐步减少全局性方法，使得语言逐步模块化
• Number.isInteger()用来判断一个值是否为整数 3和3.0没有区别
• Math.trunc方法用于去除一个数的小数部分，返回整数部分。
• Math.sign方法用来判断一个数到底是正数、负数、还是零

数组扩展

• Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。

  Array.from => [].slice.call(arrayLike)
  Array.from(arrayLike, x => x * x);
  // 等同于
  Array.from(arrayLike).map(x => x * x);
  
  Array.from([1, 2, 3], (x) => x * x)
  // [1, 4, 9]
  

• Array.of方法用于将一组值，转换为数组。

• 数组实例方法

  • copyWithin()在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组
  • find()和findIndex()
  • fill方法使用给定值，填充一个数组。第2和第3个参数代表起始和终止位置
  • keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。都用于遍历数组
  • includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似
• ES6则是明确将空位转为undefined

函数扩展

• 参数默认值
• 作用域

• 扩展运算符

  • 代替数组的apply方法
  • 合并数组
  • 与解构赋值结合
  • 函数的返回值
  • 字符串
  • 扩展运算符内部调用的是数据结构的Iterator接口，因此只要具有Iterator接口的对象，都可以使用扩展运算符

• 箭头函数

  • 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。有利于封装回调函数
  • 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
  • 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。
  • 不可以使用yield命令，因此箭头函数不能用作Generator函数。
  • 箭头函数的绑定

  foo::bar;
  // 等同于
  bar.bind(foo);
  
  foo::bar(...arguments);
  // 等同于
  bar.apply(foo, arguments);

对象扩展

• 属性的简洁表示法，允许变量和函数
• 属性名可以为表达式，表达式放在数组中
• Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致

• Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用

  • 为对象添加属性
  • 为对象添加方法
  • 克隆对象
  • 合并多个对象
• Object.values方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值
• Object.entries方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组

Iterator

Iterator的遍历过程是这样的。

（1）创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。

（2）第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。

（3）第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。

（4）不断调用指针对象的next方法，直到它指向数据结构的结束位置。

使用场景

• 解构赋值
• 扩展运算符
• yield*

for of

• for...in循环读取键名，for...of循环读取键值
• for...of循环调用遍历器接口，数组的遍历器接口只返回具有数字索引的属性

Generator函数