ES7-ES13新特性

自从转向React Native以后，很久没关准ES新特性了，这次将完整的过一遍ES7到目前为止的所有新特性

ES7（2016）

ES2016添加了两个小的特性来说明标准化过程：

• 数组includes方法
• 指数运算符

Array.prototype.includes

includes()函数用于判断一个数组是否包含一个指定的值，如果包含则返回true，否则返回false

includes 函数与indexOf 函数很相似，下面两个表达式是等价的

arr.includes(x)
arr.indexOf(x) >= 0

// 在ES7之前，使用indexOf验证数组中是否存在某个元素，这是需要根据返回值是否为-1来判断
let arr = ['react', 'angular', 'vue'];

if (arr.indexOf('react') !== -1)

// ES7及以后，可以使用includes，更加直观

if (arr.includes('react'))

指数操作符

在ES7中引入了指数运算符** ，** 具有与Math.pow() 等效的计结果

console.log(2**10) // 1024

ES8（2017）

• 异步迭代器
• Objective.values()
• Object.entries()
• String padding
• 函数参数列表结尾允许逗号
• Object.getOwnPropertyDescriptors
• ShareArrayBuffer对象
• Atomics对象

异步迭代器

异步迭代器与常规迭代器的最大区别在于next()方法返回一个Promise，或者在迭代器中需要等待异步操作。

异步迭代器的创建方式

function* asyncGenerator1() {
	let i = 0;
	while(i < 3) {
		i++;
		yield new Promise(resolve => setTimeout(() => resolve('time' + i), 1000));
    }
}

async function* asyncGenerator2() {
	let i = 0;
	while(i < 3) {
		i++;
		const result = await new Promsie(resolve => {
			setTimeout(() => resolve('item' + 1), 1000);
		})
		yield result;
    }
}

因为await可以和for…of循环一起使用，以串行的方式运行异步操作

(async () {
	for await (let i of asyncGenerator2()){
		console.log(i);
		// 1s after time0
		// 2s after time1
		// 3s after time2
	}
})()

Object.values()

Object.values() 是一个与Object.keys() 类似的新函数，但返回的是Object自身属性的所有值，不包含继承的值。

const obj = {a: 1, b: 2, c: 3};
// ES7
const values = Object.keys(obj).map(key => obj[key]);
// ES8
const values = Object.values(obj);
// [1, 2, 3]

Object.entries()

Object.entries() 函数返回一个给定对象自身可枚举属性的键值对的数组

const obj = {a: 1, b: 2, c: 3};
// ES7
const result = [];
Object.keys(obj).forEach(key => result.push([key, obj[key]]));
// ES8
const result = Object.entries(obj);
// [[a, 1], [b, 2], [c, 3]];

String padding

在ES8中String新增了两个实例函数String.prototype.padStart 和String.prototype.padEnd ，允许将空字符串或其他字符添加到原始字符串的开头或结尾。

String.padStart(targetLength, [padString]);

• targetLength：当前字符串需要填充到的目标长度，如果这个数值小于当前字符串长度，则返回当前字符串本身
• padString：（可选）填充字符串，如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分。此参数默认值为' ‘ 。

同理String.padEnd 从字符串末尾开始填充

函数参数列表允许逗号结尾

主要作用是方便使用git进行多人协作开发时修改同一个函数时减少不必要的行变更

Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors() 函数用来获取一个对象的所有自身属性的描述符。如果没有任何自身属性，则返回空对象。

const obj = {
	name: 'Jine',
	get age() { return '18'}
}

Object.getOwnPropertyDescriptors(obj)
/*
{
	age: {
		configurable: true,
		enumerable: true,
		get: function age(){}, // the getter function
		set: undefined
	},
	name: {
		configurable: true,
		enum: true,
		value: 'Jine',
		writable: true,
    },
}
*/

ShareArrayBuffer对象

ShareArrayBuffer对象用来表示一个通用的，固定长度的原始二进制数据缓冲区，类似于ArrayBuffer对象，它们都可以用来在共享内存上创建试图。与ArrayBuffer不同的是，ShareArrayBuffer不能被分离。

new SharedArrayBuffer(length);

Atomics对象

Atomics对象提供了一组静态方法用于对ShareArrayBuffer对象进行原子操作。

这些原子操作属于Atomics模块。与一般的全局对象不同，Atomics不是构造函数，因此不能使用new操作符调用，也不能将其当作函数直接调用。Atomics的所有属性和方法都是静态的