每个开发人员都应该了解的 JavaScript 新功能

JavaScript 总是在不断发展，每个新版本都会引入一些功能，让我们作为开发人员的生活变得更加轻松。其中一些功能改变了游戏规则，改善了我们编写和管理代码的方式。如果您是一名日常编码人员，那么及时了解这些新功能非常重要。在这篇文章中，我将引导您了解一些非常有用且应该包含在您的工具包中的最新 JavaScript 功能。

1. 可选链接 (?.)

最近版本的 JavaScript 中添加的最有用的功能之一是可选链。这使我们能够安全地访问对象中深层嵌套的属性，而不必担心中间属性是否为 null 或未定义。

例子：

假设您有一个用户对象，该对象可能有也可能没有个人资料：

code const user = { profile: { name: "John" } };
console.log(user.profile?.name);  // John
console.log(user.profile?.age);   // undefined

如果没有可选链接，您将必须手动检查每个属性，这可能会使代码变得混乱。这个小运算符帮助我们避免这些检查，使代码更干净、更易于阅读。

2. 空合并运算符 (??)

空值合并运算符 (??) 是另一个巧妙的功能，旨在帮助处理 null 或未定义的值，而不影响 0 或 false 等其他虚假值。

例子

let userName = '';
let defaultName = 'Guest';

console.log(userName ?? defaultName);  // 'Guest' because userName is an empty string

与逻辑 OR (||) 不同，它将空字符串 ("") 或 0 视为假值，??仅当左侧操作数为 null 或未定义时才返回右侧操作数。

3.Promise.allSettled()

如果您在 JavaScript 中使用 Promise，您可能使用过 Promise.all()。但您知道有一个更强大的版本，称为 Promise.allSettled() 吗？此方法等待所有承诺都得到解决，无论它们是被履行还是被拒绝。当您需要知道所有 Promise 的结果时（即使有些 Promise 失败了），它非常方便。

例子：

const p1 = Promise.resolve(3);
const p2 = Promise.reject('Error');
const p3 = Promise.resolve(5);

Promise.allSettled([p1, p2, p3])
  .then(results => {
    console.log(results);
  });
Output:

[
  { status: "fulfilled", value: 3 },
  { status: "rejected", reason: "Error" },
  { status: "fulfilled", value: 5 }
]

当您不希望一次失败破坏整个过程时，这是处理多个异步操作的好方法。

4. 用于大数的 BigInt

我们都面临过超出 JavaScript Number 类型限制的问题。 JavaScript 数字仅限于 -(2^53 - 1) 和 (2^53 - 1) 之间的值。如果您需要处理比这更大的数字，BigInt 是您的朋友。

例子：

const largeNumber = BigInt(1234567890123456789012345678901234567890);
console.log(largeNumber);

这将使您能够处理任意大的整数，而不必担心精度错误。

5. String.prototype.replaceAll()

如果您曾经尝试替换字符串中所有出现的子字符串，您可能会使用正则表达式和replace() 方法。使用replaceAll()，就简单多了。此方法会替换所有出现的子字符串，并且您不必担心全局正则表达式标志。

例子：

code const user = { profile: { name: "John" } };
console.log(user.profile?.name);  // John
console.log(user.profile?.age);   // undefined

它简单、干净，并且不需要正则表达式。

6. 逻辑赋值运算符（&&=、||=、??=）

这些新运算符提供了将逻辑运算符与赋值结合起来的快捷方式。它们是编写更简洁代码的好方法。

• &&=：仅当左侧值为真时才赋值。
• ||=：仅当左侧值为假时才赋值。
• ??=：仅当左侧值为 null 或未定义时才赋值。

例子：

let userName = '';
let defaultName = 'Guest';

console.log(userName ?? defaultName);  // 'Guest' because userName is an empty string

这些快捷方式可以帮助您减少代码的冗长。

7.Object.fromEntries()

如果您需要将键值对列表转换为对象，Object.fromEntries() 可以轻松实现。当您使用 Map 对象或元组数组时，它特别有用。

例子：

const p1 = Promise.resolve(3);
const p2 = Promise.reject('Error');
const p3 = Promise.resolve(5);

Promise.allSettled([p1, p2, p3])
  .then(results => {
    console.log(results);
  });
Output:

[
  { status: "fulfilled", value: 3 },
  { status: "rejected", reason: "Error" },
  { status: "fulfilled", value: 5 }
]

此方法是手动构造对象的更清晰、更易读的替代方法。

8. Array.prototype.flatMap()

该方法是 map() 和 flat() 的组合。它允许您在一个步骤中映射和展平结果，这在处理数组的数组时非常有用。

例子：

const largeNumber = BigInt(1234567890123456789012345678901234567890);
console.log(largeNumber);

这比分别执行 map() 和 flat() 更干净。

9. Array.prototype.at()

这种新方法可以轻松地使用负索引访问数组末尾的元素。这比手动计算最后一项的索引要直观得多。

例子：

let message = 'Hello World, Welcome to the World!';
let updatedMessage = message.replaceAll('World', 'Universe');
console.log(updatedMessage);  // Hello Universe, Welcome to the Universe!

它简化了数组中最后一项的处理。

10. 顶级等待

在 JavaScript 中，我们总是必须在异步函数中使用 wait。但有了顶级的await，你现在可以直接在模块的顶层使用await，让你的异步代码更加简单。

例子：

let count = 0;
count ||= 10;  // count is now 10, because it was falsy
console.log(count);  // 10
let name = null;
name ??= 'Anonymous';  // name is now 'Anonymous'
console.log(name);  // Anonymous

这使得在现代 JavaScript 中使用异步代码变得更加简单。

11. 私有类字段

如果您曾经想在 JavaScript 类中将变量设为私有，现在可以使用私有类字段。现在，您可以使用 # 符号定义无法从类外部访问的变量。

例子：

code const user = { profile: { name: "John" } };
console.log(user.profile?.name);  // John
console.log(user.profile?.age);   // undefined

12. 稳定排序（Array.prototype.sort()）

以前，JavaScript 的 sort() 方法并不稳定，这意味着相同的项可能会以不可预测的方式进行洗牌。现在，JavaScript 可确保具有相同值的元素保留其在数组中的原始顺序。

例子：

let userName = '';
let defaultName = 'Guest';

console.log(userName ?? defaultName);  // 'Guest' because userName is an empty string

这确保了行为更加可预测且一致。

结论

JavaScript 不断发展，这些特性为开发者带来了便利和力量。无论您是使用异步代码、处理大量数字，还是只是清理对象和数组操作，这些新功能都可以帮助您编写更干净、更高效的代码。如果您还没有准备好，请开始在您的项目中尝试它们，看看它们如何使您的工作流程更加顺畅。

编码愉快！ ？

请关注我，获取更多有价值的内容

以上是每个开发人员都应该了解的 JavaScript 新功能的详细内容。更多信息请关注PHP中文网其他相关文章！