ECMAScript2018（es9）新特性

发表于 更新于 分类于

ECMAScript2018（es9）新特性

...扩展运算符

之前es5中的...只能应用于数组，在es9中，开始可以应用于对象了。

在之前，如果需要得到一个对象的浅拷贝。

或者需要重新计算对象的某些属性来替换原来的值，可能需要一个一个字段地去赋值。

而现在只需要使用...，问题就可以简单化。

1
2
3
4
const a = { val: 1, age: 22 };
const b = { name: "Dedicatus545", val: 2 };
const c = { ...a, ...b }; // 合并两个对象，写在后面的如果和前面有相同的属性会覆盖掉，在这里b的val就会覆盖a的val
// c = {val: 2, age: 22, name: 'Dedicatus545'}

上面这种就是展开一个对象。

之前如果需要从对象中提取某些属性时组合成新对象时，一般都是通过直接定义变量来保存，在丢到新对象里面

1
2
3
4
5
6
7
8
9
10
11
12
function fn(a, b) {
  var s1 = a.s1;
  var s2 = a.s2;
  var s3 = b.s3;
  var s4 = b.s4;
  return {
    s1: s1,
    s2: s2,
    s3: s3,
    s4: s4,
  };
}

现在可以以更简单的方式进行编写。

1
2
3
4
5
6
7
8
9
10
function fn(a, b) {
  var { s1, s2 } = a;
  var { s3, s4 } = b;
  return {
    s1,
    s2,
    s3,
    s4,
  };
}

在{}内直接写明将要提取的属性名即可，当然如果不想要以原来的名字的话，还可以进行改变。

1
2
3
4
5
6
7
8
9
10
function fn(a, b) {
  var { s1: a, s2: b } = a;
  var { s3, s4 } = b;
  return {
    a,
    b,
    s3,
    s4,
  };
}

上面这种 var {s3, s4} = b 也就是解构一个对象。

和 es5 的数组 ... 非常相似，可以说是把数组那一套给搬到了对象上来。

Promise.prototype.finally

扩展了es5的Promise对象的方法。

finally可以在Promise被解决或者被拒绝的情况下都进行回调。

1
2
3
4
5
6
7
8
9
10
11
12
13
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("zZZZZ~~"); // 解决promise
  }, 1000);
});

promise.finally(() => {
  console.log("finally 1");
}); // 输出

promise.finally(() => {
  console.log("finally 2");
}); // 输出

上面两个finally的回调在resolve之后都会被执行。

而当被拒绝同样也执行finally。

1
2
3
4
5
6
7
8
9
10
11
12
13
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("zZZZZ~~"); // 拒绝promise
  }, 1000);
});

promise.finally(() => {
  console.log("finally 1");
}); // 输出

promise.finally(() => {
  console.log("finally 2");
}); // 输出

finally在某些情况下非常的方便。

比如现在在一个承诺中占据了某些资源，当然我们希望不管成功then或者失败catch都要把资源进行释放。

在没有finally时可能就要在then和catch都要写这一段代码。

而现在有了finally，代码就变得非常的清晰了。

for await...of异步迭代器

异步的队列以同步的写法来编写，看起来更加的符合逻辑。

每次循环都得等到当前Promise变成resolved。

1
2
3
4
5
6
7
8
9
10
11
async function fn() {
  const promises = [
    new Promise((resolve, reject) => setTimeout(() => resolve(3000), 3000)),
    new Promise((resolve, reject) => setTimeout(() => resolve(1000), 1000)),
  ];
  for await (res of promises) {
    console.log(res);
  }
}

fn(); // 输出 3000 1000

注意for await只能写在异步函数中，本质也是一个语法糖。

后记

es9的话我个人感觉也是扩展实用的方法和特性来是写代码更加的方便。

除了上面说过的，es9还有几个新的特性。

  • 正则的扩展（后行断言，后行否定断言）；
  • 字符串的扩展。