es8 部分新标准

ES8 或者说是 ES2017 已经在今年6月底的时候被 TC39 正式发布。

字符串填充

在 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 ）：

Paste_Image.png

values和entries函数

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

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 ）：

Paste_Image.png

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

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 ）：

Paste_Image.png

getOwnPropertyDescriptors函数

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

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
//   }
// }

Paste_Image.png

结尾逗号

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

function es8(var1, var2, var3,) {
  // ...
}
es8(10, 20, 30,);

异步函数

由 async 关键字定义的函数声明定义了一个可以异步执行的函数，它返回一个 AsyncFunction 类型的对象。异步函数的内在运行机制和 Generator 函数非常类似，但是不能转化为 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();

Paste_Image.png