很难追踪 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
– 允许将空字符串或其他字符串附加到原始字符串的开头或结尾。
'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
组合在一起以产生漂亮输出的一个很好的现实示例。
const cars = {
'