ECMAScript 2017（ES8）特性概述

Ecma 国际公布了第八版的 ECMAScript 语言规范 ECMAScript 2017(或 ES8)。ECMAScript 是标准化的 JavaScript 语言，1997 年发布了第一版，1998 年和 1999 年发布了第二和第三个版本，之后沉寂了许多年，直到 Ajax 流行起来后标准工作才再次起步，2009 年发布了第五个版本，自 2015 年起每年发布一个版本。ECMAScript 2017 的主要变化包括：Object.values/Object.entries、字符串填充、Object.getOwnPropertyDescriptor、尾随逗号、异步函数、共享内存和原子等，具体版本可以点击这里。

1. Object.values/Object.entries

格式	返回值
Object.entries（value：any）	Array <[key，value]>
Object.values（value：any）	Array < value >

1.1 Object.entries

对象是键值对的数据结构，每个键值对都是entry。
Object.entries(x)强制转换x为对象，并以数组的方式返回其可枚举的自定义字符串：

Object.entries（{foo：1，bar：2}）  
//结果：[['foo'，1]，['bar'，2]]

1.2 Object.values

与Object.entries非常相似，Object.values返回一个数组，其值为可枚举的字符串键值属性：

 Object.values（{foo：1，bar：2}）  
 //结果:[1，2]

2. 字符串填充

ES8 中添加了内置的字符串填充函数，分别为 padStart 与 padEnd，函数的声明如下：

函数声明	解释
str.padStart(targetLength [, padString])	向str字符串首部填充字符串padString, 使字符串的整体长度变成targetLength
str.padEnd(targetLength [, padString])	向str字符串尾部填充字符串padString，使其整体的长度变成targetLength

注：填充的字符串可以不写，不写的默认用空格填充；如果目标长度小于字符串长度，会忽略设置的长度。

例子：

`es8`.padStart(2);	‘es8’
`es8`.padStart(5);	‘es8’
`es8`.padStart(6, ‘woof’);	‘wooes8’
`es8`.padStart(14, ‘wow’);	‘wowwowwowwoes8’
`es8`.padStart(7, ‘0’);	‘0000es8’

`es8`.padEnd(2);	‘es8’
`es8`.padEnd(5);	‘es8 ‘
`es8`.padEnd(6, ‘woof’);	‘es8woo’
`es8`.padEnd(14, ‘wow’);	‘es8wowwowwowwo’
`es8`.padEnd(7, ‘6’);	‘es86666’

3. 对象的属性描述符获取

getOwnPropertyDescriptors 函数会返回指定对象的某个指定属性的描述符；该属性必须是对象自己定义而不是继承自原型链，函数的声明为：

Object.getOwnPropertyDescriptor(obj, prop)

obj 即为源对象，而 prop 即为需要查看的属性名；结果中包含的键可能有 configurable、enumerable、writable、get、set 以及 value。

4. 尾随逗号

该函数结尾逗号的建议是一个纯粹的语法更新的规范。在此规范更改之前，不允许在最后一个函数参数后面加上逗号，如下所示：

const trailCommaFn = function(  
  param1,  
  param2,  
  param3,  
  param4) { // No comma allowed here!  
// do something in function body  
}

ES2017带来了结尾逗号：

const trailCommaFn = function(  
  param1,  
  param2,  
  param3,  
  param4, // Comma allowed here!  
) {  
// do something in function body  
}

这种语法更新使得函数中的逗号与规范的其余部分更加一致。在数组和对象文字中使用后缀逗号已经很普遍，现在我们可以使用相同的行为来进行函数列表和调用。

扫描二维码关注公众号，回复： 3459719 查看本文章

// Array  
const arr = [  
  1,  
  2,  
  3, // <--- Ok  
];// Object Literal   

const obj = {  
  x: 'foo',  
  y: 'bar',  
  z: 'baz', // <--- Ok  
}

另外，这个规格更改是git友好的，因为开发人员不再需要编辑2行代码，以便为功能列表或调用添加1个参数。即使在最后一个参数之后，现在也可以使用逗号。

5. 异步函数

用Promises处理Async函数的一种普遍流程如下所示：

function fetchData(url) {  
  return fetch(url)  
    .then(request => request.text())  
    .then(text => {  
      return JSON.parse(text);  
     })  
    .catch(err => {  
      console.log(`Error: ${err.stack}`);  
    });  
}

使用ES2017中的新增async和await关键字，我们可以利用全新的语法来实现完全同步读取。我们可以使用try / catch blocks和新的关键字来为特定功能分配异步行为。在内部，Async功能与生成器的功能相同，但是却不能转换为Generator Functions。可以使用以下的方式编写ES2017中的Async函数：

async function fetchData(url) {  
  try {  
   let request = await fetch(url);  
   let text = await request.text();  
   return JSON.parse(text);  
  }  
  catch (err) {  
    console.log(`Error: ${err.stack}`);  
  }  
}

异步函数声明

asyncfunction fooBar( ) { }

异步函数表达式

constfooBar = async function ( ) { };

异步方法定义

letobj = { async fooBar( ) { } }

异步箭头函数

constfooBar = async ( ) => { };

例子：

function fetchTextByPromise() {
  return new Promise(resolve => { 
    setTimeout(() => { 
      resolve("es8");
    }, 2000);
  });
}
async function sayHello() { 
  const externalFetchedText = await fetchTextByPromise();
  console.log(`Hello, ${externalFetchedText}`); 
}
sayHello();

console.log(1);
sayHello();
console.log(2);

结果:
1                 // immediately
2                 // immediately
Hello, es8     // after 2 seconds

6. 共享内存和原子

共享内存允许多个线程并发读写数据，而原子操作则能够进行并发控制，确保多个存在竞争关系的线程顺序执行。介绍了新的构造器 SharedArrayBuffer 与包含静态方法的命名空间对象 Atomics。Atomic 对象类似于 Math，我们无法直接创建其实例，而只能使用其提供的静态方法：

add /sub - 增加或者减去某个位置的某个值
and / or /xor - 进行位操作
load - 获取值

参考文献：
https://segmentfault.com/a/1190000010156802
http://blog.csdn.net/qq_39163118/article/details/75634291