JavaScript - ECMAScript 2020：初学者指南

你好，有抱负的程序开发者们！我很高兴能成为你们在这个激动人心的ECMAScript 2020世界探索之旅的向导。作为一名有着多年经验的计算机科学教师，我见过无数学生在掌握这些概念时眼睛发亮。那么，让我们跳进去，探索ES2020为JavaScript语言带来的精彩特性吧！

ECMAScript 2020新增的特性

ECMAScript 2020，也被称为ES2020，就像是JavaScript开发者手中的一个闪亮的新工具箱。它引入了许多令人兴奋的特性，让我们的编码生活变得更加简单和高效。让我们一起打开这个工具箱，看看里面有什么好东西！

BigInt原始数据类型

想象你在数夜空中的星星。有数十亿颗！过去，JavaScript对数字的大小有限制。但现在，有了BigInt，天空才是极限（双关语）！

BigInt允许我们处理非常大的整数。下面是如何使用它的示例：

const bigNumber = 1234567890123456789012345678901234567890n;
console.log(bigNumber);
// 输出：1234567890123456789012345678901234567890n

const result = bigNumber + 1n;
console.log(result);
// 输出：1234567890123456789012345678901234567891n

在这个例子中，我们在数字的末尾加上'n'来创建一个BigInt。这个'n'告诉JavaScript，“嘿，这是一个BigInt！”我们可以像对普通数字那样对BigInt进行操作，但记住在对任何与BigInt一起使用的数字加上'n'。

空值合并运算符 (??)

你有没有玩过“猜礼物”游戏？你摇晃盒子，如果什么声音都听不到，你就猜测它是空的。空值合并运算符有点像这样，但它是针对代码的！

这个运算符帮助我们检查一个值是否为null或undefined，如果是，我们可以提供一个默认值。下面是如何工作的：

let username = null;
console.log(username ?? "访客");
// 输出："访客"

username = "Alice";
console.log(username ?? "访客");
// 输出："Alice"

在第一个例子中，username是null，所以运算符返回“访客”。在第二个例子中，username有一个值，所以它返回那个值。这就像说，“如果盒子里是空的，我们就假设里面是一个泰迪熊！”

Promise allSettled() 方法

想象你是一名教师（就像我一样！）在等待所有学生完成考试。有些学生可能会成功完成，另一些可能会放弃。Promise.allSettled()就像是在等待每个人交上他们的试卷，不管他们做得好不好。

下面是一个例子：

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];

Promise.allSettled(promises).then((results) => results.forEach((result) => console.log(result.status)));

// 输出：
// "fulfilled"
// "rejected"

在这段代码中，我们有两个promise。一个成功解析，另一个被拒绝。Promise.allSettled()等待它们两个都完成，然后给我们每个promise的状态。

String matchAll() 方法

你有没有玩过“找 Waldo”游戏？matchAll()就像是在文本中玩“找 Waldo”！它帮助我们找到字符串中所有模式的出现。

让我们看看它是如何工作的：

const text = "The cat and the hat sat on the mat.";
const regex = /at/g;
const matches = [...text.matchAll(regex)];

console.log(matches);
// 输出：[
//   ['at', index: 7, input: 'The cat and the hat sat on the mat.', groups: undefined],
//   ['at', index: 19, input: 'The cat and the hat sat on the mat.', groups: undefined],
//   ['at', index: 31, input: 'The cat and the hat sat on the mat.', groups: undefined]
// ]

在这里，我们在文本中搜索“at”的所有出现。matchAll()返回一个迭代器，我们使用扩展运算符(...)将其转换为数组。每个匹配项都告诉我们它在哪里以及在字符串中的位置。

可选链运算符 (?.)

最后但同样重要的是，让我们来谈谈可选链运算符。它就像一个谨慎的探险者，在前进之前仔细检查路径的每一步。

下面是如何工作的：

const user = {
name: "Alice",
address: {
street: "123 Main St"
}
};

console.log(user.address?.street);
// 输出："123 Main St"

console.log(user.phoneNumber?.home);
// 输出：undefined

在这个例子中，我们试图访问可能不存在的属性。可选链运算符允许我们安全地这样做。如果user.address存在，它会尝试访问street。如果user.phoneNumber不存在，它会停止并返回undefined而不是抛出错误。

方法表格

下面是一个我们学到的新方法的便捷表格总结：

方法	描述
BigInt	允许处理大整数
?? (空值合并)	为null或undefined提供默认值
Promise.allSettled()	等待所有promise解决
String.matchAll()	在字符串中查找所有模式的出现
?. (可选链)	安全访问嵌套对象属性

就是这样，朋友们！我们已经探索了ECMAScript 2020的激动人心的新特性。记住，最好的学习方式是实践。所以，打开你的代码编辑器，开始用这些新工具进行实验。快乐编码，愿你的JavaScript之旅充满激情和发现！

Credits: Image by storyset