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

时间:2023-03-08 17:18:48

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

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

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

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

ECMAScript 2016

1.Array.prototype.includes

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

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

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

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

2.指数运算符

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

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

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

ECMAScript 2017

1.Object.values()

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

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

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

2.Object.entries()

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

示例1

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

示例2

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

更多示例和常见问题请参见: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') 轻松实现这一目标。

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

3.2 padEnd 示例

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

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

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

JavaScript 代码:
    const cars = {
'