ES历史版本特性汇总之ES7&8

[miyuesc]

summary_start
本文主要汇总ES7和ES8版本发布的新特性。
summary_end

ES7新特性（2016）

相对于ES6 的标准化改动量来说，ES7只增加了两个新特性

1. includes()

Array.prototype.includes()函数用来判断一个数组是否包含指定的元素，如果包含则返回ture，否则返回false。

includes()函数与indexOf()函数相似。

let arr: number[] = [1,2,3,4,5];
arr.includes(1) // return true
arr.indexOf(2) => 1

在ES7之前，我们判断数组中是否包含一个元素通常是判断数组的indexOf返回值是否为-1

example
let arr: number[] = [1,2,3,4,5];
if (arr.indexOf(1) ! == -1 ) {
	console.info("数组包含1");
} else {
	console.info("数组不包含1");
}

在ES7之后，我们可以直接使用includes来判断，更简单直观。

example
let arr: number[] = [1,2,3,4,5];
if (arr.includes(1)) {
	console.info("数组包含1");
} else {
	console.info("数组不包含1");
}

2. 指数操作符

ES7 引入了指数运算符**，与Math.pow()等效

example
console.log(math.pow(2, 10)) // 1024
console.log(2**10) // 1024

ES8新特性(2017)

与ES6相比，ES8仍是EcmaScript的一个小版本更新，引入了如下功能。

1. Object.values，
2. Object.entries，
3. Object.getownPropertyDescriptors()，
4. 字符串填充（padStart和padEnd)
5. Async/await异步函数
6. 共享内存和Atomics

Object.values()

Object.values()返回一个包含所有对象属性的数组，但只包括对象自身的属性，不包括继承的值。

const company: Object = { name: "cisdi", address: "Yubei, Chongqing, China", type: "IT"};
Object.values(company) // ["cisdi", "Yubei, Chongqing, China", "IT"]

此方法也适用于数组，返回值与原数组相同。

const company: String[] = ["cisdi", "IT"];
Object.values(company) // ["cisdi", "IT"]

在ES8之前不使用Object.values获取对象所有的值采用下面的方法。

const company: Object = { name: "cisdi", address: "Yubei, Chongqing, China", type: "IT"};
const values: String[] = Object.keys(company).map((key: string) => company[key]);
console.log(values) // ["cisdi", "Yubei, Chongqing, China", "IT"]

Object.entries()

Object.entries()返回一个包含对象所有属性的二维数组，以[key, value]形式作为单个数组元素。

const company: Object = { name: "cisdi", address: "Yubei, Chongqing, China", type: "IT"};
Object.entries(company) // [["name", "cisdi"], ["address", "Yubei, Chongqing, China"], ["type", "IT"]]

此方法同样适用于数组，返回一个由数组下标作为键名key的二维数组。

const company: String[] = ["cisdi", "IT"];
Object.entries(company) // [[0, "cisdi"], [1, "IT"]]

使用此方法遍历对象中所有属性的key和value。

const company: Object = { name: "cisdi", address: "Yubei, Chongqing, China", type: "IT"};
for(let [key,value] of Object.entries(company)){
	console.info(`key: ${key}, value: ${value}`);
})

Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors()返回一个对象所有属性的描述符。

字符串填充