Javascript更新的速度之快难以跟上脚步，配套的教程却少之又少，今天为大家介绍ES2016 ~ ES2018的新增的功能和特性，并配以详细的代码示例。
下面依照JS版本的顺序开始介绍:
1. Array.prototype.includes
includes是数组的实例方法，这个方法的功能很简单：用于判断某一项是否存在数组里，和这个方法功能类似的有 indexOf，两者的区别是indexOf无法判断 NaN，如图：
const arr = [1, 2, 3, 4, NaN];// es5if (arr.indexOf(3) >= 0) { console.log(true)}// es2016if (arr.includes(1)) { console.log(true)}// 注：indexOf不支持检查`NaN`arr.indexOf(NaN) // -1arr.includes(NaN) // true2. 求幂运算符
求幂运算符: **，用于取代以前的求幂方法 Math.pow，
使用方法如下：
// 之前Math.pow(3, 2) // 9// 现在3**2 // 9
1. Object.values()
Object.values方法和 Object.keys类似，返回类型都是数组，返回的值是对象的值的集合，需要注意一点：两个方法都是返回自身的属性，不包括任何原型链上的属性，如图：
const cars = { BMW: 3, Tesla: 2, Toyota: 1}// es5const vals = Object .keys(cars) .map(key => cars[key]) console.log(vals) // [3, 2, 1]// es2016const values = Object.values(cars)console.log(values) // [3, 2, 1]2. Object.entries()
Object.entries()方法有点像 Object.keys和Object.values的结合体，返回类型是数组，同时数组的每一项也是数组 — 包含两项：key和value，这个方法的好处在于你可以通过for of遍历一次取出key/value ；Object.entries()的返回值(object)还可以直接被转为Map：
例1，遍历:
const cars = { BMW: 3, Tesla: 2, Toyota: 1}// es5的遍历方式// 需要把`key`取出来，再遍历Object .keys(cars) .forEach(key => { console.log(`key: ${key}, value: ${cars[key]}`) })// es2017// Object.entries(carts):// [// ['BMW', 3],// ['Tesla', 2],// ['Toyota', 1]// ]for (let [key, value] of Object.entries(cars)) { console.log(`key: ${key}, value: ${cars[key]}`)}例2，把object直接转换为Map:
const cars = { BMW: 3, Tesla: 2, Toyota: 1}// es5const map1 = new Map()Object.keys(cars).map(key => { map1.set(key, cars[key])})console.log(map1) // Map { 'BMW': 3, 'Tesla': 2, 'Toyota': 1 }// es2016const map2 = new Map(Object.entries(cars))console.log(map2) // Map { 'BMW': 3, 'Tesla': 2, 'Toyota': 1 }3. String padding
String增加了两个实例方法 — padStart和 padEnd，这两个方法可以在字符串的首/尾添加其他字符串:
// 'someStr'.padStart(字符数, [,添加的字符])'hello'.padStart('10', 'a') // 'aaaaahello', 添加了5个字符`a`后一共`10`个字符'hello'.padEnd('10', 'b') // 'hellobbbbb''hello'.padStart('7') // ' hello', 在头部添加两个个空格3.1 padStart示例
const formatted = [ 0, 1, 12, 123, 1234, 12345 ] .map(num => num.toString().padStart(10, '0') )console.log(formatted)// 输出:// [// '0000000000',// '0000000001',// '0000000012,'// '0000000234,'// '0000001234,'// '0009012345'// ]3.2 padEnd示例
const cars = { '🚙BMW': '10', '🚘Tesla': '5', '🚖Lamborghini': '0'}Object .entries(cars) .map(([name, count]) => { console.log(`${name.padEnd(20, ' -')} Count: ${count.padStart(3, '0')}`) });//输出:// 🚙BMW - - - - - - - Count: 010// 🚘Tesla - - - - - - Count: 005// 🚖Lamborghini - - - Count: 0004.Object.getOwnPropertyDescriptors
这个方法的作用是补充Object.assign的功能，在浅拷贝(shallow clone)对象的基础上，也会复制getter和 setter方法：
下面的例子用Object.defineProperties拷贝原对象 Car到新对象ElectricCar来展示 Object.assign和Object.getOwnPropertyDescriptors的不同。
const Car = { name: 'BMW', price: 100000, set discount(x) { this.d = x }， get discount() { return this.d }}console.log(Object.getOwnPropertyDescriptor(Car, 'discount')// 输出:// {// get: [Function: get],// set: [Function: set],// enumerable: true,// configurable: true// }const ElectricCar = Object.assign({}, Car)console.log(Object.getOwnPropertyDescriptor(ElectricCar, 'discount'))// 输出:// {// value: undefined,// writable: true,// enumerable: true,// configurable: true// }// 使用`Object.assign`创建`ElectricCar`后，属性`getter`和`setter`丢失了使用Object.getOwnPropertyDescriptors后:
const Car = { name: 'BMW', price: 100000, set discount(x) { this.d = x }, get discount() { return this.d }}const ElectricCar2 = Object.defineProperties({}, Object.getOwnPropertyDescriptors(Car))// 输出:// {// get: [Function: get], <-----👈// set: [Function: set], <-----👈// enumerable: true,// configurable: true // }5. 在函数最后一个参数的末尾添加逗号
这是个很小的功能点，在函数形参最后一个参数末尾添加逗号，可以避免git blame提示上一个作者并不存在的改动，代码示例：
// 假设这个函数由 `程序员_1` 创建// 这个函数最后一个参数`age`后没有逗号function Person( name, age) { this.name = name this.age = age}// 如果 `程序员_2` 这时有了以下修改function Person( name, age, /* 那么这个`,`逗号也会引起`git blame`认为 `程序员_1` 修改了这一行*/ gender /* 添加了新参数 */) { // 新添加 this.name = name this.age = age this.gender = gender // 新添加}// es2017对这个混淆的处理办法是:// 通过 `程序员_1`在`age`末尾添加`,`逗号// 更新如下:// 假设这个函数由 `程序员_1` 创建// 在最后一个参数`age`后添加`,`逗号function Person( name, age, /* 添加逗号 */) { this.name = name this.age = age}6. Async/Await
这个特性是目前为止最重要的一个功能，async函数可以让我们避免频繁调用恶心的 callback，使代码保持干净整洁。
当编译器进入async函数后，遇到 await关键字会暂停执行，可以把await后表达式当作一个 promise，直到promise被resolve或 reject后，函数才会恢复执行，
具体看如下代码：
// es5的`Promise`function getAmount(userId) { getUser(userId) .then(getBankBalance) .then(amount => { console.log(amount) })}// es2017的`async`async function getAmount2(userId) { var user = await getUser(userId) var amount = await getBankBalance() console.log(amount)}getAmount('1') // $1,000getAmount2('1') // $1,000function getUser(userId) { return new Promise(resolve => { setTimeout(() => { resolve('张三') }, 1000) })}function getBankBalance() { return new Promise((resolve, reject) => { setTimeout(() => { if (user === '张三') { resolve('$1,000') } else { resolve('Unknown User') } }, 1000) })}6.1 Async函数本身返回一个Promise
因为async函数返回一个promise，所以想要得到async函数的返回值需要对返回的promise进行then求值。
具体看如下代码：
async function doubleAndAdd(a, b) { a = await doubleAfter1Sec(a) b = await doubleAfter1Sec(b) return a + b}doubleAndAdd(1, 2).then(console.log) // 5 async function doubleAfter1Sec(param) { return new Promise(resolve => { setTimeout(() => { resolve(param * 2) }, 1000) })}6.2 并行调用async/await
上一个函数doubleAndAdd里依次调用了两个 async函数，但是每次调用都必须等待1秒，性能很差；因为参数a和参数 b之间并无耦合，所以我们可以使用Promise.all来并行执行这两次调用:
async function doubleAndAdd(a, b) { // 使用`Promise.all` // 这个地方使用数组`解构` // 来得到两次调用的结果 const [a, b] = Promise.all([ doubleAfter1Sec(a), doubleAfter1Sec(b) ]) return a + b}doubleAndAdd(1, 2).then(console.log) // 5 async function doubleAfter1Sec(param) { return new Promise(resolve => { setTimeout(() => { resolve(param * 2) }, 1000) })}6.3 async/await的错误处理
async/await对错误处理有很多方法：
1. 在函数内使用try/catch
async function doubleAndAdd(a, b) { try { a = await doubleAfter1Sec(a) b = await doubleAfter1Sec(b) } catch (e) { return NaN } return a + b}doubleAndAdd('one', 2).then(console.log) // NaNdoubleAndAdd(1, 2).then(console.log) // 5 async function doubleAfter1Sec(param) { return new Promise(resolve => { setTimeout(() => { const val = param * 2 isNaN(val) ? reject(NaN) : resolve(val) }, 1000) })}2. catch 所有await表达式
因为await表达式返回一个 promise，所以我们可以在await表达式后直接执行 catch来处理错误
async function doubleAndAdd(a, b) { a = await doubleAfter1Sec(a).catch(e => console.log(`'a' is NaN`) b = await doubleAfter1Sec(b).catch(e => console.log(`'b' is NaN`)) if (!a || !b) return NaN return a + b}doubleAndAdd('one', 2).then(console.log) // NaN, "a" is NaNdoubleAndAdd(1, 2).then(console.log) // 5 async function doubleAfter1Sec(param) { return new Promise(resolve => { setTimeout(() => { const val = param * 2 isNaN(val) ? reject(NaN) : resolve(val) }, 1000) })}3. catch 整个async-await函数
async function doubleAndAdd(a, b) { a = await doubleAfter1Sec(a) b = await doubleAfter1Sec(b) return a + b}doubleAndAdd('one', 2) .then(console.log) .catch(console.log) // 使用catch
ECMAScript目前在最终稿阶段，将会在2018年6月或7月正式推出。下面介绍的所有特性属于stage-4，即将成为ECMAScript 2018的一部分。
1. 共享内存和原子性
这是JS的一个高级特性，也是JS引擎的核心改进。
共享内存的主要思想是： 把多线程的特性带到JS，为了提高代码的性能和高并发，由之前的JS引擎管理内存变为自己管理内存。
这个特性由一个新的全局对象SharedArrayBuffer来实现，这个对象在一块共享内存区储存数据，JS的主线程和web-worker线程共享这部分数据。
当前，如果我们想要在JS主线程和web-worker线程间共享数据时，必须使用postMessage在不同线程间传递数据，有了 SharedArrayBuffer后，不同的线程可以直接访问这个对象来共享数据。
但是多线程间的共享内存会产生竞态条件，为了避免这种情况，JS引入了原子性的全局对象。这个对象提供了多种方法来保证正在被某个线程访问的内存被锁住，以达到内存安全。
2. Tagged Template literal(带标签的模板字面量?) 限制被移除
首先弄懂一个概念：什么s是Tagged Template literal ?
tagged template literal出现在es2015以后，允许开发者自定义字符串被嵌入的值。举一个例子，标准的字符串嵌入一个值的方式是：
const userName = '张三'const greetings = `hello ${userName}!`console.log(greetings) // "hello 张三!"在tagged template literal里，你可以用一个函数通过参数来接收字符串写死的各部分，比如: [‘hello’, ‘!’]和之后被替换为值的变量[‘张三’]，最后通过函数返回任何你想要的结果，这个函数被称作Tagged函数，下面 Tagged函数greet来扩展上例中的greetings：
const userName = '张三'const greetings = `hello ${userName}!`console.log(greetings) // "hello 张三!早上好!"// hardCodedPartsArray: 字符串写死的各部分, [ "hello ", "!" ]// replacementPartsArray: 字符串里嵌入的变量, [ "张三" ]function greet(hardCodedPartsArray, ...replacementPartsArray) { let str = '' hardCodedPartsArray.forEach((part, i) => { if (i < replacementPartsArray.length) { str += `${part}${replacementPartsArray[i] || ''}` } else { str += `${part} ${timeGreet()}` // 在结尾添加问候语 } }) return str}function timeGreet() { const hr = new Date().getHours() return hr < 12 ? '早上好!' : hr < 18 ? '下午好!' : '晚上好!'}3. 正则表达式中的.匹配所有字符
在目前的正则表达式中，虽然.点被认为代表所以字符，实际上它不会匹配像 \n、\r和 \f等换行符。
例如:
// 之前/first.second/.test('first\nsecond'); // false这个改进使.点操作符匹配任意单个字符。为了保证下面这段代码在任何JS版本都正常工作，我们在结尾加上 /s修饰符
//ECMAScript 2018/first.second/s.test('first\nsecond'); // true 注意: /s 👈🏼4. 正则表达式捕获Named Group
这个改进带来了在其他语言中比如:Java、Python等已经支持了的有用的正则特性。这个特性允许开发者在正则中为不同的组写格式为(<?name>)的名字标识符，之后可以在匹配的结果里通过名字标识的组来获取对应的值。
4.1 基础示例
// 之前const re1 = /(\d{4})-(\d{2})-(\d{2})/const result1 = re1.exec('2015-01-08')console.log(result1)// 输出：// [// "2015-01-08",// "2015",// "01",// "08",// index: 0,// input: "2015-01-08",// groups: undefined// ]// 现在 (es2018)const re2 = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/uconst result2 = re2.exec('2015-01-08')console.log(result2)// 输出：// [// "2015-01-08",// "2015",// "01",// "08",// groups: {// day: "08",// month: "01",// year: "2015"// },// index: 0,// input: "2015-01-08",// ]4.2 在正则自身使用命名组
我们可以使用格式\k<group name>在正则自身来引用之前的组。下面的用例子展示：
// 在这个例子里，我们有一个命名组`fruit`，// 它可以匹配`apple`或者`orange`，我们可以用`\k<group name>`(\k<fruit>)// 来引用之前匹配的这个组// 所以等号两边的值是相等的const sameWords = /(?<fruit>apple|orange)==\k<fruit>/usameWords.test('apple==apple') // truesameWords.test('orange==orange') // truesameWords.test('apple==orange') // false4.3 在String.prototype.replace里使用命名组
命名组特性已经被添加到replace方法里，所以我们可以轻松地替换字符串了。
例如： 改变”firstName, lastName” 为 “lastName, firstName”:
const re = /(?<firstName>[A-Za-z]+) (?<lastName>[A-Za-z]+)/u'John Lennon'.replace(re, '$<lastName>, $<firstName>') // Lennon John5. 对象的Rest properties
Rest操作符...（三个点）允许我们取出剩余的对象属性
5.1 使用Rest properties来取出你想要使用的属性
let { name, age, ...remaining} = { name: '张三', age: 20, gender: '男', address: 'xxxxx'}name // '张三'age // 205.2 你甚至可以移除不想要的属性
// 如果我们想要删除address属性，// 但是我们又不想要遍历对象重新创建新对象// 我们只要简单的解构出这个要移除的属性// 剩下的没有解构的对象// 就是我们想要留下的对象let {address, ...cleanObj} = { name: 'john', address: '北京市海淀区', gender: '男'}cleanObj // {name, gender}6. 对象的Spread properties
Spread属性看起来和Rest属性很像，也是三个点...操作符，不同的是Spread用于创建新对象。
const person = {name: 'john', age: 20}const address = {city: 'Beijing', country: 'china'}const personWithAddress = { ...person, ...address}personWithAddress // {name, age, city, country}7. 正则Lookbehind断言
这个正则的改进允许我们保证在一些字符串之前存在某些字符串。
你可以使用一组(?<=...)(问号，小于等于)寻找后面肯定的断言。
更进一步，你可以使用(?<!...(问号，小于号叹号)寻找后面否定的断言。
肯定断言: 比如我们想要确定在符号#出现在单词 winning前，即#winning，只返回 winning:
/(?<=#).*/.test('winning') // false/(?<=#).*/.test('#winning') // true// 之前'#winning'.match(/#.*/)[0] // '#winning'// es2018'#winning'.match(/(?<=#).*/)[0] // 'winning', 没有 #, #只是为了验证否定断言：比如我们想要取出数字前标志是#，而不是$的数字
'this is a test signal $1.23'.match(/(?<!\$)\d+\.\d+/) // null'this is a test signal #2.43'.match(/(?<!\$)\d+\.\d+/)[0] // 2.438. 正则Unicode属性转义符
用正则匹配所有的unicode字符很困难。像\w、 \W、\d等只能匹配英文字符和数字，但是出现在其他语言比如希腊语里的数字我们要怎么处理呢？
Unicode属性转义符就是为了解决这个问题。它使Unicode为每个字符添加描述性的metadata。
例如: Unicode数据库把所有北印度语字符归在一个值为Devanagari的属性 Script和另一个值也为的Devanagari的属性 Script_Extensions的组下，所以我们可以通过搜索Script_Extensions来得到所有北印度语字符。
Starting in ECMAScript 2018, we can use \p to escape characters along with {Script=Devanagari} to match all those Indian characters. That is, we can use: \p{Script=Devanagari} in the RegEx to match all Devanagari characters.
从ES2018开始，我们可以使用\p配合{Script=Devanagari}的转义字符来匹配所有北印度语字符，也就是用转义字符 \p{Script=Devanagari}来匹配所有Devanagari字符。
// 下面的正在匹配多个北印度语字符// ps: 这里一共有三个北印度语字符/^p{Script=Devanagari}+$/u.test('हिन्दी') // true相似的，Unicode把所有希腊语字符用属性Script_Extensions (和Script)值为 Greek来分组，所以我们可以用Script_Extensions=Greek或 Script=Greek来搜索所有希腊语字符。
也就是说，我们可以用转义字符\p{Script=Greek}来匹配所有希腊语字符:
/\p{Script_Extensions=Greek}/u.test('π') // true更多的，Unicode数据库储存了很多种类型的Emoji字符，以Boolean属性Emoji、 Emoji_Component、Emoji_Presentation、 Emoji_Modifier和Emoji_Modifier_Base，值为 true来分组，我们可以通过使用Emoji来搜索所有Emoji字符。
也就是通过转义字符\p{Emoji}来匹配各种Emoji字符
/\p{Emoji}/u.test('❤️')// 下面的例子匹配失败，因为黄色的emoji字符不需要`Emoji_Modifier`/\p{Emoji}\p{Emoji_Modifier}/u.test('✌️'); //false// 下面的匹配一个emoji字符，`\p{Emoji}`跟着一个`\p{Emoji_Modifier}`/\p{Emoji}\p{Emoji_Modifier}/u.test('✌🏽'); //true// 解释:// 默认情况下`胜利`的emoji字符是黄色的，// 如果我们使用棕色、黑色或者其他颜色的变种emoji，// 它们被当做为原始Emoji字符的变种，使用两个unicode字符来表示,// 一个代表原始的emoji字符，跟着的一个unicode字符表示颜色//// 所以在下面的例子里，即使我们只看到了一个棕色的胜利emoji图标，// 但是它实际上使用了两个unicode字符，一个是emoji，另一个是棕色。//// 在Unicode数据库里，这些颜色有`Emoji_Modifier`属性。// 所以我们需要使用`\p{Emoji}`和`\p{Emoji_Modifier}`// 来完整的匹配棕色emoji/\p{Emoji}\p{Emoji_Modifier}/u.test('✌🏽'); //trueLastly, we can use capital “P”(\P ) escape character instead of small p (\p ), to negate the matches.
最后，我们可以使用大写P(\P)转义字符来匹配和小写\p匹配内容相反的内容。
8. Promise.prototype.finally()
finally()是新加到Promise上的实例方法。主要用处是在 resolve或reject回调函数执行完后，执行清理任务。
finally回调函数不携带任何参数，不管任何情况下都会被执行。
// Resolve示例let started = truelet myPromise = new Promise((resolve, reject) => { resolve('all good')}).then(val => { console.log(val) // 'all good'}).catch(e => { console.log(e) // 跳过}).finally(() => { console.log('这个函数总是会被执行') started = false // 清理})// Reject示例let started = truelet myPromise = new Promise((resolve, reject) => { reject('reject apple')}).then(val => { console.log(val) // 'reject apple'}).catch(e => { console.log(e) // 跳过}).finally(() => { console.log('这个函数总是会被执行') started = false // 清理})// 错误case 1// 从Promise抛出错误let started = truelet myPromise = new Promise((resolve, reject) => { throw new Error('error')}).then(val => { console.log(val) // 跳过}).catch(e => { console.log(e) // 因为有error，所以catch被调用}).finally(() => { console.log('这个函数总是会被执行') started = false // 清理})// 错误case 2// 从`catch` case 抛出错误let started = truelet myPromise = new Promise((resolve, reject) => { throw new Error('something happened')}).then(val => { console.log(val) // 跳过}).catch(e => { throw new Error('throw another error')}).finally(() => { console.log('这个函数总是会被执行') started = false // 清理 // 注意，从*catch*里抛出的错误需要在其他地方处理})9. 异步循环
这是一个特别有用的特性。根本上讲，它允许我们轻易地在异步函数里创建循环。
这个特性添加了一个新的for-await-of循环，允许我们在一个循环里调用返回promise（或者是每一项为promise的数组）的异步函数。
最cool的地方是这个循环会等待每个promiseresolve后再去执行下一次循环。
const promises = [ new Promise(resolve => resolve(1)), new Promise(resolve => resolve(2)), new Promise(resolve => resolve(3)),]// 之前// for-of使用正常的同步循环// 不会等待promise resolveasync function test1() { for (const obj of promises) { console.log(obj) // 输出3个promise对象 }}// 之后// for-await-of 使用Async循环// 为每个循环等待promise resolveasync function test2() { for await (const obj of promises) { console.log(obj) // 输出1, 2, 3 }}test1() // promise, promise, promisetest2() // 1, 2, 3