通过示例来学习ES2016, 2017, 2018的新特性

译者按： 本文系统地总结了所有的新特性，并用浅显的例子解释。

本文采用意译，版权归原作者所有

小编推荐：Fundebug专注于 JavaScript、微信小程序、微信小游戏，Node.js 和 Java 线上 bug 实时监控。真的是一个很好用的 bug 监控服务，众多大佬公司都在使用。



一直保持对 JavaScript 新特性的关注是一件很难的事情，特别是还找不到几个有用的例子去理解它。

本文会辅以有用的例子来讲述TC39中的 18 个特性，它们分别在 ES2016, ES2017 和 ES2018 中加入。
鉴于本文内容很长，我们将分为两个部分来介绍，此为第一部分。



1. Array.prototype.includes

includes是一个 Array 上很有用的函数，用于快速查找数组中是否包含某个元素。(包括 NaN，所以和 indexOf 不一样)。



2. 指数函数的中缀形式

加/减法我们通常都是用其中缀形式，直观易懂。在 ECMAScript2016 中，我们可以使用**来替代 Math.pow。





1. Object.values()

Object.values()函数和 Object.keys()很相似，它返回一个对象中自己属性的所有值(通过原型链继承的不算)。



2. Object.entries()

Object.entries()和 Object.keys 相关，不过 entries()函数会将 key 和 value 以数组的形式都返回。这样，使用循环或则将对象转为 Map 就很方便了。

例子 1：



例子 2：



3. 字符串追加

提供了两个字符串追加的方法 String.prototype.padStart 和 String.prototype.padEnd，方便我们将一个新的字符串追加到某个字符串的头尾。

'someString'.padStart(numberOfCharcters [,stringForPadding]);
'5'.padStart(10) // '          5'
'5'.padStart(10, '=*') //'=*=*=*=*=5'
'5'.padEnd(10) // '5         '
'5'.padEnd(10, '=*') //'5=*=*=*=*='

这个对于格式化输出很有用！

3.1 padStart 例子

我们有一个不同长度元素的数组，我们可以往前面追加 0 来使得他们打印的长度都为 10。



3.2 padEnd 例子

同样，通过在后面追加字符串来格式化输出。



const cars = {
    "🚙BMW": "10",
    "🚘Tesla": "5",
    "🚖Lamborghini": "0"
};
Object.entries(cars).map(([name, count]) => {
    //padEnd appends ' -' until the name becomes 20 characters
    //padStart prepends '0' until the count becomes 3 characters.
    console.log(`${name.padEnd(20, " -")} Count: ${count.padStart(3, "0")}`);
});
//Prints..
// 🚙BMW - - - - - - -  Count: 010
// 🚘Tesla - - - - - -  Count: 005
// 🚖Lamborghini - - -  Count: 000

3.3 使用 padStart 和 padEnd 来格式化 Emojis 和其他宽字符

Emojis 和宽字符使用多个字节来表示，因此可能使用 padStart 和 padEnd 的结果并非如你所愿。

比如：我们追加 ❤️ 到heart前面：

//你会发现不仅没有5个桃心，有一个桃心还很奇怪。
"heart".padStart(10, "❤️"); // prints.. '❤️❤️❤heart'

这是因为 ❤️ 占有 2 个字节(‘\u2764\uFE0F’)，而 heart 本身有 5 个字节，因此只有 5 个字节的余地。所以只是追加了 2 个半的桃心。最后追加的’\u2764’会显示为小黑桃心。

4. Object.getOwnPropertyDescriptors

该函数返回一个对象所有的属性，甚至包括 get/set 函数。ES2017 加入这个函数的主要动机在于方便将一个对象深度拷贝给另一个对象，同时可以将 getter/setter 拷贝。和 Object.assign 不同。

Object.assign 将一个对象除了 getter/setter 以外的都深度拷贝了。

将原对象 Car 拷贝到 ElectricCar，你就会发现 Object.getOwnPropertyDescriptors 拷贝了 getter 和 setter，而 Object.assign 没有。





5. 允许在函数参数最后添加逗号

这是一个很小的改动，方便 git 算法更加方便区分代码职责。我们用一个详细的例子来理解：



值得一提的是，在函数调用的时候，也可以在最后添加逗号。

6. Async/Await

迄今为止，我介绍的特性中最有用的就属这个功能了。Async 函数可以帮助我们摆脱“回调地狱”，并且整个代码会更加简洁。

async关键字告诉 JavaScript 编译器对于标定的函数要区别对待。当编译器遇到await函数的时候会暂停。它会等到await标定的函数返回的 promise。该 promise 要么得到结果、要么 reject。

在下面的例子中，getAmount函数调用getUser和getBankBalance两个异步函数。我们可以用 promise 来实现它，不过用 async await 更加简洁。



6.1 async 函数返回 Promise

如果你想获取一个 async 函数的结果，你需要使用 Promise 的 then 语法。

在下面的例子中，我们想用 console.log 来打印 doubleAndAdd 的结果，可以使用 then 语法，将 console.log 函数作为参数传入。



6.2 并行处理

在上面的例子中，我们显示地调用了 await 两次，因为每次都等待了 1 秒钟，因此总计两秒钟。现在，我们可以使用 Promise.all 函数来让他们并行处理。



6.3 async/await 的错误处理

有很多方法来处理错误。

  • 方法 1：在函数中使用 try-catch


  • 方法 2：catch 每一个 await 表达式

因为每一个 await 表达式都会返回 Promise，你可以对一个进行 catch 操作。



  • 方法 3：catch 整个 async-await 函数


关于Fundebug

Fundebug专注于JavaScript、微信小程序、支付宝小程序线上应用实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了80亿+错误事件。欢迎大家免费试用！

版权声明

转载时请注明作者 Fundebug以及本文地址：
https://blog.fundebug.com/2018/07/17/new_in_es16_17_18/

您的用户遇到BUG了吗？

体验Demo 免费使用