ES7【2016】、ES8【2017】新增特性（六）

ES7【2016】新增特性

幂指数操作符

在ES7【2016】中新增了幂指数操作，幂指数操作符是**。它用于指数计算

基本语法：baseValue ** exponent

参数说明：baseValue是基数，exponent是指数。

let base = 2;
let exponent = 4;
let result = base ** exponent; // 结果是2的4次方，即16
console.log(result); // 输出：16

Array.prototype.includes

Array.prototype.includes方法用于判断一个值是否存在于数组中，如果存在则返回true，否则返回false

语法：【 array.includes(element, start = 0); 】

参数：element：要查找的元素。start：开始查找的位置。

返回值：如果数组中包含要查找的元素，则返回true，否则返回false。

注意：如果start参数小于0，则重置为0，如果start参数大于等于数组长度，则返回false。

let numArr = [1,2,3,4]
numArr.includes(2);     // true
numArr.includes(2, 0);  // true
numArr.includes(2, 2);  // false
numArr.includes(2, 5);  // false
numArr.includes(2, -1); // false

ES8（2017）新增特性

异步函数 async/await

async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。当函数执行的时候，一旦遇到 await 就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

function timeout(ms){
    return new Promise(resolve =>{
        setTimeout(resolve,ms)
    })
}

async function asyncPrint(value,ms){
    await timeout(ms)
    console.log(value)
}

asyncPrint('Hello'，300)        // 上诉代码指定 300ms 后输出 Hello。

async 函数返回一个 Promise 对象，async 函数内部 return 语句返回的值，会成为 then 方法回调函数的参数

async function f() {
    return 'Hello'
}
f().then(v =>console.log(v))    //'Hello'

async 函数内部抛出错误会导致返回的 Promise 对象变成 rejected 状态，抛出的错误对象会被 catch 方法回调函数接受到

async function  f(){
    throw new Error('出错了')
}

f().then(
    v=>console.log(v),
    e=>console.log(e)
}                            // 'Error:出错了'

正常情况下，await 命令后面是一个 Promise 对象，如果不是，会被转为一个立即 resolve 的 Promise 对象。

await 命令后面的 Promise 对象如果变成 rejected 状态，则 reject 的参数会被 catch 方法的回调函数接收到。

只要一个 await 语句后面的 Promise 变成 rejected，那么整个 async 函数都会被中断执行。

注意：

await 命令后面的 Promise 对象的运行结果可能是 rejected，最好把 await 命令放在 try...catch 中。
多个 await 命令后面的异步操作如果不存在继发关系，最好让它们同时触发。
await 命令只能用在 async 函数中，如果用在普通函数中就会报错。

async/await详细介绍

Object.values

Object.values()方法返回一个给定对象自己的所有可枚举属性值的数组，值的顺序与使用for...in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。

语法：【 Object.values(obj) 】

参数：obj 被返回可枚举属性值的对象。

返回值：一个包含对象自身的所有可枚举属性值的数组。

var obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]

// 类数组对象
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']

// 具有随机键顺序的类似数组的对象
var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(an_obj)); // ['b', 'c', 'a']

// getFoo是一个不可枚举的属性
var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
my_obj.foo = 'bar';
console.log(Object.values(my_obj)); // ['bar']

// 非对象参数将被强制为对象
console.log(Object.values('foo')); // ['f', 'o', 'o']

Object.entries

Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环也枚举原型链中的属性）。

语法：【 Object.entries(obj) 】

参数：obj 可以返回其可枚举属性的键值对的对象。

返回值：给定对象自身可枚举属性的键值对数组。

var obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

// 类数组对象
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

// 具有随机键顺序的类似数组的对象
var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(an_obj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]

Object.getOwnPropertyDescriptors

Object.getOwnPropertyDescriptors() 方法用来获取一个对象的所有自身属性的描述符。

语法：【 Object.getOwnPropertyDescriptors(obj) 】

参数：obj 任意对象。

返回值：所指定对象的所有自身属性的描述符，如果没有任何自身属性，则返回空对象。

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

function myFunction(a, b, c,) { // 末尾的逗号
  // 函数体
}

String Padding

string.padStart

padStart()方法用另一个字符串填充当前字符串(重复，如果需要的话)，以便产生的字符串达到给定的长度。填充从当前字符串的开始(左侧)应用的。

语法：【 str.padStart(targetLength [, padString]) 】

参数：targetLength 当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。

padString可选填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。此参数的缺省值为 " "。

返回值：在原字符串开头填充指定的填充字符串直到目标长度所形成的新字符串。

'abc'.padStart(10);         // "       abc"
'abc'.padStart(10, "foo");  // "foofoofabc"
'abc'.padStart(6,"123465"); // "123abc"
'abc'.padStart(8, "0");     // "00000abc"
'abc'.padStart(1);          // "abc"

string.padEnd

padEnd() 方法会用一个字符串填充当前字符串（如果需要的话则重复填充），返回填充后达到指定长度的字符串。从当前字符串的末尾（右侧）开始填充。

语法：【 str.padEnd(targetLength [, padString]) 】

参数：targetLength 当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。

padString可选填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。此参数的缺省值为 " "。

返回值：在原字符串末尾填充指定的填充字符串直到目标长度所形成的新字符串。

'abc'.padEnd(10);          // "abc       "
'abc'.padEnd(10, "foo");   // "abcfoofoof"
'abc'.padEnd(6, "123456"); // "abc123"
'abc'.padEnd(1);           // "abc"

SharedArrayBuffer对象

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

语法：【 new SharedArrayBuffer(length) 】

参数：length所创建的数组缓冲区的大小，以字节(byte)为单位。

返回值：一个大小指定的新 SharedArrayBuffer 对象。其内容被初始化为 0。

Atomics对象

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

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

什么叫“原子性操作”呢？现代编程语言中，一条普通的命令被编译器处理以后，会变成多条机器指令。如果是单线程运行，这是没有问题的；多线程环境并且共享内存时，就会出问题，因为这一组机器指令的运行期间，可能会插入其他线程的指令，从而导致运行结果出错。请看下面的例子。

// 主线程
ia[42] = 314159; // 原先的值 191
ia[37] = 123456; // 原先的值 163
// Worker 线程
console.log(ia[37]);
console.log(ia[42]);
// 可能的结果
// 123456
// 191

上面代码中，主线程的原始顺序是先对 42 号位置赋值，再对 37 号位置赋值。但是，编译器和 CPU 为了优化，可能会改变这两个操作的执行顺序（因为它们之间互不依赖），先对 37 号位置赋值，再对 42 号位置赋值。而执行到一半的时候，Worker 线程可能就会来读取数据，导致打印出123456和191。

上一章：js版本之ES6特性简述【Proxy、Reflect、Iterator、Generator】(五)

下一章：ES9（2018）新增特性（七）