ECMAScript 2021：最终版功能集的激动人心变化

2024-02-21 07:09:59

在技术领域，创新的步伐永不停歇，新的标准和功能不断涌现。在JavaScript的世界里，ECMAScript 2021即将成为一个重要的里程碑。今天，我们将深入探讨其最终功能集，了解这些改变将如何影响JavaScript开发人员的日常工作和项目创建。

1. 可选链操作符 (Optional Chaining Operator)

可选链操作符（?.）是一个语法糖，它可以帮助JavaScript开发者安全地访问嵌套对象的属性。使用它，开发者可以避免使用传统的if语句来检查属性是否存在，从而简化代码并提高可读性。

const user = {
  name: "John",
  address: {
    street: "123 Main Street",
  },
};

console.log(user.address?.street); // "123 Main Street"
console.log(user.address?.city); // undefined

2. 空值合并操作符 (Nullish Coalescing Operator)

空值合并操作符（??）允许JavaScript开发者在两个表达式之间进行比较，并返回第一个非空值。它可以取代传统的if-else语句，简化代码并提高可读性。

const name = username ?? "Guest";

console.log(name); // "John" (if username is defined)
console.log(name); // "Guest" (if username is undefined or null)

3. 数字分隔符 (Numeric Separators)

数字分隔符（）允许JavaScript开发者在数字字面上添加下划线（）来提高可读性，而不会改变数字的值。

const bigNumber = 123_456_789;

console.log(bigNumber); // 123456789

4.BigInt

BigInt是JavaScript中的一种新的数字类型，用于表示比Number类型所能表示的最大值更大的整数。BigInt使用BigInt()函数创建，后跟一个整数，可以是十进制、十六进制或八进制。

const bigInt = BigInt("123456789012345678901234567890");

console.log(bigInt); // 123456789012345678901234567890n

5. Promise.any() 和 Promise.allSettled()

Promise.any() 和 Promise.allSettled() 两个新方法可以帮助JavaScript开发者更好地处理异步任务。Promise.any() 允许开发者等待一组Promise中的任何一个完成，而Promise.allSettled() 允许开发者等待一组Promise全部完成，无论它们是成功还是失败。

const promises = [
  Promise.resolve(1),
  Promise.reject(2),
  Promise.resolve(3),
];

Promise.any(promises)
  .then((value) => {
    console.log(value); // 1
  })
  .catch((error) => {
    console.log(error); // 2
  });

Promise.allSettled(promises)
  .then((results) => {
    console.log(results); // [{ status: "fulfilled", value: 1 }, { status: "rejected", reason: 2 }, { status: "fulfilled", value: 3 }]
  });

6. RegExp Match Indices

JavaScript正则表达式现在支持matchIndices属性，该属性提供了正则表达式匹配的索引。

const regex = /g/g;
const str = "gggggg";

const matches = str.match(regex);

for (const match of matches) {
  console.log(match, match.index);
}

7. 私有类字段和方法

JavaScript现在支持私有类字段和方法，允许开发者创建真正的封装类，从而提高代码的可读性和安全性。

class Person {
  #name;
  #age;

  constructor(name, age) {
    this.#name = name;
    this.#age = age;
  }

  getName() {
    return this.#name;
  }

  getAge() {
    return this.#age;
  }
}

8. 类静态块

JavaScript现在支持类静态块，允许开发者在类实例化之前执行代码，通常用于初始化静态字段。

class Person {
  static {
    console.log("Static block executed");
  }

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

9. 全局This

JavaScript现在允许开发者显式地访问全局this对象。

const globalThis = globalThis;

console.log(globalThis); // [object global]

10. 弱引用

JavaScript现在支持弱引用，允许开发者创建不会阻止对象被垃圾回收的引用。

const obj = { foo: "bar" };
const weakRef = new WeakRef(obj);

console.log(weakRef.deref()); // { foo: "bar" }

delete obj;

console.log(weakRef.deref()); // null