JavaScript 总是在不断发展，每个新版本都会引入一些功能，让我们作为开发人员的生活变得更加轻松。其中一些功能改变了游戏规则，改善了我们编写和管理代码的方式。如果您是一名日常编码人员，那么及时了解这些新功能非常重要。在这篇文章中，我将引导您了解一些非常有用且应该包含在您的工具包中的最新 JavaScript 功能。
最近版本的 JavaScript 中添加的最有用的功能之一是可选链。这使我们能够安全地访问对象中深层嵌套的属性，而不必担心中间属性是否为 null 或未定义。
假设您有一个用户对象，该对象可能有也可能没有个人资料：
code const user = { profile: { name: "John" } };
console.log(user.profile?.name); // John
console.log(user.profile?.age); // undefined
如果没有可选链接，您将必须手动检查每个属性，这可能会使代码变得混乱。这个小运算符帮助我们避免这些检查，使代码更干净、更易于阅读。
空值合并运算符 (??) 是另一个巧妙的功能，旨在帮助处理 null 或未定义的值，而不影响 0 或 false 等其他虚假值。
let userName = ''; let defaultName = 'Guest'; console.log(userName ?? defaultName); // 'Guest' because userName is an empty string
与逻辑 OR (||) 不同，它将空字符串 ("") 或 0 视为假值，??仅当左侧操作数为 null 或未定义时才返回右侧操作数。
如果您在 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 }
]
当您不希望一次失败破坏整个过程时，这是处理多个异步操作的好方法。
我们都面临过超出 JavaScript Number 类型限制的问题。 JavaScript 数字仅限于 -(2^53 - 1) 和 (2^53 - 1) 之间的值。如果您需要处理比这更大的数字，BigInt 是您的朋友。
const largeNumber = BigInt(1234567890123456789012345678901234567890); console.log(largeNumber);
这将使您能够处理任意大的整数，而不必担心精度错误。
如果您曾经尝试替换字符串中所有出现的子字符串，您可能会使用正则表达式和replace() 方法。使用replaceAll()，就简单多了。此方法会替换所有出现的子字符串，并且您不必担心全局正则表达式标志。
code const user = { profile: { name: "John" } };
console.log(user.profile?.name); // John
console.log(user.profile?.age); // undefined
它简单、干净，并且不需要正则表达式。
这些新运算符提供了将逻辑运算符与赋值结合起来的快捷方式。它们是编写更简洁代码的好方法。
let userName = ''; let defaultName = 'Guest'; console.log(userName ?? defaultName); // 'Guest' because userName is an empty string
这些快捷方式可以帮助您减少代码的冗长。
如果您需要将键值对列表转换为对象，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 }
]
此方法是手动构造对象的更清晰、更易读的替代方法。
该方法是 map() 和 flat() 的组合。它允许您在一个步骤中映射和展平结果，这在处理数组的数组时非常有用。
const largeNumber = BigInt(1234567890123456789012345678901234567890); console.log(largeNumber);
这比分别执行 map() 和 flat() 更干净。
这种新方法可以轻松地使用负索引访问数组末尾的元素。这比手动计算最后一项的索引要直观得多。
let message = 'Hello World, Welcome to the World!';
let updatedMessage = message.replaceAll('World', 'Universe');
console.log(updatedMessage); // Hello Universe, Welcome to the Universe!
它简化了数组中最后一项的处理。
在 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 中使用异步代码变得更加简单。
如果您曾经想在 JavaScript 类中将变量设为私有，现在可以使用私有类字段。现在，您可以使用 # 符号定义无法从类外部访问的变量。
code const user = { profile: { name: "John" } };
console.log(user.profile?.name); // John
console.log(user.profile?.age); // undefined
以前，JavaScript 的 sort() 方法并不稳定，这意味着相同的项可能会以不可预测的方式进行洗牌。现在，JavaScript 可确保具有相同值的元素保留其在数组中的原始顺序。
let userName = ''; let defaultName = 'Guest'; console.log(userName ?? defaultName); // 'Guest' because userName is an empty string
这确保了行为更加可预测且一致。
JavaScript 不断发展，这些特性为开发者带来了便利和力量。无论您是使用异步代码、处理大量数字，还是只是清理对象和数组操作，这些新功能都可以帮助您编写更干净、更高效的代码。如果您还没有准备好，请开始在您的项目中尝试它们，看看它们如何使您的工作流程更加顺畅。
编码愉快！ ？
请关注我，获取更多有价值的内容
以上是每个开发人员都应该了解的 JavaScript 新功能的详细内容。更多信息请关注PHP中文网其他相关文章！
