ECMAScript语言规范的第8个版本发布(ES2017)。来看看怎么使用它们。

Object.values() / Object.entries()

在ES6前，如果我们想拿一个对象的所有值放在数组中，可能得这么写：

var object = {a: 1, b: 2, c: 3};
var array = [];
for (var key in object) {
  if (object.hasOwnProperty(key)) {
    array.push(object[key]);
  }
}
array;  // [1, 2, 3]

现在，通过 Object.values() 可以便捷的取出来：

const object = {a: 1, b: 2, c: 3};
Object.values(object);  // [1, 2, 3]

Object.entries() 则是 Object.keys() 和 Object.entries() 的结合形式，返回一个 key value 键值对的数组。

const object = {a: 1, b: 2, c: 3};
Object.entries(object);  // [['a', 1], ['b', 2], ['c', 3]]

Object.entries() 获得的数组可用于ES6带来的 Map 结构：

const object = {a: 1, b: 2, c: 3};
const map = new Map(Object.entries(object));  // Map(3) {"a" => 1, "b" => 2, "c" => 3}

String.prototype.padStart() / String.prototype.padEnd()

这两个函数的作用是在头尾添加字符串，它们接收两个参数 str.padStart(targetLength [, padString])，其中 targetLength 表示填充完的字符串长度，padString 表示填充的字符串，默认空格

'es8'.padStart(4);          // ' es8'，默认填入空格
'es8'.padEnd(4, '0');       // 'es80'，填充自定义字符串
'es8'.padStart(2);          // 'es8'，如果长度小于原字符串，返回原字符串
'es8'.padStart(6, 'abcd');  // 'abces8'，如果填充字符串+原字符串长度大于给定长度，则从填充字符串左边开始截取
'es8'.padEnd(6, 'abcd');    // 'es8abc'，padEnd也是从填充字符串左边开始截取
'es8'.padStart(7, 'abc');   // 'abcaes8'，如果填充字符串+原字符串长度小于给定长度，则从填充字符串重复填充

Object.getOwnPropertyDescriptors

该函数返回指定对象（参数）的所有自身属性描述符。自身属性描述符就是在对象自身内定义，不是通过原型链继承来的属性。该函数返回的每个描述符对象可能会有的 key 值分别是：configurable、enumerable、writable、get、set 和 value。

const object = { 
  a: 1,
  get b() { return 2; }
};

Object.getOwnPropertyDescriptors(object);
// {
//   a: {
//     configurable: true,
//     enumerable: true,
//     value: 1,
//     writable: true
//   },
//   b: {
//     configurable: true,
//     enumerable: true,
//     get: f b(), //the getter function
//     set: undefined
//   }
// }

函数参数列表和调用中的尾逗号

ES8允许在函数定义或者函数调用时，最后一个参数之后存在一个结尾逗号而不报SyntaxError的错误。

function foo(a, b, c,) {
  // doSomething
}

foo(1, 2, 3,);

这种情况常见于多行参数风格，

foo(
  1,
  2,
  3,
);

现在再也不会因为增加参数忘了删除逗号而导出报错了。

async/await 异步函数

async 关键字定义的函数声明定义了一个可以异步执行的函数，它返回一个 Async Function 类型的对象。

async function add10 (num) {
  return num + 10;
}
add10; // async ƒ add10 (num) {return num + 10;}

它的返回值是一个 Promise 实例：

add10(10); // Promise {: 20}

await 放置在 Promise 调用之前，await 强制后面点代码等待，直到 Promise 对象resolve，得到 resolve 的值作为await表达式的运算结果。且 await 只能在 async 函数内部使用。

async function foo() {
  let num = await add10(10);
  console.log(num);  // 20
  return num + 10;
}

foo();  // Promise {: 30}

如果想获得 Promise 的 catch 情况，我们可以通过 try...catch 来解决。

function throwError() {
  return Promise.reject(new Error('error'));
}

async function foo() {
  try {
    await throwError(10);
  } catch(e) {
    console.log(e);  // Error: error
  }
  return true;
}

foo();  // Promise {: true}

参考资料

What’s new in ES2017

合集

ES2021(ES12)新特性解读
ES2020(ES11)带来的新特性
ES2019(ES10)带来的9个新特性
ES2018(ES9)新特性
ES2017(ES8)新特性
ES2016(ES7)新特性

ES2017(ES8)新特性