ECMAScript新特性

2015年6月发布了ES 6，也就是我们今天广泛使用的版本。这之后每年6月发布一个极小更新的ES版本，比如2016年6月发布的 ES 2016 叫做ES 7，而这个版本只增加了两个新特性。截止目前，ES 11的提案已经定稿了。

ES 7 新特性

Array.prototype.includes

includes是一个Array上很有用的方法，用于快速查找数组中是否包含某个元素，包括NaN（和indexOf不一样的点)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

let arr = [1, 2, 3, NaN];

if (arr.includes(2)) {
  //查找2是否存在于arr数组中
  console.log("找到了!"); //>> 找到了！
}
if (!arr.includes(2, 3)) {
  //第二个参数3表示数组下标为3的项，也即第4项开始查找
  console.warn("不存在!"); //>> 不存在！
}

//下面两句说明incluedes和indexOf的区别
console.log(arr.includes(NaN)); //true
console.log(arr.indexOf(NaN) != -1); //false

指数函数用法

JavaScript采用两个星符号**来表示Math.pow，相对于Math.pow的好处：

1. 中缀表示法比函数表示法更简洁，这使它更可取。
2. 方便数学、物理、机器人学等领域的计算。

1
2
3
4
5
6
7
8
9
10

//用法一：x ** y
let squared = 2 ** 2;//等同于: 2 * 2
let cubed = 2 ** 3;//等同于: 2 * 2 * 2

//用法二：x **= y
let a = 2;
a **= 2;//等同于: a = a * a;

let b = 3;
b **= 3;//等同于: b = b * b * b;

ES 8 新特性

Object.values() / Object.entries

• Object.values(obj)，obj 参数是对目标对象的操作，它可以是一个对象或者数组

1
2
3
4
5
6
7
8
9
10

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

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

//当把数字对象的当键的时候，返回的数组以键的值升序排序
const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
Object.values(obj); // ['yyy', 'zzz', 'xxx']
Object.values('es8'); // ['e', 's', '8']

• Object.entries方法返回一个给定对象可枚举属性值的数组[key, value]，与Object.values类似

1
2
3
4
5
6
7
8
9

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']]

字符串追加

在 ES 8 中String新增了两个实例函数String.prototype.padStart和String.prototype.padEnd，允许将空字符串或其他字符串添加到原始字符串的开头或结尾。
String.padStart(targetLength,[padString])
targetLength：当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
padString：(可选)填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断，此参数的缺省值为空格。
String.padEnd(targetLength,padString]) 参数释义同上。

1
2
3
4
5
6
7
8
9
10
11

'es8'.padStart(2);          // 'es8'
'es8'.padStart(5);          // '  es8'
'es8'.padStart(6, '1891');  // '189es8'
'es8'.padStart(14, 'coffe');  // 'coffecoffecoffes8'
'es8'.padStart(7, '0');     // '0000es8'

'es8'.padEnd(2);            // 'es8'
'es8'.padEnd(5);            // 'es8  '
'es8'.padEnd(6, '1891');    // 'es81891'
'es8'.padEnd(14, 'coffe');    // 'es8coffecoffecoff'
'es8'.padEnd(7, '9');       // 'es89999'

Object.getOwnPropertyDescriptors

getOwnPropertyDescriptors方法返回指定对象自己所有的属性内容，并且属性内容只是自身直接定义的，而不是从object的原型继承而来的。
定义是：Object.getOwnPropertyDescriptors(obj)，obj 是指目标对象，这个方法返回的值可能是 configurable、enumerable、writable、get、set 和 value。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

const obj = {
  get es7() { return 7; },
  get es8() { return 8; }
};
Object.getOwnPropertyDescriptors(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
//   }
// }

getOwnPropertyDescriptors可以用来创建子类：

1
2
3
4
5
6
7
8

function superclass() {}
superclass.prototype = {
  // 在这里定义方法和属性
};
function subclass() {}
subclass.prototype = Object.create(superclass.prototype, Object.getOwnPropertyDescriptors({
  // 在这里定义方法和属性
}));

异步函数

Async Functions也就是我们常说的Async/Await,已经用的很频繁了，在此不再赘述。

SharedArrayBuffer & Atomics

SharedArrayBuffer 对象用来表示一个通用的，固定长度的原始二进制数据缓冲区，类似于 ArrayBuffer 对象，它们都可以用来在共享内存（shared memory）上创建视图。与 ArrayBuffer 不同的是，SharedArrayBuffer 不能被分离。

请注意，作为对Spectre的响应，所有主流浏览器均默认于2018年1月5日禁用SharedArrayBuffer。 Chrome在启用了网站隔离功能的平台上的v67中重新启用了该功能，以防止出现Spectre风格的漏洞。

• 语法：

1
2
3
4
5
6

/**
 *
 * @param {*} length 所创建的数组缓冲区的大小，以字节(byte)为单位。
 * @returns {SharedArrayBuffer} 一个大小指定的新 SharedArrayBuffer 对象。其内容被初始化为 0。
 */
new SharedArrayBuffer(length)

共享内存能被同时创建和更新于工作者线程或主线程。依赖于系统（CPU，操作系统，浏览器），变化传递给所有上下文环境需要一段时间。需要通过 atomic 操作来进行同步。

Atomics 对象提供了一组静态方法用来对 SharedArrayBuffer 对象进行原子操作。这些原子操作属于 Atomics 模块。与一般的全局对象不同，Atomics 不是构造函数，因此不能使用 new 操作符调用，也不能将其当作函数直接调用。Atomics 的所有属性和方法都是静态的（与 Math 对象一样）。

多个共享内存的线程能够同时读写同一位置上的数据。原子操作会确保正在读或写的数据的值是符合预期的，即下一个原子操作一定会在上一个原子操作结束后才会开始，其操作过程不会中断。

ES 9 新特性

异步迭代器

在async/await的某些时刻，你可能尝试在同步循环中调用异步函数。例如：

1
2
3
4
5

async function func(array) {
  for (let i of array) {
    await someFunc(i);
  }
}

这段代码不会达到预期目的，下面这段同样也不会：

1
2
3
4
5

async function func(array) {
  array.forEach(async i => {
    await someFunc(i);
  });
}

上面这段代码中，循环本身依旧保持同步，并在内部异步函数之前全部调用完成。

引入异步迭代器后，就像常规迭代器，除了next()方法返回一个Promise。因此await可以和for...of循环一起使用，以串行的方式运行异步操作。

1
2
3
4
5

async function func(array) {
  for await (let i of array) {//异步迭代
    someFunc(i);
  }
}

更多详细论述见“壹.2.12”。

Promise.prototype.finally

一个Promise调用链要么成功到达最后一个.then()，要么失败触发.catch()。在某些情况下，你想要在无论Promise运行成功还是失败，运行相同的代码，例如清除数组、删除对话、关闭数据库连接等，.finally()允许实现这样的目的。

1
2
3
4
5
6
7
8
9
10
11

function func() {
  promiseFunc() //返回一个Promise对象
    .then(() => {})
    .then(() => {})
    .catch(err => {
      console.log(err);
    })
    .finally(() => {
      //无论promiseFunc()运行成功还是失败，这里的代码会被调用到
    });
}

更多详细论述见“壹.2.12”。

重新修订了字面量的转义

ES9 之前，\u表示 unicode 转义，\x表示十六进制转义，\后跟一个数字表示八进制转义，这使得创建特定的字符串变得不可能，例如Windows文件路径C:\uuu\xxx\111。

要取消转义序列的语法限制，可在模板字符串之前使用标记函数String.raw。

1
2
3
4
5

let s = `\u{54}` //会转义成unicode "T"
console.log(s);//>> T

let str = String.raw`\u{54}`; //不会被转义
console.log(str);//>> \u{54}

Rest / Spread 属性

这个就是我们通常所说的三个点...，在=左边的是rest参数，放在=右边或者作为参数的是扩展运算符，这项特性在ES6中已经引入，但是ES6中的作用对象仅限于数组。在ES9中，为对象提供了像数组一样的rest参数和扩展运算符：

1
2
3
4
5
6
7
8
9
10
11
12
13

const obj = {
  a: 1,
  b: 2,
  c: 3
};
const { a, ...param } = obj; //这里...是rest参数
console.log(a); //>> 1
console.log(param); //>> {b: 2, c: 3}

function foo({ a, ...param }) {//这里...是扩展运算符
  console.log(a); //>> 1
  console.log(param); //>> {b: 2, c: 3}
}

正则表达式dotAll模式

正则表达式中点.匹配除回车外的任何单字符，标记s改变这种行为，允许匹配回车换行。

1
2
3
4

/hello.world/.test('hello\nworld');  // false
/hello.world/s.test('hello\nworld'); // true
console.log(/hello.world/s.test(`hello
world`))   //>> true

正则表达式命名捕获组

Javascript正则表达式中使用exec()匹配后，能够返回一个包含匹配字符串的类数组对象。

1
2
3
4
5
6
7
8

const reDate = /(\d{4})-(\d{2})-(\d{2})/,
  match = reDate.exec("2018-08-06");
console.log(match);//>> [2018-08-06, 2018, 08, 06]

//这样就可以直接用索引来获取年月日：
let year = match[1]; //>> 2018
let month = match[2]; //>> 08
let day = match[3]; //>> 06

返回数组的第0项为与正则表达式相匹配的文本，第 1 项是与 reDate 的第 1 个分组\d{4}相匹配的文本（如果有的话），第 2 项是与 reDate 的第 2 个分组\d{2}相匹配的文本（如果有的话），以此类推。正则表达式的组以()包起来。

上面的案例，若是日期格式变成月日年，那么改变正则表达式的结构后，还有可能会改变变量的赋值部分的代码。如下示例：

1
2
3
4
5
6
7
8

const reDate = /(\d{2})-(\d{2})-(\d{4})/,//表达式结构变化了
  match = reDate.exec("08-06-2018");
console.log(match);//>> [08-06-2018, 08, 06, 2018]

//此时年月日的赋值代码也要改了,改的地方真多啊！怎么办？
let year = match[3]; //>> 2018
let month = match[1]; //>> 08
let day = match[2]; //>> 06

可以发现上面的写法改的地方太多了，有没有办法少改点代码省省事呢？有！ ES9 允许使用符号?<name>来命名捕获组（也即“匹配到的组”），示例如下：

1
2
3
4
5
6
7
8
9

const reDate = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/,
  match = reDate.exec("2018-08-06");
console.log(match);
//>> [2018-08-06, 08, 06, 2018, groups: {day: 06, month: 08, year: 2018}]

//此时用groups对象来获取年月日，无论正则表达式怎么变换，这下面三行不用改了，省事！
let year = match.groups.year; //>> 2018
let month = match.groups.month; //>> 08
let day = match.groups.day; //>> 06

命名捕获组的写法相当于是把每个捕获组都定义了一个名字，然后存储到返回值的groups属性中。

正则表达式后行断言

先看看正则表达式先行断言示例：

1
2
3
4
5
6

const re1 = /\D(\d+)/,
    re2 = /\D(?=\d+)/,//"?="是正向先行断言
    match1 = re1.exec("$123.45"),
    match2 = re2.exec("$123.45");
console.log(match1[0]); //>> $123
console.log(match2[0]); //>> $

(?=pattern) 零宽正向先行断言(zero-width positive lookahead assertion)
代表字符串中的一个位置，紧接该位置之后的字符序列能够匹配pattern；

(?!pattern) 零宽负向先行断言(zero-width negative lookahead assertion)
代表字符串中的一个位置，紧接该位置之后的字符序列不能匹配pattern；

(?<=pattern) 零宽正向后行断言(zero-width positive lookbehind assertion)
代表字符串中的一个位置，紧接该位置之前的字符序列能够匹配pattern；

(?<!pattern) 零宽负向后行断言(zero-width negative lookbehind assertion)
代表字符串中的一个位置，紧接该位置之前的字符序列不能匹配pattern。

在ES9中，可以允许使用?<=进行正向后行断言，可以获取货币的价格而忽略货币符号。

1
2
3

const re= /(?<=\D)[\d\.]+/,
    match = re.exec("$123.45");
console.log(match[0]); //>> 123.45

上面的正向后行断言，也就是说\D这个条件必须满足，但\D匹配的字符不会作为结果输出（因为先行/后行断言其实只是匹配了一个位置）。如果是下面这样：

1
2
3
4
5

const re= /(?<=\D)[\d\.]+/,
    match1 = re.exec("123.45"),
    match2 = re.exec("12345");
console.log(match1 && match1[0]); //>> 45
console.log(match2 && match1[0]); //>> null

可以看到match1匹配到的是45,这是由于在.前面没有任何符合\D的匹配内容，它会一直找到符合\D的内容，也就是.然后返回后面的内容。而match2若是没有满足前面肯定反向断言的条件的话，则结果返回null。

正则表达式 Unicode 转义

ES9 之前，在正则表达式中本地访问 Unicode 字符属性是不被允许的。ES9 添加了 Unicode 属性转义，形式为\p{...}和\P{...}，在正则表达式中使用标记 u (unicode) 设置，在\p的{...}内，可用键值对的方式设置需要匹配的属性而非具体内容。

1
2
3

const regex = /\p{Script=Greek}/u;//Greek为希腊语的意思
console.log(regex.test('a')); //>> flase
console.log(regex.test('Σ')); //>> true

ES 10 新特性

可选的 catch 变量绑定

在 ES10 之前，我们必须通过语法为 catch 子句绑定异常变量，无论是否有必要。很多时候 catch 块是多余的，而 ES10 使我们能够简单的把变量省略掉。

1
2
3
4
5

//之前是
try {} catch(e) {}

//ES10之后可以写成，
try {} catch {}//省掉了变量e

JSON超集

什么是 JSON 超集？简单来说就是 JSON 是 ECMAScript 的子集，也就是说让 ECMAScript 兼容 JSON 的内容所支持的全部文本。

ECMAScript 在标准 JSON.parse 部分阐明了 JSON 确为其一个子集，但由于 JSON 的内容可以正常包含 U+2028 行分隔符与 U+2029 段落分隔符，而 ECMAScript 却不行，所以，该草案旨在解决这一问题。在这之前，如果你使用 JSON.parse() 执行带如上特殊字符的字符串时，只会收到 SyntaxError 的错误提示。该草案同样是向后兼容的，其对用户唯一的影响是保持原样，即在暂不支持特殊字符解析的运行环境中保持报错 SyntaxError 。

Symbol 对象的 description 属性

ES10 中为 Symbol 对象添加了只读属性 description ，该对象返回包含 Symbol 描述的字符串。在创建Symbol时向其添加description (描述)，能够直接访问description ，对调试是很有用的。

1
2
3
4
5
6
7
8
9
10
11
12

let sym = Symbol('foo');//添加的描述内容为“foo”
console.log(sym.description);//>> foo

sym = Symbol();
console.log(sym.description);//>> undefined

//和 Symbol() 不同的是，用 Symbol.for() 方法创建的的 symbol 会被放入一个全局
//symbol 注册表中。Symbol.for() 并不是每次都会创建一个新的 symbol，它会首先检
//查给定的 key 是否已经在注册表中了。假如是，则会直接返回上次存储的那个。否则，它
//会再新建一个。
sym = Symbol.for('bar');
console.log(sym.description);//>> bar

修订Function.prototype.toString

函数原型上的方法toString()现在返回精确字符，包括空格和注释。

1
2
3
4
5
6
7
8
9
10
11
12

function /* comment */ foo /* another comment */() {}

//ES10之前不会打印注释部分
console.log(foo.toString()); //>> function foo(){}

//ES10里，会把注释一同打印
console.log(foo.toString()); //>> function /* comment */ foo /* another comment */ (){}

//注意：
//箭头函数是个例外
const bar /* comment */ = /* another comment */ () => {};
console.log(bar.toString()); //>> () => {}

Object.fromEntries

在 JavaScript 操作中，数据在各种数据结构之间的转换都是很容易的，比如 Map 到数组、Map 到 Set、对象到 Map 等等。

1
2
3
4
5
6
7
8

let map = new Map().set('foo', true).set('bar', false);
let arr = Array.from(map);
let set = new Set(map.values());

let obj = { foo: true, bar: false };
//下一句 Object.entries() 方法返回给定对象 obj 自身可枚举属性的键值对数组,
//形如：[["foo",true],["bar",false]]
let newMap = new Map(Object.entries(obj));

但是如果我们需要将一个键值对列表转换为对象，就要写点费劲的代码了。

1
2
3
4
5
6

let map = new Map().set("foo", true).set("bar", false);
let obj = Array.from(map).reduce((acc, [key, val]) => {
  return Object.assign(acc, {
    [key]: val
  });
}, {});

该特性的目的在于为对象添加一个新的静态方法 Object.fromEntries，用于将符合键值对的列表（例如 Map、数组等）转换为一个对象。上一块的代码中的转换逻辑，现在我们只需要一行代码即可搞定。

1
2

const map = new Map().set("foo", true).set("bar", false);
let obj = Object.fromEntries(map);

更加友好的 JSON.stringify

ES10 之前，当你使用 JSON.stringify() 处理无法用 UTF-8 编码表示的字符时（U+D800 至 U+DFFF），返回的结果会是一个乱码 Unicode 字符“�”。该特性提出用JSON.stringify()来安全的表示这些不正常的UTF-8字符。

1
2
3
4
5
6
7
8
9
10
11
12

let r;
r = JSON.stringify("❤"); //正常的UTF-8字符原样输出
console.log(r); //>> "❤"

r = JSON.stringify('\u2764'); //正常的UTF-8字符编码，输出解码之后的模样
console.log(r); //>> "❤"

r = JSON.stringify("\uDF06\uD834"); //不正常的UTF-8字符编码，则以unicode形式输出
console.log(r); //>> "\udf06\ud834"

r = JSON.stringify("\uDEAD"); //不正常的UTF-8字符编码，则以unicode形式输出
console.log(r); //>> "\udead"

String.prototype.{trimStart,trimEnd}

新增了String的trimStart()方法和trimEnd()方法，这两个方法很好理解，分别去除字符串首、尾的空白字符，就不举例占篇幅了。

Array.prototype.{flat,flatMap}

这个特性新创造了两个方法，其中：

• Array.prototype.flat 数组的所有项会以指定的维度降维（扁平化），然后组成新数组返回；
• Array.prototype.flatMap 首先会执行一次map()方法，然后再通过类似flat()方法扁平化数组。它等同于执行完 map() 后再执行一次 flat() 方法，所以当你执行 map() 返回的结果如果是个数组，然后又要将其扁平化时，这个方法会显得方便。

来看几个例子解释一下，首先 flat() 方法支持多维数组的扁平化，其中Infinity可以将多维数组压扁成一维数组。

1
2
3
4
5
6
7
8
9

let r;
r = ["1", ["8", ["9", ["1"]]]].flat();//4维数组，默认降维1，变成3维数组
console.log(r); //>> [ '1', '8', [ '9', ['1'] ] ]

r = ["1", ["8", ["9", ["1"]]]].flat(2); //4维数组，降维2，变成2维数组
console.log(r); //>> [ '1', '8', '9', ['1'] ]

r = ["1", ["8", ["9", ["1"]]]].flat(Infinity);//4维数组，最多变成1维数组
console.log(r); //>> [ '1', '8', '9', '1' ]

接着来看看flatMap()

1
2
3
4
5
6

let r;
r = ["I love", "coffe 1891"].map(item => item.split(" "));
console.log(r); //>> [ [ 'I', 'love' ], [ 'coffe', '1891' ] ]

r = ["I love", "coffe 1891"].flatMap(item => item.split(" "));
console.log(r); //>>[ 'I', 'love', 'coffe', '1891' ]

ES 11 新特性一览

String.prototype.matchAll

matchAll() 方法返回一个包含所有匹配正则表达式及分组捕获结果的迭代器（iterator）。 在 matchAll 出现之前，通过在循环中调用Regexp.exec来获取所有匹配项信息（Regexp需使用/g标志）：

1
2
3
4
5
6
7
8

const regexp = RegExp('foo*','g');
const str = 'coffe football, foosball';

while ((matches = regexp.exec(str)) !== null) {
  console.log(`找到 ${matches[0]}，下一轮循环从位置 ${regexp.lastIndex} 开始`);
  //>> 找到 foo，下一轮循环从位置 9 开始
  //>> 找到 foo，下一轮循环从位置 19 开始
}

如果使用matchAll ，就可以不必使用while循环加exec方式（且正则表达式需使用/g标志）。使用matchAll 会得到一个迭代器的返回值，配合 for...of，array spread，Array.from() 可以更方便实现功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

const regexp = RegExp('foo*','g');
const str = 'coffe football, foosball';
let matches = str.matchAll(regexp);

for (const match of matches) {
  console.log(match);
}
//>> [ "foo" ]
//>> [ "foo" ]

//注意：
//matches的迭代器在for..of之后已经被消耗掉了，
//需要再次调用matchAll创建一个新的迭代器
matches = str.matchAll(regexp);

let arr = Array.from(matches, m => m[0]);
console.log(arr);
//>> [ "foo", "foo" ]

import()函数

这个特性为JavaScript添加了一个类函数（function-like）的import()功能，以便可以像函数传参那样传入参数实现动态（没错，import是静态引用的）引用模块（module）。下面有个单页应用简单示例，演示了用import()开启懒加载。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE html>
<nav>
  <a href="books.html" data-entry-module="books">书籍</a>
  <a href="movies.html" data-entry-module="movies">电影</a>
  <a href="video-games.html" data-entry-module="video-games">电视游戏</a>
</nav>

<main>内容将会加载到这里！</main>

<script>
  const main = document.querySelector("main");
  for (const link of document.querySelectorAll("nav > a")) {
    link.addEventListener("click", e => {
      e.preventDefault();

      import(`./section-modules/${link.dataset.entryModule}.js`)//动态引用
        .then(module => {//加载模块成功以后，该模块会当作then方法的参数
          module.loadPageInto(main);
        })
        .catch(err => {//捕捉异常
          main.textContent = err.message;
        });
    });
  }
</script>

请注意import()和import的区别：

• import() 可以用在script脚本区，不止是模块内；
• 如果在模块内使用import()，它可以在任何地方任何级别执行，而不是被提升到顶级（优先执行）；
• import() 是运行时执行，也即什么时候运行到这句，就会加载参数指定的模块；参数也可以是动态可变的，不止是静态参数；
• import() 不建立可静态分析的依赖关系（静态分析的情况下可以做很多优化），但是，在一些比较简单的情况下，比如import（“/foo.js”）中，实现仍然可以执行静态分析优化。

如果模块采用default的形式对外暴露接口，则可用default属性直接获得。

1
2
3
4

import('./module.js')
.then(module => {
  console.log(module.default);//直接通过default属性获得模块暴露的接口
});

Promise.allSettled

为什么要有Promise.allSettled()？

举例说明，比如各位用户在页面上面同时填了3个独立的表单，这三个表单分三个接口提交到后端，三个接口独立，没有顺序依赖，这个时候我们需要等到请求全部完成后给与用户提示表单提交的情况。

在多个promise同时进行时咱们很快会想到使用Promise.all来进行包装，但是由于Promise.all的一票否决的特性，三个提交中若前面任意一个提交失败，则后面的表单也不会进行提交了，这就与咱们需求不符合。

Promise.allSettled跟Promise.all类似，其参数接受一个Promise的数组，返回一个新的Promise，唯一的不同在于，其没有一票否决的特性，也就是说当Promise全部处理完成后我们可以拿到每个Promise的状态，而不管其是否处理成功。

1
2
3
4
5
6

Promise.allSettled([Promise.resolve("coffe"), Promise.reject("1891")]).then(
  arr => {
    console.log(arr); //>> [ { status: "fulfilled", value: "coffe"},
                      //>>   { status: "rejected", reason: "1891" } ]
  }
);

本篇结语

很显然ECMAScript接下来会持续不断地更新，按TC39的计划是每年都会发一个新版本。虽然节奏很快，但是我们完全没必要担心跟不上节奏。除了ES6这个史无前例的版本带来了超大量的新特性外，之后每年发的版本都仅仅带有少量的增量更新，你只需要花45分钟就能搞明白这一年更新的特性。保持一颗好奇的心，你会不断进步，变得更强！

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：http://blog.kobingo.xyz/javascript-ECMAScript%E7%89%B9%E6%80%A7%E5%88%86%E6%9E%90/