JavaScript - ECMAScript 2021：初学者指南

你好啊，未来的编程巨星！我很高兴能成为你探索ECMAScript 2021世界的向导。作为一名有着多年经验的计算机科学教师，我见证了无数学生从完全的初学者成长为自信的程序员。今天，我们将探索JavaScript的最新特性，我承诺会尽可能让这个过程有趣且易于理解。所以，拿起你最喜欢的饮料，舒服地坐好，让我们开始吧！

ECMAScript 2021是什么？

在我们深入了解新特性之前，让我们快速了解一下ECMAScript是什么。可以把ECMAScript想象成JavaScript的食谱书。每年，那些“厨师”（也就是语言开发者们）都会添加新的“食谱”（特性），让我们的编码生活更加轻松和愉快。ECMAScript 2021，也被称为ES12，就是这本食谱书的最新版。

ECMAScript 2021新增的特性

ECMAScript 2021为我们带来了一些激动人心的新工具。就像得到了一套闪闪发亮的新乐高积木来丰富我们的收藏。让我们一个一个地探索这些新特性。

数字分隔符 (_)

你是否尝试过阅读一个非常长的数字，比如1000000000？这有点头疼，对吧？数字分隔符就是来拯救我们的！

// 不使用数字分隔符
const billion = 1000000000;

// 使用数字分隔符
const billionReadable = 1_000_000_000;

console.log(billion === billionReadable); // 输出：true

在1_000_000_000中的下划线（_）并没有改变这个数字的值。它只是帮助人类更容易地阅读。这难道不酷吗？就像在长句中添加空格，使其更易读。

Promise any() 方法

JavaScript中的Promise就像同时打很多个电话并等待有人接听。Promise.any()方法是处理多个Promise的新方式。

const promise1 = new Promise((resolve, reject) => setTimeout(reject, 100, 'promise1'));
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 200, 'promise2'));
const promise3 = new Promise((resolve, reject) => setTimeout(resolve, 300, 'promise3'));

Promise.any([promise1, promise2, promise3])
.then((value) => console.log(value))
.catch((error) => console.log(error));

// 输出：promise2

在这个例子中，Promise.any()在数组中的任何一个Promise被满足时就会解决。就像一场比赛，我们只关心第一个冲过终点线的人，而不关心第二或第三名是谁。

String replaceAll() 方法

你是否玩过文字替换游戏？replaceAll()方法有点像这样的游戏，但它是针对JavaScript中的字符串。

const sentence = "我喜欢猫。猫是伟大的宠物。";
const newSentence = sentence.replaceAll("猫", "狗");

console.log(newSentence); // 输出："我喜欢狗。狗是伟大的宠物。"

在replaceAll()之前，我们必须使用正则表达式或循环来替换子字符串的所有出现。现在，只需调用一个方法就可以了！

逻辑赋值运算符

ECMAScript 2021引入了三个新的逻辑赋值运算符。这些就像是在JavaScript中编写常见模式时的简写方式。让我们看看每一个：

逻辑与赋值（&&=）运算符

let x = 1;
let y = 2;

x &&= y;

console.log(x); // 输出：2

// 这相当于：
// x && (x = y);

&&=运算符仅在左侧值为真时才赋值右侧的值。就像说：“如果x是真，那么让它等于y。”

逻辑或赋值（||=）运算符

let a = null;
let b = '默认值';

a ||= b;

console.log(a); // 输出："默认值"

// 这相当于：
// a || (a = b);

||=运算符仅在左侧值为假时才赋值右侧的值。这对于设置默认值非常完美！

空值合并赋值（??=）运算符

let foo = null;
let bar = 'baz';

foo ??= bar;

console.log(foo); // 输出："baz"

// 这相当于：
// foo ?? (foo = bar);

??=运算符仅在左侧值为null或undefined时才赋值右侧的值。它与||=类似，但更具体地考虑了“空”的概念。

方法总结

这里有一个我们学过的新方法的小结：

方法	描述	示例
数字分隔符	使大数字更易读	1_000_000_000
Promise.any()	当数组中的任意Promise满足时解决	Promise.any([promise1, promise2, promise3])
String.replaceAll()	替换字符串中的所有子字符串	"hello hello".replaceAll("hello", "hi")
&&=	如果左侧为真则赋值	x &&= y
||=	如果左侧为假则赋值	x \|\|= y
??=	如果左侧为null或undefined则赋值	x ??= y

就这样，各位！我们一起走过了ECMAScript 2021的激动人心的新特性。记住，学习编程的最佳方式是通过实践。所以，我鼓励你们去玩转这些新特性，进行实验，最重要的是，享受乐趣！

就像我以前的编程教授常说的，“编程就像烹饪。一开始你可能会烧焦几道菜，但随着练习，你很快就能创作出杰作！”所以不要害怕犯错误——它们都是学习过程的一部分。

继续编程，保持好奇心，快乐学习！

Credits: Image by storyset