ES2020
matchAll 匹配所有
字符串的新方法，可以通过正则表达式来查找字符串中的所有匹配项。
想象你有一篇文章，想找出所有包含某个特定单词的地方。matchAll 就像是帮你在文章中找到所有这样的地方
const text = 'Hello world, hello universe'; const regex = /hello/gi; for (const match of text.matchAll(regex)) { console.log(match); }
模块新特性
- import 动态导入
动态导入意思是当你需要该模块时才会进行加载，返回的是一个 Promise 对象。只有在 ES Modules 模块规范下才支持。
// index-a.mjs export default { hello () { console.log(`hello JavaScript`); } } // index-b.mjs import('./index-a.mjs').then(module { module.default.hello(); // hello JavaScript })
- import.meta
import.meta 指当前模块的元数据。一个广泛支持的属性是 import.meta.url，以字符串形式输出当前模块的文件路径。
Bigint
BigInt 是一种新的数据类型，用于表示大整数，超出了 JavaScript 中常见的数值范围。
想象你要表示一个非常大的数字，比如宇宙的年龄。BigInt 就像是一个特别大的数字框，可以容纳更多的数字。
const bigNumber = 1234567890123456789012345678901234567890n; console.log(bigNumber);
Promise.allSettled
这是 Promise 的一个新方法，可以等待多个 Promise 都完成（无论成功还是失败）后再继续。
const promises = [ Promise.resolve('Success!'), Promise.reject('Error!') ]; Promise.allSettled(promises) .then(results => console.log(results));
全局对象
JavaScript 可以运行在不同的环境，浏览器为 window、Node.js 为 global。为了能够统一全局环境变量，引入了 globalThis。
window === globalThis // 浏览器环境 global === globalThis // Node.js 环境
for-in 机制
这是对 for-in 循环的更新，用于更好地遍历对象的可枚举属性。
想象你要看一个箱子里有什么东西，但有些东西可能隐藏得很深。for-in 机制就像是帮你把箱子里所有东西都拿出来看一遍。
const obj = { a: 1, b: 2, c: 3 }; for (const key in obj) { console.log(key, obj[key]); }
可选链
这是一个新的语法，用于在访问对象的属性时，避免因为属性不存在而导致错误。
const person = { name: 'Alice', contact: { phone: '123-456-7890' } }; const phoneNumber = person?.contact?.phone; console.log(phoneNumber); // 输出: '123-456-7890'
空值合并
这是一种新的语法，用于给变量赋值时，如果变量的值为 null 或 undefined，就使用默认值。
想象你要吃冰淇淋，但是不知道哪种口味有，所以你要确保有一种口味可以选。空值合并就像是在选择口味时，如果没有你喜欢的，就选择默认的口味。
const favoriteIceCream = null; const iceCreamChoice = favoriteIceCream ?? 'Vanilla'; console.log(iceCreamChoice); // 输出: 'Vanilla'
ES2021
String.prototype.replaceAll
字符串的一个新方法，用于替换所有匹配的子字符串。
想象你在纸上写了一句话，但是有一些词你想换成其他词。replaceAll 就像是帮你把所有要换的词都换掉。
const originalText = 'Hello world, hello universe'; const newText = originalText.replaceAll('hello', 'hi'); console.log(newText); // 输出: 'Hi world, hi universe'
Promise.any
Promise.any 是 Promise 的一个新方法，用于在一组 Promise 中，只要有一个成功就返回，不必等待所有 Promise 都结束。
const promises = [ Promise.reject('Error 1'), Promise.resolve('Success!'), Promise.reject('Error 2') ]; Promise.any(promises) .then(result => console.log(result)) .catch(errors => console.error(errors));
数字分隔符
分隔符是一种在数字中插入下划线，以便更易读的语法。
const largeNumber = 1_000_000; console.log(largeNumber); // 输出: 1000000
逻辑赋值运算符
结合了逻辑运算符 &&、||、?? 和逻辑表达式 =。
// "Or Or Equals" (or, the Mallet operator :wink:) a ||= b; // a || (a = b); // "And And Equals" a &&= b; // a && (a = b); // "QQ Equals" a ??= b; // a ?? (a = b);
WeakRefs
WeakRefs 是一种新的对象引用类型，用于创建对对象的弱引用，不会影响对象的垃圾回收。
想象你有一个备忘录，但是只在你需要的时候才能看到。WeakRefs 就像是对对象的一种轻量级引用，不会让对象被保持得太久。
const obj = { data: 'Some data' }; const weakRef = new WeakRef(obj); // 只有当 obj 还存在时，weakRef 才能获取到它 const retrievedObj = weakRef.deref(); console.log(retrievedObj?.data); // 输出: 'Some data'
ES2022
类私有属性
这是 JavaScript 中类的一个新特性，允许在类内部声明私有属性，仅在类的内部可访问。
想象你有一本笔记本，里面有些笔记是只有你能看到的。类私有属性就像是在类里面写下一些只有类自己能看到的东西。
class Person { #name = 'Alice'; // 私有属性 sayHello() { console.log(`Hello, my name is ${this.#name}`); } } const person = new Person(); person.sayHello(); // 输出: 'Hello, my name is Alice' console.log(person.#name); // 无法访问私有属性
私有字段检查
一种新的访问控制，允许类的私有属性在外部被访问时触发特定的操作。
想象你的门上装有警报，如果有人试图进入你的房间，会发出声音。私有字段检查就像是在访问私有属性时触发警报。
class BankAccount { #balance = 1000; // 私有属性 #checkAccess() { console.log('Access to balance checked'); } get balance() { this.#checkAccess(); return this.#balance; } } const account = new BankAccount(); console.log(account.balance); // 输出: 'Access to balance checked' 和账户余额
顶层 await
允许在模块顶层使用 await。
想象你在工作，需要等一份文件完成才能继续。顶层 await 就像是你在等这份文件，但不需要停下其他的工作。
// 在模块顶层使用 await const data = await fetchData(); console.log(data);
.at 方法返回指定索引的元素
想象你有一个大盒子，里面有很多东西。.at 方法就像是帮你从盒子中取出特定位置的东西。
const arr = [1, 2, 3, 4, 5]; console.log(arr.at(2)); // 输出: 3 const text = 'Hello'; console.log(text.at(1)); // 输出: 'e'
Object.hasOwn()
一个全局函数，用于检查对象是否具有指定的自有属性。
想象你有一张名单，上面写着一些名字。Object.hasOwn() 就像是帮你查看名单上是否有某个名字。
const person = { name: 'Alice' }; console.log(Object.hasOwn(person, 'name')); // 输出: true console.log(Object.hasOwn(person, 'age')); // 输出: false
异常链
一种更好地处理异常信息的方式，允许你在异常中包含更多信息。
想象你有一串蛋糕，但其中一个蛋糕有问题。异常链就像是在蛋糕上贴上标签，告诉你哪个蛋糕有问题，以及为什么有问题。
try { // 一些可能出错的代码 } catch (error) { const detailedError = new Error('详细错误信息'); detailedError.originalError = error; throw detailedError; }
类静态块
类的一个新特性，允许在类内部定义一块在类被初始化时执行的代码。
想象你在搭建一个房子，房子刚建好时，你想做一些特定的准备工作。类静态块就像是在房子刚建好时，执行一些初始化工作。
class MyClass { static { console.log('类初始化中...'); } constructor() { console.log('实例化对象'); } } const obj = new MyClass();
ES2023
Array 支持从尾部查找
新增两个方法： .findLast()、.findLastIndex() 从数组的最后一个元素开始查找，可以同 find()、findIndex() 做一个对比。
想象你有一条长长的队伍，人们站成一列。你可以从前面开始数，也可以从后面开始数。数组支持从尾部查找就像是你从队伍尾部开始数人。
const arr = [{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }]; // find vs findLast console.log(arr.find(n n.value % 2 === 1)); // { value: 1 } console.log(arr.findLast(n n.value % 2 === 1)); // { value: 3 } // findIndex vs findLastIndex console.log(arr.findIndex(n n.value % 2 === 1)); // 0 console.log(arr.findLastIndex(n n.value % 2 === 1)); // 2
Hashbang 语法
Hashbang 语法是一种在 URL 中使用 #! 符号，用于标记 Web 应用中的前端路由。
想象你有一本书，但书中有很多章节。你可以用不同的书签快速翻到你想读的章节。Hashbang 语法就像是在 URL 中放了一个特殊的书签，让你能迅速定位到网页的某个部分。
// URL 中的 Hashbang https://example.com/#!/page1 https://example.com/#!/page2
