10分钟了解ES6+(ES2015-ES2019)那些重要的特性

ES2015（ES6）

ES2015 是2015年发布的ECMA Script(JS) 语言版本，也是第6个版本，所以也称之为ES6。在此后ECMA Script每年发布一个大版本新增加一些重要特性，我们称之为ES6+。

本文主要总结了ES2015-ES2019的主要特性，一个学习前端的童鞋应该是常用且理解的一些特性。

ES2015 的主要作用：

• 解决原有语法的一些不足
• 对原有语法进行增强
• 全新的对象、全新的方法、全新的功能

Promise、Proxy、Object.assign等

• 全新的数据类型和数据结构

Symbol、Set、Map等

ES2015 常用的环境支持情况

• nodejs查询：https://node.green/
• 浏览器查询：http://kangax.github.io/compat-table/es6/

PC浏览器对ES2015的支持情况

• Chrome：51 版起便可以支持 97% 的 ES6 新特性。
• Firefox：53 版起便可以支持 97% 的 ES6 新特性。
• Safari：10 版起便可以支持 99% 的 ES6 新特性。
• Edge：Edge 15可以支持 96% 的 ES6 新特性。Edge 14 可以支持 93% 的 ES6 新特性。
• IE：IE7 ~ 11 基本不支持 ES6

移动端浏览器对ES2015的支持情况

• iOS：10.0 版起便可以支持 99% 的 ES6 新特性。
• Android：基本不支持 ES6 新特性（5.1 仅支持 25%）

服务器对ES2015的支持情况，具体查看：https://node.green/

• Node.js：6.5 版起便可以支持 97% 的 ES6 新特性。（6.0 支持 92%）

var（对比let、const）

• 只有全局作用域、函数作用域，不存在严格的块级作用域
• 存在变量提升
• 变量的声明和定义可以分开进行
• 变量可以重复声明

let（块级作用域）

• 存在块级作用域
• 不能变量提升
• 变量的声明和定义可以分开进行
• 变量不能重复声明

const 常量

• 存在块级作用域
• 不能变量提升
• 变量的声明和定义必须在同一个语句中
• 变量不能重复声明
• 不能修改声明过的变量值（例如：可以修改对象的属性值，不能修改对象地址）
• 最佳实践：不用var，主用const，配合let

数组解构

const [foo, bar, baz] = arr
console.log(foo, bar, baz)

const [, , baz] = arr
console.log(baz)

// 解构剩余的数组元素
// 只能在最后一个位置使用扩展运算符
const [foo, ...rest] = arr
console.log(rest)

// 解构时元素较少，按照顺序取元素
const [foo] = arr
console.log(foo)

// 解构时设置默认值
const [foo, bar, baz = 123, more = 'default value'] = arr
console.log(bar, more)

对象解构

const obj = {
    name: 'zce', age: 18 }

// 变量名重复时，可以重命名和设置默认值
const name = 'tom'
const {
    name: objName = 'jack' } = obj
console.log(objName)

模板字符串

• 支持换行符
• 支持嵌入变量、表达式

const name = 'tom'
// 可以通过 ${} 插入表达式，表达式的执行结果将会输出到对应位置
const msg = `hey, ${
     name} --- ${
     1 + 2} ---- ${
     Math.random()}`
console.log(msg)

字符串的扩展方法

• includes 包含字符串
• startsWith 是否以某字符串开头
• endsWith 是否以某字符串结束

const message = 'Error: foo is not defined.'

console.log(
  // message.startsWith('Error')
  // message.endsWith('.')
  message.includes('foo')
)

方法的参数默认值

• 在function参数后面使用=设置默认值
• 只有当形参传递是undefined或者没有传递值时，才会设置默认值（false也不会）
• 如果只有部分默认值，需要将设置默认值的代码放到后面；否则无法正常使用

// 默认参数一定是在形参列表的最后
function foo (bar，enable = true) {
   
  console.log('foo invoked - enable: ')
  console.log(enable)
}

foo(false)

方法的剩余参数

• 只能出现在形参的最后一位
• 只能使用一次
• args是一个数组，区别于arguments是一个伪数组

function foo (first, ...args) {
   
  console.log(args)
}

foo(1, 2, 3, 4)

展开数组

const arr = ['foo', 'bar', 'baz']

// console.log(
//   arr[0],
//   arr[1],
//   arr[2],
// )

// console.log.apply(console, arr)

console.log(...arr)

箭头函数

插件：Fira Code字体将箭头画的更好看

const arr = [1, 2, 3, 4, 5, 6, 7]

// arr.filter(function (item) {
   
//   return item % 2
// })

// 常用场景，回调函数
arr.filter(i => i % 2)

箭头函数的简写

function(value){
   return value} 等价于 value=>value

箭头函数的this指向

• 普通函数的this指向调用它方法的对象
• 箭头函数的this和它外面函数的this指向相同，即：箭头函数不会改变this的指向

// 箭头函数与 this
// 箭头函数不会改变 this 指向

const person = {
   
  name: 'tom',
  // sayHi: function () {
   
  //   console.log(`hi, my name is ${this.name}`)//tom，this指向该函数调用者
  // }
  sayHi: () => {
   
    console.log(`hi, my name is ${
     this.name}`) //undefined，this和sayHi()外面的函数this相同
  },
  sayHiAsync: function () {
   
    // const _this = this
    // setTimeout(function () {
   
    //   console.log(_this.name) //这里的this为window，所以需要使用_this
    // }, 1000)

    console.log(this)
    setTimeout(() => {
   
      // console.log(this.name) //这里的this指向sayHiAsync里的this，即person
      console.log(this)
    }, 1000)
  }
}
person.sayHi()
person.sayHiAsync()

对象字面量

• 如果属性名和值的变量名相同，可以省略一个变量
• 方法的简写：可以省略“：function”
• 计算属性名：属性名可以在[]里面使用任意表达式

const bar = '345'

const obj = {
   
  foo: 123,
  // bar: bar
  // 属性名与变量名相同，可以省略 : bar
  bar,
  // method1: function () {
   
  //   console.log('method111')
  // }
  // 方法可以省略 : function
  method1 () {
   
    console.log('method111')
    // 这种方法就是普通的函数，this 指向obj。
    console.log(this)
  },
  // Math.random(): 123 // 不允许，使用[]才行
  // 通过 [] 让表达式的结果作为属性名
  [bar]: 123
}
<