常用的ECMAScript新特性

ECMAScript2015

• ECMAScript2015完整版语言规格文件地址：
  http://www.ecma-international.org/ecma-262/6.0/

• let与块级作用域

  • 作用域 - 某个成员能够起作用的范围
  • 全局作用域
  • 函数作用域
  • 块级作用域
  • let声明的变量不会出现变量提升

• const 恒量 / 常量

  • 最佳实践：不用var，主用const，配合let

• 数组的解构 - Destructuring

  const arr = [100, 200, 300]
  const [foo, bar, baz = 123, more = 'default value'] = arr
  

• 对象的解构 - Destructuring

  const obj = { name: 'zce', age: 18 }
  const name = 'tom'
  //为避免变量冲突采用：重起别名
  const { name: objName = 'jack' } = obj
  

• 模板字符串

  const msg = `hey, ${name} --- ${1 + 2} ---- ${Math.random()}`
  

  • 模板字符串标签函数

  // 模板字符串的标签就是一个特殊的函数，
  // 使用这个标签就是调用这个函数
  const name = 'tom'
  const gender = false
  function myTagFunc (strings, name, gender) {
  	const sex = gender ? 'man' : 'woman'
  	return strings[0] + name + strings[1] + sex + strings[2]
  }
  const result = myTagFunc`hey, ${name} is a ${gender}.`
  console.log(result)
  

  • 字符串的扩展方法

  const message = 'Error: foo is not defined.'
  console.log(
  	message.startsWith('Error'),
  	message.endsWith('.'),
  	message.includes('foo')
  )
  

• 参数默认值 - Default parameters

  // 默认参数一定是在形参列表的最后
  function foo (enable = true) {
  	console.log(enable)
  }
  foo(false)
  

• 剩余参数 - Rest parameters

  function foo (first, ...args) {
  	console.log(args)
  }
  foo(1, 2, 3, 4)
  

• 展开数组 - Speard

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

• 箭头函数 - Arrow functions

  • 箭头函数不会改变 this 指向

• 对象字面量增强 - Enhanced object literal

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

• 对象扩展方法 - Object.assign

  • 将多个源对象中的属性复制到一个目标对象中

• 对象扩展方法 - Object.is

  • 用于判断2个值是否相等

  console.log(
    // 0 == false              // => true
    // 0 === false             // => false
    // +0 === -0               // => true
    // NaN === NaN             // => false
    // Object.is(+0, -0)       // => false
    // Object.is(NaN, NaN)     // => true
  )
  

• Proxy - 代理对象

  • Proxy 对比 Object.defineProperty()
    优势1：Proxy 可以监视读写以外的操作
    优势2：Proxy 可以很方便的监视数组操作
    优势3：Proxy 不需要侵入对象

• Reflect - 统一的对象操作API

  • Reflect 成员方法就是 Proxy 处理对象的默认实现
  • 统一提供一套用于操作对象的 API
    

• Promise

  • 一种更优的异步编程解决方案
  • 解决了传统异步编程中回调函数嵌套过深的问题

• Class类

  • static – 静态方法关键词
  • extends – 类的继承

  class Person {
    constructor (name) {
      this.name = name
    }
    
    say () {
      console.log(`hi, my name is ${this.name}`)
    }
  }
  
  class Student extends Person {
    constructor (name, number) {
      super(name) // 父类构造函数
      this.number = number
    }
  
    hello () {
      super.say() // 调用父类成员
      console.log(`my school number is ${this.number}`)
    }
  }
  
  const s = new Student('jack', '100')
  s.hello()
  

• Set 数据结构

  • 结构与数组类似，内部数据不允许重复

  // 应用场景：数组去重
  const arr = [1, 2, 1, 3, 4, 1]
  // const result = Array.from(new Set(arr))
  const result = [...new Set(arr)]
  

• Map 数据结构

  • 结构与对象类似，可以用任意类型的数据作为键，而对象只能使用字符串作为键

• symbol - 一种全新的原始数据类型

  • 创建出的值是独一无二的
  • 场景1：扩展对象，属性名冲突问题
  • 场景2：Symbol 模拟实现私有成员

• for…of 循环

  • 作为遍历所有数据结构的统一方式
  • 普通对象不能被直接 for…of 遍历
  • 内部需要实现Iterable方法

• 可迭代接口 - Iterable

  • ES 中能够表示有结构的数据类型越来越多，为了给各种的数据结构提供 统一的遍历方式，ES2015提供了 Iterable接口
  • 核心：对外提供统一接口，让外部不用关心数据内部结构
  • 实现可迭代接口 Iterable

  const obj = {
    store: ['foo', 'bar', 'baz'],
  
    [Symbol.iterator]: function () {
      let index = 0
      const self = this
  
      return {
        next: function () {
          const result = {
            value: self.store[index],
            done: index >= self.store.length
          }
          index++
          return result
        }
      }
    }
  }
  
  for (const item of obj) {
    console.log('循环体', item)
  }
  

• 生成器 - Generator

  • 主要目的解决异步编程嵌套过深问题
  • Generator 应用
    案例1：发号器

    function * createIdMaker () {
      let id = 1
      while (true) {
        yield id++
      }
    }
    
    const idMaker = createIdMaker()
    
    console.log(idMaker.next().value)
    console.log(idMaker.next().value)
    console.log(idMaker.next().value)
    console.log(idMaker.next().value)
    

    案例2：使用 Generator 函数实现 iterator 方法

    const todos = {
      life: ['吃饭', '睡觉', '打豆豆'],
      learn: ['语文', '数学', '外语'],
      work: ['喝茶'],
      [Symbol.iterator]: function * () {
        const all = [...this.life, ...this.learn, ...this.work]
        for (const item of all) {
          yield item
        }
      }
    }
    
    for (const item of todos) {
      console.log(item)
    }
    

Array.from()：转换成数组。
Object.keys(obj)：获取对象中所有的键。

ECMAScript2016

• includes

  • 判断数组中是否包含某一值

• 指数运算符 - **

  console.log(Math.pow(2, 10))
  console.log(2 ** 10)
  

ECMAScript2017

• Object.values

  • 返回一个对象所有的值组成的列表

• Object.entries

  • 以数组的形式返回对象中的键值对

• Object.getOwnPropertyDescriptors

  • 获取对象属性的完整描述信息

  const p1 = {
    firstName: 'Lei',
    lastName: 'Wang',
    get fullName () {
      return this.firstName + ' ' + this.lastName
    }
  }
  
  // console.log(p1.fullName)
  
  // const p2 = Object.assign({}, p1)
  // p2.firstName = 'zce'
  // console.log(p2)
  
  const descriptors = Object.getOwnPropertyDescriptors(p1)
  // console.log(descriptors)
  const p2 = Object.defineProperties({}, descriptors)
  p2.firstName = 'zce'
  console.log(p2.fullName)
  

• padStart / padEnd

  • 用给定字符串填充目标字符串的开始或结束位置直到达到给定长度为止

• 允许在函数参数中添加尾逗号

• Async / Await