ECMAScript 2016,2017 和 2018 中所有新功能的示例

很难追踪 JavaScript（ECMAScript）中的新功能。 想找到有用的代码示例更加困难。

因此，在本文中，我将介绍 TC39 已完成 ES2016，ES2017 和 ES2018（最终草案）提案中所有添加的 18 个功能，并展示有用的示例。

这是一个很长的文章，但应该很容易阅读。 可以把它想象成 “Netflix binge reading”。但是到文章结束，我保证你将对所有这些功能有很好的了解。

好的，让我们逐个讨论这些问题。

ECMAScript 2016

1.Array.prototype.includes

includes 是 Array 上的一个简单实例方法，有助于轻松查找某项元素是否在数组中（包括NaN ,与 indexOf不同）。

人们想要 contains 来命名该规范，但显然 Mootools 已经使用过这个命名，所以使用了 includes。

更多示例和常见问题请参见：ES2016 新特性：npm scripts : 每个前端开发都应知道的一些使用提示

2.指数运算符

加法和减法等数学运算分别具有 + 和 - 等中缀运算符。与它们类似，** 中缀运算符通常用于指数运算。在 ECMAScript 2016 中，引入了 ** 代替 Math.pow 。

更多示例和常见问题请参见：ES2016 新特性：求幂运算符(**)

ECMAScript 2017

1.Object.values()

Object.values() 是一个与 Object.keys() 类似的新函数，但返回 Object 自身属性的所有值，不包括原型链中的任何值。

更多示例和常见问题请参见：ES2017 新特性：Object.entries() 和 Object.values()

2.Object.entries()

Object.entries() 与 Object.keys 相关，但它不仅仅返回 keys ，而是以数组方式返回 keys 和 values 。这使得在循环中使用对象或将对象转换为 Maps 等操作变得非常简单。

示例1

示例2

更多示例和常见问题请参见：ES2017 新特性：Object.entries() 和 Object.values()

3.字符串填充

String 中添加了两个实例方法，String.prototype.padStart 和 String.prototype.padEnd – 允许将空字符串或其他字符串附加到原始字符串的开头或结尾。

JavaScript 代码:

    '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 位数长度显示。我们可以使用 padStart(10, '0') 轻松实现这一目标。

3.2 padEnd 示例

当我们打印不同长度的多个项并希望正确对齐它们时，padEnd 真的很方便。

下面的示例是 padEnd，padStart 和 Object.entries 组合在一起以产生漂亮输出的一个很好的现实示例。

JavaScript 代码:

    const cars = {
    '