[译] 是的，ES2017 （ES8）来了

• 原文地址：ES8 was Released and here are its Main New Features 🔥
• 原文做者：Dor Moshe
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：Jason Cheng
• 校对者：

本文主要讲解 ES8 ( ES2017 )新增的功能、特性

ES8 或者说是 ES2017 已经在今年6月底的时候被 TC39 正式发布。彷佛咱们在最近的一年里就已经谈论了不少有关 ECMA 的事情。如今的 ES 标准每一年发布一次。咱们都知道 ES6 是在2015年发布的，ES7 是在2016年发布的，可是估计会有不多数人知道 ES5 是在什么时候发布的。答案是2009年，是在 JavaScript 逐渐变的流行以前发布的。

JavaScript，做为一门处于高速发展期的开发语言，正在变的愈来愈完善、稳定。咱们必须拥抱这些变化，而且咱们须要把ES8加入到咱们的技术栈中。

若是您想对 ES8 作一个深刻、完全的了解，您能够查阅Web 资源或者PDF 资源。其余的读者，您能够直接查阅本文，由于本文将涵盖 ES8 主要的新特性，而且会附上代码示例。

---

字符串填充

在 String 对象中，ES8 增长了两个新的函数： padStart 和 padEnd 。正如其名，这俩函数的做用就是在字符串的头部和尾部增长新的字符串，而且返回一个具备指定长度的新的字符串。你可使用指定的字符、字符串或者使用函数提供的默认值－空格来填充源字符串。具体的函数申明以下：

str.padStart(targetLength [, padString])

str.padEnd(targetLength [, padString])复制代码

正如你所看到的，这俩函数的第一个参数（必输）是 targetLength ，这个参数指的是设定这俩函数最后返回的字符串的长度。第二个参数 padString 是可选参数，表明你想要填充的内容，默认值是空格。具体代码示例以下：

'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'复制代码

目前浏览器的支持状况以下（信息来自 MDN ）：

---

values和entries函数

在 Object 中，ES8 也新增了两个新的函数，分别是 Object.values 函数和 Object.entries 函数。Object.values 函数将会返回一个数组，该数组的内容是函数参数（一个对象）可遍历属性的属性值。数组中获得的属性值的顺序与你在对参数对象使用 for in 语句时获取到的属性值的顺序一致。函数声明以下：

Object.values(obj)复制代码

参数 obj 就是源对象，它能够是一个对象或者一个数组（由于数组能够看做是数组下标为 key ，数组元素为 value 的特殊对象）。具体的代码示例以下：

const obj = { x: 'xxx', y: 1 };
Object.values(obj); // ['xxx', 1]

const obj = ['e', 's', '8']; // same as { 0: 'e', 1: 's', 2: '8' };
Object.values(obj); // ['e', 's', '8']

// when we use numeric keys, the values returned in a numerical 
// order according to the keys
const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
Object.values(obj); // ['yyy', 'zzz', 'xxx']
Object.values('es8'); // ['e', 's', '8']复制代码

目前浏览器对于 Object.values 函数的支持状况以下（信息来自 MDN ）：

介绍完 Object.values 函数，接下来继续介绍 Object.entries 函数。 Object.entries 函数与 Object.values 函数相似，也是返回一个数组，只不过这个数组是一个以源对象（参数）的可枚举属性的键值对为数组 [key, value] 的 n 行 2 列的数组。它的返回顺序与 Object.values 函数相似。它的函数声明以下：

Object.entries(obj)复制代码

示例代码以下：

const obj = { x: 'xxx', y: 1 };
Object.entries(obj); // [['x', 'xxx'], ['y', 1]]

const obj = ['e', 's', '8'];
Object.entries(obj); // [['0', 'e'], ['1', 's'], ['2', '8']]

const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
Object.entries(obj); // [['1', 'yyy'], ['3', 'zzz'], ['10': 'xxx']]
Object.entries('es8'); // [['0', 'e'], ['1', 's'], ['2', '8']]复制代码

目前浏览器对于 Object.entries 函数的支持状况以下（信息来自 MDN ）：

---

getOwnPropertyDescriptors函数

Object 中还有一个新成员，那就是 Object.getOwnPropertyDescriptors 函数。该函数返回指定对象（参数）的全部自身属性描述符。所谓自身属性描述符就是在对象自身内定义，不是经过原型链继承来的属性。函数声明以下：

Object.getOwnPropertyDescriptors(obj)复制代码

obj 参数即为源对象，该函数返回的每一个描述符对象可能会有的 key 值分别是：configurable、enumerable、writable、get、set和value。示例代码以下：

const obj = { 
  get es7() { return 777; },
  get es8() { return 888; }
};
Object.getOwnPropertyDescriptor(obj);
// {
// es7: {
// configurable: true,
// enumerable: true,
// get: function es7(){}, //the getter function
// set: undefined
// },
// es8: {
// configurable: true,
// enumerable: true,
// get: function es8(){}, //the getter function
// set: undefined
// }
// }复制代码

描述符数据很是重要，尤为是在装饰器上。该函数的浏览器支持状况以下（信息来自 MDN ）：

---

结尾逗号

此处结尾逗号指的是在函数参数列表中最后一个参数以后的逗号以及函数调用时最后一个参数以后的逗号。ES8 容许在函数定义或者函数调用时，最后一个参数以后存在一个结尾逗号而不报 SyntaxError 的错误。示例代码以下：

函数声明时

function es8(var1, var2, var3,) {
  // ...
}复制代码

函数调用时

es8(10, 20, 30,);复制代码

ES8的这项新特性受启发于对象或者数组中最后一项内容以后的逗号，如 [10, 20, 30,] 和 { x: 1, } 。

---

异步函数

由 async 关键字定义的函数声明定义了一个能够异步执行的函数，它返回一个 AsyncFunction 类型的对象。异步函数的内在运行机制和 Generator 函数很是相似，可是不能转化为 Generator 函数。

ps: 不理解 Generator 函数的读者能够参考阮一峰大师的ES6入门中关于Generator函数的讲解

示例代码以下：

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

上述代码中， sayHello 函数的调用将会致使在2秒以后打印 Hello, es8 。继续来看一段代码：

console.log(1);
sayHello();
console.log(2);复制代码

输出将会变成：

1 // immediately
2 // immediately
Hello, es8 // after 2 seconds复制代码

之因此会打印上述内容，那是由于异步函数不会阻塞程序的继续执行。

译者注：

此处打个小广告，若是有读者对于 JavaScript 的异步机制还有不明白的地方，能够参考本人的一篇博客javascript异步机制，里面是本人关于异步机制的一点拙见,相信会对您有一点启发。欢迎指正与交流！

异步函数的浏览器支持状况以下（信息来自 MDN ）：

---

共享内存与原子操做

当内存被共享时，多个线程能够并发读、写内存中相同的数据。原子操做能够确保那些被读、写的值都是可预期的，即新的事务是在旧的事务结束以后启动的，旧的事务在结束以前并不会被中断。这部分主要介绍了 ES8 中新的构造函数 SharedArrayBuffer 以及拥有许多静态方法的命名空间对象 Atomic 。

Atomic 对象相似于 Math 对象，拥有许多静态方法，因此咱们不能把它当作构造函数。 Atomic 对象有以下经常使用的静态方法：

• add /sub - 为某个指定的value值在某个特定的位置增长或者减去某个值
• and / or /xor - 进行位操做
• load - 获取特定位置的值

该部分的浏览器兼容状况以下（信息来自 MDN ）：

---

取消模版字符串限制（ ES9 ）

使用 ES6 中规定的模版字符串，咱们能够作以下事情：

const esth = 8;
helper`ES ${esth} is `;
function helper(strs, ...keys) {
  const str1 = strs[0]; // ES
  const str2 = strs[1]; // is
  let additionalPart = '';
  if (keys[0] == 8) { // 8
    additionalPart = 'awesome';
  }
  else {
    additionalPart = 'good';
  }

  return `${str1} ${keys[0]} ${str2} ${additionalPart}.`;
}复制代码

上述代码的返回值将会是 ES 8 is awesome 。若是 esth 是 7 的话，那么返回值将会是 ES 7 is good 。这样作彻底没有问题，很酷！可是咱们在使用模版字符串的时候，有一个限制，那就是不能使用相似于 \u 或者 \x 的子字符串， ES9 正在处理这个问题。详情请查阅MDN或者TC39文档。模板字符串修正(非模板字符串)的浏览器兼容状况以下（信息来自 MDN ）:

---

结语

JavaScript 正处于高速发展中，时常会被更新。咱们必须准备好接受、拥抱 JavaScript 的新特性。最后，上述这些特性被 TC39 委员会所确认以及被一些核心开发人员所实现。甚至许多新特性如今已经成为了 TypeScript、浏览器以及一些语法糖的一部分，因此咱们如今就能够尝试使用它们，积极拥抱新特性。

最后，你能够在Medium或者Twitter上来关注我，进而查看更多有关 JavaScript 和 Angular 的文章。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、React、前端、后端、产品、设计 等领域，想要查看更多优质译文请持续关注 掘金翻译计划。