乐趣区

关于前端:es6总结

jiezi

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）属性的键值对数组
退出移动版