ECMAScript规范第8版(ES2017)已发布，新功能一览

最新推荐文章于 2024-10-15 08:36:02 发布

XK-Frank

最新推荐文章于 2024-10-15 08:36:02 发布

阅读量1.5k

点赞数

分类专栏： es8

本文链接：https://blog.csdn.net/fuohua/article/details/86524887

版权

es8 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这里写图片描述

EcmaScript 8或EcmaScript 2017在6月底由TC39正式发布。去年，似乎我们在谈论EcmaScript。这不是什么目前的标准是每年发布一个新的ES规范版本一次。 ES6于2015年发布，ES7于2016年发布，但ES5发布后却有人记得吗？这是发生在2009年，在JavaScript的神奇的兴起之前。

所以我们将JavaScript的开发变化作为稳定的语言，现在我们需要将ES8输入到我们的词典中。

如果你是一个强大的人，深吸一口气，阅读规范的网页或PDF版本。对于其他的，在本文中，我们将通过代码示例来介绍ES8的主要新功能。

字符串填充

此部分将两个函数添加到String对象：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）

这里写图片描述

Object.values 和 Object.entries

Object.values方法以与for in循环所提供的顺序相同的顺序返回给定对象自己的枚举属性值的数组。功能的声明是微不足道的：

Object.values(obj)

obj参数是操作的源对象。它可以是一个对象或数组（这是一个索引像[10，20，30] - > {0：10，1：20，2：30}）的对象。

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.entries方法以与Object.values相同的顺序返回给定对象自己的可枚举属性[key，value]对的数组。功能的声明是微不足道的：

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）

这里写图片描述

Object.getOwnPropertyDescriptors

getOwnPropertyDescriptors方法返回指定对象的所有属性描述符。自己的属性描述符是直接在对象上定义的，不会从对象的原型继承。功能的声明是：

Object.getOwnPropertyDescriptors(obj)

obj是源对象。返回的描述符对象结果的可能键可配置，可枚举，可写，获取，设置和值。

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）

这里写图片描述

功能参数列表和调用中的逗号

函数参数中的后跟逗号是编译器在列表末尾添加不必要的逗号时不会引发错误（SyntaxError）的能力：

function es8(var1, var2, var3,) {
  // ...
}

作为函数声明，这可以应用于函数的调用：

es8(10, 20, 30,);

此功能的灵感来源于对象文字和数组文字[10，20，30，]和{x：1，}中的逗号后面。

异步功能

异步函数声明定义了一个异步函数，它返回一个AsyncFunction对象。在内部，异步函数的工作方式与生成器非常相似，但它们不会转换为生成器函数。

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

函数的调用将会导致在2秒之后打印 Hello, es8

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

输出将会变成：

1 // immediately
2 // immediately
Hello, es8 // after 2 seconds

这是因为异步函数不会阻塞程序的继续执行。

注意一个异步函数总是返回一个promise，一个await关键字可能只能在标有async关键字的函数中使用。

浏览器支持情况（MDN）

这里写图片描述

共享内存和原子

共享存储器时，多个线程可以在内存中读取和写入相同的数据。原子操作确保可预测的值被写入和读取，在下一个操作开始之前完成操作，并且操作不被中断。本节介绍一个新的构造函数SharedArrayBuffer和一个具有静态方法的命名空间对象Atomics。

Atomic对象是像Math这样的静态方法的对象，所以我们不能用它作为构造函数。此对象中静态方法的示例有：

add / sub — 添加/减去特定位置的值的值
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是真棒。
而对于7的返回值将是→ES 7是好的。

但是对于包含\ u或\ x子字符串的模板有一个限制。 ES9将处理这个逸出的问题。在MDN网站或TC39文档中了解更多信息。

浏览器支持情况（MDN）

这里写图片描述