ECMAScript 2017（ES8）新特性

ECMAScript 2017（ES8）新特性：

  • 函数参数列表结尾允许 , （逗号）。
  • 异步函数： async 、 await 。
  • 对象函数： Object.values() 、 Object.entries() 。
  • 字符串填充： String.prototype.padStart() 、 String.prototype.padEnd() 。
  • 列出对象所有属性的描述对象集合： Object.getOwnPropertyDescriptors() 。
  • 二进制数据缓冲区： ShareArrayBuffer 和 Atomics 对象，用于从共享内存位置读取和写入。


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

function foo(param1,param2,) {}
foo('abc','def',);


异步函数：async、await

如果某个方法的返回值是一个 Promise 实例对象，我们可以在它的调用的方法名前加 await ，最后这个方法返回值就不是 Promise 对象，而是一个具体的值，但是在调用这个方法的外部函数需要加上 async 。 

async getData(){
    const res = await api.getTableData();
    // do something    
}


Object.values()、Object.entries()

ES5 引入了 Object.keys() 方法，返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历属性的键名。ES8 引入了跟 Object.keys() 配套的 Object.values() 和 Object.entries() ，作为遍历一个对象的补充手段，供 for…of 循环使用。

  • Object.keys( obj ) ：返回一个包含该对象所有的键的数组。
  • Object.values( obj ) ：返回一个包含该对象所有的值的数组。
  • Object.entries( obj ) ：返回一个包含该对象所有[key, value]键值对的数组。

Object.values( obj ) 方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历属性的键值。 

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

const obj = { 100: 'a', 2: 'b', 7: 'c' };
Object.values(obj) // ["b", "c", "a"]
// 注意：如果属性名为数值的属性，是按照数值大小，从小到大遍历的，因此返回的顺序是 b、c、a。

Object.entries( obj ) 方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历属性的键值对数组。 

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

const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
Object.entries(obj); // [['1', 'yyy'], ['3', 'zzz'], ['10': 'xxx']]


String.prototype.padStart()、String.prototype.padEnd()

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

String.padStart(targetLength,padStringh)
String.padEnd(targetLength,padStringh)
  • targetLength ：必填。当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
  • padStringh ：可选。默认值 "" （空字符串）。填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。 
'x'.padStart(5, 'ab') // 'ababx'

'hello'.paddingStart(10);  // '          hello';
'hello'.paddingEnd(10);  //  'hello          ';

有时候我们处理日期、金额的时候经常要格式化，这个特性就派上用场： 

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"


Object.getOwnPropertyDescriptors()

  • ES5 的 Object.getOwnPropertyDescriptor() ：返回某个对象属性的描述对象（descriptor）。所谓属性的描述就是指这个属性是否可写，是否可以数之类。
  • ES8 的 Object.getOwnPropertyDescriptors() ：返回指定对象所有自身属性（非继承属性）的描述对象集合。如果没有任何自身属性，则返回空对象。 
const obj = {[Symbol('foo')]: 123, get bar() { return 'abc' },};
console.log(Object.getOwnPropertyDescriptors(obj));
/*
{
    [Symbol('foo')]:{ 
      value: 123,
      writable: true,
      enumerable: true,
      configurable: true
    },
    bar:{
      get: [Function: bar],
      et: undefined,
      enumerable: true,
      configurable: true 
    } 
}
*/

虽然在 ES6 中，Obj 已经引入了一个 Object.assign() 方法用来拷贝 properties，但只能拷贝具有默认属性值的属性。对于那些具有非默认属性值的属性 getters, setters, non-writable properties来说， Object.assign() 是不能拷贝的。这个时候就需要使用 Object.getOwnPropertyDescriptors()方法。 

const target2 = {};
//属性copy
Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
console.log(Object.getOwnPropertyDescriptor(target2, 'foo'));
/*
{ 
    get: undefined,
    set: [Function: foo],
    enumerable: true,
    configurable: true
}
*/


SharedArrayBuffer、Atomics

SharedArrayBuffer 对象用来表示一个通用的，固定长度的原始二进制数据缓冲区。 

// 语法：new SharedArrayBuffer(length)
// 参数：length指所创建的数组缓冲区的大小，以字节(byte)为单位。
// 返回值：一个大小指定的新 SharedArrayBuffer 对象。其内容被初始化为 0。
// 注意：需要new运算符构造
// 创建一个1024字节的缓冲

let sab = new SharedArrayBuffer(1024);


/**
 * 
 * @param {*} length 所创建的数组缓冲区的大小，以字节(byte)为单位。  
 * @returns {SharedArrayBuffer} 一个大小指定的新 SharedArrayBuffer 对象。其内容被初始化为 0。
 */

new SharedArrayBuffer(10)


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

这些原子操作属于 Atomics 模块。与一般的全局对象不同， Atomics 不是构造函数，因此不能使用 new 操作符调用，也不能将其当作函数直接调用。 Atomics 的所有属性和方法都是静态的（与 Math 对象一样）。多个共享内存的线程能够同时读写同一位置上的数据。原子操作会确保正在读或写的数据的值是符合预期的，即下一个原子操作一定会在上一个原子操作结束后才会开始，其操作过程不会中断。

上篇： ECMAScript 2016（ES7）新特性

下篇： ECMAScript 2018（ES9）新特性