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
}

Object.assign

Object.assign是不完全的深拷贝？它究竟拷贝了多少东西？
获取不到obj中的get、set信息

• 将源对象中的值赋值到目标对象
• 目标对象和返回值是同一个对象
• 如果目标对象中有相同名字的属性，则覆盖该属性
• 可以传入多个源对象，按照顺序依次覆盖目标对象

const source1 = {
  a: 123,
  b: 123
}

const source2 = {
  b: 789,
  d: 789
}

const target = {
  a: 456,
  c: 456
}

const result = Object.assign(target, source1, source2)

console.log(target)
console.log(result === target) //true，目标对象和返回值是一个对象

Object.is

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

Proxy 和 Object.defineProperty

Proxy的作用
对Object属性变化进行监听

对比Object.defineProperty
参考笔记：https://gitee.com/ymcdhr/e-task/wikis/?sort_id=4053906

Reflect（统一的操作Object对象方法）

• Proxy属性的方法中默认调用了Reflect中的方法，例如：

const obj = {
  foo: '123',
  bar: '456'
}

const proxy = new Proxy(obj, {
  get (target, property) {
    console.log('watch logic~')
    // Proxy中如果不写，默认调用了此方法
    return Reflect.get(target, property)
  }
})

• Relect提供了统一的操作Object对象的方法，MDN上有完整的13中方法：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

// console.log('name' in obj)
// console.log(delete obj['age'])
// console.log(Object.keys(obj))

console.log(Reflect.has(obj, 'name'))
console.log(Reflect.deleteProperty(obj, 'age'))
console.log(Reflect.ownKeys(obj))

Promise

参考文档：js单线程机制与异步编程（Promise、Generator、Async、Await）

Class 类的基本语法

// class 关键词

// function Person (name) {
//   this.name = name
// }

// Person.prototype.say = function () {
//   console.log(`hi, my name is ${this.name}`)
// }

class Person {
  // 构造函数
  constructor (name) {
    this.name = name
  }
  // 成员变量
  age = 18
  // 成员函数
  say () {
    console.log(`hi, my name is ${this.name}`)
  }
}

const p = new Person('tom')
p.say()

Class 中的静态方法static

• 声明静态方法：static关键字
• 调用静态方法：Person.say
• 静态方法的this指向为类

// static 方法

class Person {
  constructor (name) {
    this.name = name
  }

  say () {
    console.log(`hi, my name is ${this.name}`)
  }

  static create (name) {
    return new Person(name)
  }
}

const tom = Person.create('tom')
tom.say()

Class 的继承

• 使用extends继承
• 注意super的使用，能够访问父类；通常用来执行父类构造函数。

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) // 调用父类构造函数，否则name就没有赋值（重要）
    this.number = number
  }

  hello () {
    super.say() // 调用父类成员
    console.log(`my school number is ${this.number}`)
  }
}

const s = new Student('jack', '100')
s.hello()

Set、Map

Set 没有重复元素的数组集合

常用的成员方法

• s.add(item) 添加item，返回集合本身，可链式调用
• s.size 获取Set的长度
• s.has(item)判断是否存在某个item
• s.delete(item)删除某个item
• s.clear()删除全部

const s = new Set()
s.add(1).add(2).add(3).add(4).add(2)
// console.log(s)

// s.forEach(i => console.log(i))  //forEach、for...of 都可以用来遍历Set

// for (let i of s) {
//   console.log(i)
// }

// console.log(s.size)
// console.log(s.has(100))
// console.log(s.delete(3))
// console.log(s)
// s.clear()
// console.log(s)

常用来数组去重

// 应用场景：数组去重
const arr = [1, 2, 1, 3, 4, 1]

const result1 = Array.from(new Set(arr))
const result2 = [...new Set(arr)]

console.log(result1，result2)

Map 能使用复杂结构作为属性的对象集合

以前的对象存储对象属性时，会将复杂数据转换成字符串（toString()方法），如下：

const obj = {}
obj[true] = 'value'
obj[123] = 'value'
obj[{ a: 1 }] = 'value'

console.log(Object.keys(obj))

//0: "123"
//1: "true"
//2: "[object Object]"

使用Map可以存储复杂数据作为对象属性，常用的方法有如下：

const m = new Map()
const tom = { name: 'tom' }
m.set(tom, 90)
console.log(m)
console.log(m.get(tom))

// m.has()
// m.delete()
// m.clear()

// forEach可以遍历Map中的item
m.forEach((value, key) => {
  console.log(value, key)
})

Symbol

一个全新的基础数据类型，每次创建都是独一无二的值

let s = Symbol();

typeof s
// "symbol"

let s1 = Symbol('foo');
let s2 = Symbol('foo');

s1 === s2 // false

// for方法是创建的一样的值，参数会自动转换成字符串
let s3 = Symbol.for('foo');
let s4 = Symbol.for('foo');

s3 === s4 // true

可以转换为字符串，通过description（ES2019提供的方法）

let s1 = Symbol('foo');
let s2 = Symbol('foo');

s1 // Symbol(foo)
s2 // Symbol(foo)

s1 === s2 // false

s1.toString() // "Symbol(foo)"
s2.toString() // "Symbol(foo)"
s1.description // "foo" // ES2019提供的方法

可以作为对象的属性名，可以避免同名冲突

const obj = {}
obj[Symbol()] = '123'
obj[Symbol()] = '456'
console.log(obj)
//Symbol(): "123"
//Symbol(): "456"

使用 Symbol 值定义属性时，Symbol 值必须放在方括号之中，而且不能使用点运算符

let s = Symbol();

// 第一种写法
let a = {};
a[s] = 'Hello!';

// 第二种写法
let a = {
  [s]: 'Hello!'
};

// 以上写法都得到同样结果
a[s] // "Hello!"

可以作为对象的私有成员，不能在外部直接访问（因为每次访问都不一样），只能通过内部this访问

// 案例2：Symbol 模拟实现私有成员

// a.js ======================================

const name = Symbol()
const person = {
  [name]: 'zce',
  say () {
    console.log(this[name])
  }
}
// 只对外暴露 person

// b.js =======================================

// 由于无法创建出一样的 Symbol 值，
// 所以无法直接访问到 person 中的「私有」成员
// person[Symbol()]
person.say()

注意：for...in、Obeject.keys、Json.stringify都无法在Symbol上使用
使用：Object.getOwnPropertySymbols，替代Obeject.keys方法用于Symbol

for...of 统一遍历方法

以前的 for...in 遍历键值对，forEach 存在局限性

1. 可以用使用break终止遍历，forEach不能跳出循环
2. 可以遍历Array数组、Set和Map对象
3. 普通对象不能被直接 for...of 遍历，因为它没有Symbol.iterator属性

• 对象（Object）之所以没有默认部署 Iterator 接口，是因为对象的哪个属性先遍历，哪个属性后遍历是不确定的，需要开发者手动指定。

4. 所有可以使用 for...of 的对象都需要具有Symbol.iterator属性

// for...of 循环
const arr = [100, 200, 300, 400]

// for...of 循环可以替代 数组对象的 forEach 方法 但可以使用break跳出循环
arr.forEach(item => {
  console.log(item)
})

for (const item of arr) {
  console.log(item)
  if (item > 100) {
    break
  }
}

// forEach 无法跳出循环，必须使用 some 或者 every 方法
// arr.forEach() // 不能跳出循环
// arr.some()
// arr.every()

// 遍历 Set 与遍历数组相同
const s = new Set(['foo', 'bar'])

for (const item of s) {
  console.log(item)
}

// 遍历 Map 可以配合数组结构语法，直接获取键值
const m = new Map()
m.set('foo', '123')
m.set('bar', '345')

for (const [key, value] of m) {
  console.log(key, value)
}

// 普通对象不能被直接 for...of 遍历
const obj = { foo: 123, bar: 456 }

for (const item of obj) {
  console.log(item)
}

可迭代接口 iterator（主要给for...of使用）

• 一些数据结构的原型对象 proto 中含有Symbol.iterator方法
• iterator方法返回一个带next()方法的指针对象
• 每次执行next()方法，它都会返回下一个数据

具有 Symbol.iterator 属性的数据结构

Array、Map、Set、String、TypedArray、函数的 arguments 对象、NodeList 对象

iterator 的遍历过程是这样的。

• （1）创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。
• （2）第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。
• （3）第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。
• （4）不断调用指针对象的next方法，直到它指向数据结构的结束位置。

使对象能够使用 for...of

const obj = {
  // 使用计算属性，用[]存表达式属性名
  // 1、Iterable，对象必须要有一个Symbol.iterator属性
  [Symbol.iterator]: function () {
    return {
      // 2、Iterator，返回的对象有一个next()方法
      next: function () {
        // 3、IterationResult，next()方法返回一个对象
        return {
          value: 'zce',
          done: true
        }
      }
    }
  }
}

for (const item of obj) {
  console.log('循环体', item)
}

使对象能够使用 for...of，完整的代码

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)
}

迭代器模式（设计模式之一）

迭代器的另外一个主要用途：迭代器模式

Gernator 生成器

参考：js单线程机制与异步编程（Promise、Generator、Async、Await）

ES Modules

参考：工程化中的ES Modules/CommonJS/AMD/CMD

ES2016 新增特性

数组的includes方法

// Array.prototype.includes -----------------------------------

const arr = ['foo', 1, NaN, false]

// 找到返回元素下标
console.log(arr.indexOf('foo'))
// 找不到返回 -1
console.log(arr.indexOf('bar'))
// 无法找到数组中的 NaN
console.log(arr.indexOf(NaN))

// 直接返回是否存在指定元素
console.log(arr.includes('foo'))
// 能够查找 NaN
console.log(arr.includes(NaN))

指数运算符

// 指数运算符 ---------------------------------------------------

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

console.log(2 ** 10)

ES2017 新增特性

Object新增方法

Object.values —— 类似Object.keys，返回对象的值数组
Object.entries —— 以数组的形式返回对象中的键值对，结合for...of可以遍历obj

const obj = {
  foo: 'value1',
  bar: 'value2'
}

// Object.values -----------------------------------------------------------

console.log(Object.values(obj))

// Object.entries ----------------------------------------------------------

console.log(Object.entries(obj))
// 比iterator 更简单，直接先将obj转换成数组，再使用 for...of
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value)
}

console.log(new Map(Object.entries(obj)))

Object.getOwnPropertyDescriptors —— 获取对象属性的完整信息，主要配合ES5的get、set使用
Object.assign 获取不到set、get信息

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)

String新增方法

String.prototype.padStart / String.prototype.padEnd

const books = {
  html: 5,
  css: 16,
  javascript: 128
}

// for (const [name, count] of Object.entries(books)) {
//   console.log(name, count)
// }

for (const [name, count] of Object.entries(books)) {
  console.log(`${name.padEnd(16, '-')}|${count.toString().padStart(3, '0')}`)
}

在函数参数中添加尾逗号

const arr = [
  100,
  200,
  300,
  400,
]
const arr = [
  100,
  200,
  300
]

新增Async/Await异步编程语法糖

参考资料：ecma6.0英文规范
来自于ES2017标准；async、await能够更方便的进行异步编程，且通常需要成对使用；

1、async、await相对于generate函数升级提升的地方：

• （1）内置执行器
• （2）更好的语义
• （3）更好的扩展器
• （4）返回值是promise

2、async、await的返回值

• （1）async的返回值是promise对象；但是需要注意：

  1、async函数返回一个 Promise 对象。
  2、async函数内部return语句返回的值，会成为then方法回调函数的参数。

async function f() {
  return 'hello world';
}

f().then(v => console.log(v))
// "hello world"

• （2）await返回值根据后面的参数不同而不同，有两种；

3、await 后面的参数

• （1）await后面跟一个promise对象；=> 返回promise对象的结果；
• （2）await后面跟一个值；=> 直接返回该值；

4、错误处理方法

如果await后面的promise异步操作出错，那么等同于async函数返回的 Promise 对象被reject。最好把await命令放在try...catch代码块中

async function f() {
  await new Promise(function (resolve, reject) {
    throw new Error('出错了');
  });
}

f()
.then(v => console.log(v))
.catch(e => console.log(e))
async function myFunction() {
  try {
    await somethingThatReturnsAPromise();
  } catch (err) {
    console.log(err);
  }
}

// 另一种写法

async function myFunction() {
  await somethingThatReturnsAPromise()
  .catch(function (err) {
    console.log(err);
  });
}

5、并发/循环异步请求的处理

（1）如果是串行执行异步请求，需要同步等待，会比较耗时；

let foo = await getFoo();
let bar = await getBar();

// 1、循环里面的串行执行：
async function dbFuc(db) {
  let docs = [{}, {}, {}];

  for (let doc of docs) {
    await db.post(doc);
  }
}

// 2、错误的串行执行：？why？思考？forEach里面的async应该是异步同时执行的，没有await？
function dbFuc(db) { //这里不需要 async
  let docs = [{}, {}, {}];

  // 可能得到错误结果
  docs.forEach(async function (doc) {
    await db.post(doc);
  });
}

（2）并行执行——等待所有响应，再执行下一个步骤；

async function dbFuc(db) {
  let docs = [{}, {}, {}];
  let promises = docs.map((doc) => db.post(doc));

  let results = await Promise.all(promises);
  console.log(results);
}

// 或者使用下面的写法

async function dbFuc(db) {
  let docs = [{}, {}, {}];
  let promises = docs.map((doc) => db.post(doc));

  let results = [];
  for (let promise of promises) {
    results.push(await promise);
  }
  console.log(results);
}

（3）并行执行——不等待所有响应，回来一个回调一个；

// 可以不要在for里面await；也不要写成串行的回调；
// 是在for里面写异步方法的调用？例如：

  let docs = [{}, {}, {}];

  for (let doc of docs) {
    db.post(doc).then((res)=>{});
  }

6、async、await原理（利用generator实现async、await）

async、await底层封装起来了看不见代码实现
可以利用iterator或者generator函数，进行封装实现；参考代码：（未完待续）

ES2019 前定义的数据类型：8种

6+1 种原始数据类型 + bigInt（下个版本）

1. null
2. undefined
3. number
4. string
5. boolean
6. Symbol(ES2015)
7. BigInt(stage-4，下个版本出标准化)

1 种引用数据类型
Object

特别鸣谢：拉勾教育前端高薪训练营