前端ECMAScript 部分新增功能

Posted 2021-05-01 IT技术大神

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 = {
  ': '10',
  ': '5',
  ': '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')}`)
});
//打印结果..
//
//
// 

3.3 ⚠️ Emojis(表情符号)和其他双字节字符上的padStart和padEnd

Emojis和其他双字节字符使用unicode的多个字节表示。所以padStart和padEnd可能无法按预期工作！⚠️

例如：假设我们正在尝试用❤️表情符号填充字符串heart以达到10个字符。结果如下所示

//注意，不是5颗心，只有2颗心和1颗看起来很奇怪的心！
'heart'.padStart(10, "❤️"); // prints.. '❤️❤️❤heart'

这是因为❤️长2个字符('\u2764\uFE0F')!单词heart本身是5个字符，所以我们只剩下5个字符。所以,JS 填塞两颗心用'\u2764\uFE0F'和生产❤️❤️。为最后一个只是用心灵的第一个字节\ u2764产生❤

所以结果是: ❤️❤️❤heart

PS：您可以使用此链接 查看unicode字符转换

4. Object.getOwnPropertyDescriptors

此方法返回给定对象的所有属性的所有详细信息(包括 get``set 方法). 添加这个的主要动机是允许浅拷贝/克隆一个对象到另一个对象中，这个对象也拷贝getter和setter函数，而不是Object.assign

Object.assign浅克隆除原始源对象的getter和setter函数以外的所有详细信息。

以下示例显示了Object.assign和Object.getOwnPropertyDescriptors与Object.defineProperties之间的区别，以将原始对象Car复制到新对象ElectricCar，Object.getOwnPropertyDescriptors看到，discount 获取器和设置器函数也被复制到目标对象中。

之前…

//之前...
var Car = {
    name: 'BMW',
    price: 1000000,
    set discount(x) {
        this.d = x;
    },
    get discount() {
        return this.d;
    },
};
//打印Car对象的“discount”属性的详细信息
console.log(Object.getOwnPropertyDescriptor(Car, 'discount'));
//打印结果..
// {
//     get: [Function: get],
//     set: [Function: set],
//     enumerable: true,
//     configurable: true
// }
//使用Object.assign将Car的属性复制到ElectricCar
const ElectricCar = Object.assign({}, Car)；
//打印ElectricCar对象的“discount”属性的详细信息
console.log(Object.getOwnPropertyDescriptor(ElectricCar, 'discount'));
//打印
// {
//     value: undefined,
//     writable: true,
//     enumerable: true,
//     configurable: true
// }
//⚠️ 请注意ElectricCar对象中的“discount”属性中缺少getter和setter！

以后…

//以后...
var Car = {
    name: 'BMW',
    price: 1000000,
    set discount(x) {
        this.d = x;
    },
    get discount() {
        return this.d;
    },
};
//使用Object.defineProperties将Car的属性复制到ElectricCar2
//并使用Object.getOwnPropertyDescriptors提取Car的属性
const ElectricCar2 = Object.defineProperties({}, Object.getOwnPropertyDescriptors(Car));
//打印ElectricCar2对象“discount”属性的详细信息
console.log(Object.getOwnPropertyDescriptor(ElectricCar2, 'discount'));
//prints..
// { get: [Function: get],  
//   set: [Function: set],  
//   enumerable: true,
//   configurable: true
// }
// 请注意，getter和setter存在于ElectricCar2对象中，用于'discount'属性！

5. 在函数参数中添加尾随逗号(Add trailing commas in the function parameters)

这是一个小的更新，它允许我们在最后一个函数参数后面加上尾随逗号。为什么？为了帮助像git这样的工具，只会让新开发人员受到指责。

以下示例显示了问题和解决方案:

//问题
//    #1 开发者创建
function Person(
    name, 
    age    ) {
        this.name = name;
        this.age = age;
}
//#2 开发者添加address
function Person(
    name,
    age, // 添加尾随逗号     <--------因为逗号，开发人员会被git等工具所警告
    address //添加新的参数
  ) {
        this.name = name;
        this.age = age;
        this.address = address; //添加的这行
}
//ES2017 解决
//允许#1开发者添加尾随逗号
//#1 创建如下
function Person(
    name, 
    ange,  //<------- 由于尾随逗号，#2开发者不需要改变这行
    ) {
        this.name = name;
        this.age = age;
}

注意：您也可以使用尾随逗号来调用函数

END

IT技术大神   ∣ 小白到大神的进阶之路