阿里云优惠活动，点击链接进行购买: 一年仅需96.9元即可以购买服务器~
腾讯云优惠活动, 点击链接进行购买一年仅需99元
腾讯云限时开团活动, 点击链接进行购买一年仅需95元
# ES2021 我学不动了，这次只学 3 个。
秋小风： 秋裤，你最近在干哈呢？
秋裤： 最近在看 ES2021 呢。
秋小风： 这才 2020 年，你学啥呢，学不动了。
秋裤：你的 2020 进度 ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░ 84%
秋小风：
秋小风: 那你说一说呗，都学了些啥？还有，能不能说简单一点，我怕我学不动。
秋裤：目前已经确定的有 5 个新特性，为了能让你更好地记住，我特定挑了 3 个我觉得比较有意思的和你讲讲吧。
秋小风: 好好好，最喜欢用最少的时间学最有用的东西了！
秋裤: 第一个是逻辑赋值操作符
你有遇到过这样的情况吗？
function example(a) {
// Default `a` to "foo"
if (!a) {
a = "foo";
}
// or
a = a || "foo";
}
某些初始化的时候需要一些冗长的逻辑代码
function example(opts) {
// Ok, but could trigger setter.
opts.foo = opts.foo ?? "bar";
// No setter, but 'feels wrong' to write.
opts.baz ?? (opts.baz = "qux");
}
example({ foo: "foo" });
秋小风: 你别说，还真有，有时候写多了，我还有点头晕。
秋裤：你别打断我，我这是一个自问自答模式，你不用回答。
秋小风:
秋裤： 刚才讲到哪里来着，哦，代码不够整洁。激动人心的时候到了，现在有了新的特性，就是以后可以用新的方式来写了。
function example(opts) {
// 旧的方式
if (!a) {
a = "foo";
}
// or
a = a || "foo";
// 新的方式
a ||= "foo";
}
example({ foo: "foo" });
function example(opts) {
// 旧的方式
opts.foo = opts.foo ?? "bar";
// 新的方式
opts.foo ??= "bar";
// 旧的方式
opts.baz ?? (opts.baz = "qux");
// 新的方式
opts.baz ??= "qux";
}
example({ foo: "foo" });
秋裤：看着是不是比之间简洁了很多，有没有觉得这个模式感觉很熟悉？
秋裤: emm，这个真是个疑问句，配合一下。
秋裤
秋小风: 得了！对！逻辑运算符中常用的嘛。以前也有。往下看。
a = a + b;
a += b;
a = a - b;
a -= b;
秋裤：对的，这一次加入了 3 个 ||、&& 、?? ，用法还是和以前一样，是不是很简单？
秋小风: 嗯，没有新的使用成本，不错！有点意思，继续讲。
秋裤： 接下来这个可厉害了，是 Promise.any
Promise.any。 从字面意思来看，相信聪明的你应该能大致猜出这个 API 的作用。Promise.any 接受一个 Promise 的数组。当其中任何一个 Promise 完成（fullfill）时，就返回那个已经有完成值的 Promise。如果所有的 Promise 都拒绝（reject），则返回一个拒绝的 Promise，该 Promise 的返回值是一个 AggregateError 对象。
Promise.any(promises).then(
(first) => {
// 任意一个Promise完成了
},
(error) => {
// 所有Promise都被拒绝了
}
);
秋小风: 这个有什么具体的场景吗？
秋裤：给一个官方的例子，最简单的就是测试哪个站点的速度最快。
Promise.any([
fetch("https://v8.dev/").then(() => "home"),
fetch("https://v8.dev/blog").then(() => "blog"),
fetch("https://v8.dev/docs").then(() => "docs"),
])
.then((first) => {
// Any of the promises was fulfilled.
console.log(first);
// → 'home'
})
.catch((error) => {
// All of the promises were rejected.
console.log(error);
});
例如一些播放平台，可以通过这个来测试当前延迟最低的线路是哪个，优先切换到对应的最快的线路。
秋小风:
秋小风: 好东西，有一个问题，这个和Promise.all好像呀
秋裤：没错，我们可以把这两个一起记忆， 我们可以把 Promise.any 理解成 Promise.all 的相反操作。下面我通过 Promise.all 来降级模拟promise.any 来加深记忆。
秋小风:
秋裤：你别这种眼神看着我，我又不是不讲。
来，亮出祖传降级代码
function reverse(promise) {
return new Promise((resolve, reject) =>
Promise.resolve(promise).then(reject, resolve)
);
}
function promiseAny(iterable) {
return reverse(Promise.all([...iterable].map(reverse)));
}
// https://github.com/m0ppers/promise-any/blob/master/index.js
实现很简单，通过一个反转函数，利用 Promisea.all 的特性，只要一个Promise 被拒绝了，就进入到reject，因此反转resolve 和 reject就能模拟出 Promise.any 了。
秋小风: 我想想....秒啊 !将 Promise.all的 reject当做是Promise.any的 resolve ，最后一个呢？
秋裤: 先考你一个问题，1000000000 这是多少？
秋小风: 10 亿
秋裤: 100,000,000 这个呢
秋小风: 1 亿
秋裤： 你觉得有什么差别吗？
秋小风: 有，黑夜给了我黑色的眼睛，你却让我瞎了眼。
秋裤：正经点。
秋小风: 第一个没有,间隔标识，太难读懂了。
秋裤：接下来要讲的新特性就是数字分隔符，有了这个特性，你黑色的眼睛就可以去寻找光明了。
let fee = 1000000000;
let fee = 1_000_000_000;
这个模式不仅在十进制可以用，二进制，十六进制....甚至 BigInt，都可以使用。
// Binary Literals
let nibbles = 0b1010_0001_1000_0101;
// Hex Literal
let message = 0xa0_b0_c0;
// BigInt Literal
const max = 2n ** (64n - 1n) - 1n;
console.log(max === 9_223_372_036_854_775_807n);
以上特性均在最新版 chrome 支持，快打开控制台玩耍吧。
如果想要在实际项目中使用，请使用以下两个插件。