ES2017重点总结

1.async/await

1. async 就是 Generator 函数的语法糖。async函数将 Generator 函数的星号（*）替换成async，将yield替换成await。
2. Generator 函数的返回值是 Iterator 对象，而async函数的返回值是 Promise 对象。（async 函数显式返回的不是 Promise 的话，会自动包装成 Promise 对象）
3. await 不可以脱离 async 单独使用。
4. 一旦遇到await，会等到异步操作完成，再接着执行函数体内后面的语句。
5. await命令后面的 Promise 对象如果变为reject状态，则reject的参数会被catch方法的回调函数接收到。并且任何一个await语句后面的 Promise 对象变为reject状态，那么整个async函数都会中断执行。即如果await后面的异步操作出错，那么等同于async函数返回的 Promise 对象被reject。

中断执行：

async function f() {
  await Promise.reject('err');
  await Promise.resolve('hello world'); // 不会执行
}

f()
.then(v => console.log(v))
.catch(e => console.log(e))

处理await的错误：

async function f() {
  try {
    await new Promise(function (resolve, reject) {
      throw new Error('出错了');
    });
  } catch(e) {
  }
  return await('hello world');
}

2.Object.values和Object.entries

ES5 引入了Object.keys,ES2017 引入了跟Object.keys配套的Object.values和Object.entries，作为遍历一个对象的补充手段，供for…of循环使用。

Object.values

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

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

Object.entries

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

const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

3.padStart()和padEnd()

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。

语法

str.padStart(targetLength [, padString])
padStart() 方法用另一个字符串填充当前字符串(如果需要的话，会重复多次)，以便产生的字符串达到给定的长度。从当前字符串的左侧开始填充。

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

targetLength

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

padString【可选】

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

应用举例

1.处理日期等格式

before:

for (let i = 1; i < 31; i++) {
  if (i < 10) {
    console.log(`0${i}`)
  } else {
    console.log(i)
  }
}

after:

for (let i = 1; i < 31; i++) {
  console.log(i.toString().padStart(2, '0'))
}

2.格式化输出

const data = {
  wangxiaoming: '88',
  lilei: '98',
  hanmeimei: '90'
}

Object.entries(data).map(([name, grade]) => {
  console.log(`姓名: ${name.padEnd(16)} 成绩: ${grade}`)
})

4.Object.getOwnPropertyDescriptors()

ES5 的Object.getOwnPropertyDescriptor()方法会返回某个对象属性的描述对象（descriptor）。

ES2017 引入了Object.getOwnPropertyDescriptors()方法，返回指定对象所有自身属性（非继承属性）的描述对象。

属性描述符

value [属性的值]
writable [属性的值是否可被改变]
enumerable [属性的值是否可被枚举(即能否被iterator遍历)]
configurable [描述符本身是否可被修改，属性是否可被删除]

const obj = {
  foo: 123,
  get bar() { return 'abc' }
};
Object.getOwnPropertyDescriptor(obj, 'foo')
// {value: 123, writable: true, enumerable: true, configurable: true}

Object.getOwnPropertyDescriptors(obj)

// { foo:
//    { value: 123,
//      writable: true,
//      enumerable: true,
//      configurable: true },
//   bar:
//    { get: [Function: get bar],
//      set: undefined,
//      enumerable: true,
//      configurable: true } }

补充知识点：存取描述符

对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。
数据描述符是一个具有值的属性，该值可以是可写的，也可以是不可写的。
存取描述符是由 getter 函数和 setter 函数所描述的属性。一个描述符只能是这两者其中之一；不能同时是两者。