第1248期ECMAScript 2016, 2017, 和2018中新增功能

Posted 2021-05-01 前端早读课

前言

你们的js语法好老旧，我们这都开始es7了。听到这样的化，扎心了没？落伍，落后了吗？今日早读文章由@hypers翻译分享。

正文从这开始～

很难跟踪javascript(ECMAScript)中的新功能，更难找到有用的代码示例。

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

这是一个相当长的帖子，但应该是一个简单的阅读。把这看作是“Netflix binge reading”。在这之后，我保证你将对这些功能有很多的了解。

让我们一个接一个地看看：

ECMAScript 2016

1. Array.prototype.includes

includes是数组上的简单实例方法，并有助于轻松查找某个项是否在Array中（包括NaN不像indexOf）

const arr = [ 1, 2, 3, 4, NaN];
// es2016不使用
if(arr.indexOf(3) >= 0){
  console.log(true);
}
//使用
if(arr.includes(3)){
  console.log(true);
}
//ps: 注意 indexOf 是不支持查找NaN的
arr.includes(NaN) // true
arr.indexOf(NaN) // -1 (indexOf 不支持 NaN)    

琐事：人们想要命名的JavaScript规范contains，但这显然已被Mootools使用，因此他们使用了includes。

2. 指数运算符

数学运算如加法和减法分别有 + 和 - 等运算符。与他们类似，** 运算符通常用于指数运算。在ECMAScript 2016中，引入了 ** 而不是Math.pow。

// 不使用
Math.pow(7,2) //49
//使用
7**2 //49

ECMAScript 2017

1. Object.values()

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

const cars = { 'BMW': 3, 'Tesla': 2, 'Toyota': 1 };
//ES2015
//ES2017 不使用
const vals = Object.keys(cars).map(key => cars[key]);
console.log(vals); //[3, 2, 1]
//ES2017 and 未来
//使用
const values = Object.values(cars);
console.log(values); // [3, 2, 1]

2. Object.entries()

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

例 1:

const cars = { 'BMW': 3, 'Tesla': 2, 'Toyota': 1 };
// ES5.1
//而不是提取键然后再循环
Object.keys(cars).forEarch(function(key) {
    console.log('key: ' + key + 'value: ' + cars[key]);
})
//ES2017 (ES8)
//使用 Object.entries 
for(let [key value] of Object.entries(cars)) {
    console.log(`key: ${key} value: ${value}`);
}

例 2:

const cars = { 'BMW': 3, 'Tesla': 2, 'Toyota': 1 };
//ES2015
//不使用
//获取对象键，然后添加每个项目以在循环中映射
const maps = new Map();
Object.keys(cars).forEarch(key => {
    maps.set(key, cars[key]);
})
console.log(map1) // Map { 'BMW' => 3, 'Tesla' => 2, 'Toyota' => 1}
//ES2017 and 以后
//使用
const map = new Map(Object.entries(cars));
console.log(map) //Map { 'BMW' => 3, 'Tesla' => 2, 'Toyota' => 1}

3. String padding

向字符串 – 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')轻松实现这一点。

//ES2017
//如果你有一个不同长度的项目列表，并希望格式化它们的显示目的，你可以使用padStart
const formatted = [0, 1, 12, 123, 1234, 12345].map(num => 
    num.toString().padStart(10, '0') // 添加 0 直到长度为 10
);
console.log(formatted);
//打印
// [
//     '0000000000',
//     '0000000001',
//     '0000000012',
//     '0000000123',
//     '0000001234',
//     '0000012345',
// ]    

3.2 padEnd 例子:

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

下面的例子是padEnd，padStart和Object.entries如何聚合在一起产生漂亮输出的一个很好的实例。

const cars = {
  '
以上是关于第1248期ECMAScript 2016, 2017, 和2018中新增功能的主要内容，如果未能解决你的问题，请参考以下文章
 
 第1006期ECMAScript 6 新特性
 第1462期赶上 ECMAScript 潮流：用现代 JavaScript 编程
 第2081期理解ECMAScript规范
 第1877期理解ECMAScript规范
 第1660期 Diff ECMAScript® 2019
 第2079期理解ECMAScript规范