你未充分利用的 5 大 JavaScript 功能

2025-06-08

你未充分利用的 5 大 JavaScript 功能

多年来,JavaScript 经历了翻天覆地的变化,不断推出新功能,使编程更加高效、易读且功能强大。然而,许多开发者仍固守旧习,错过了一些非常有用的功能。让我们深入探讨一下你可能很少使用的五个 JavaScript 功能,以及为什么你应该立即开始使用它们。


1.可选链式调用(?.

您是否曾经编写过多个if语句来检查嵌套对象属性?可选链简化了这一过程,并降低了访问深层嵌套属性时出现运行时错误的风险。

例子:

const user = {
  name: 'John',
  address: {
    city: 'New York'
  }
};

// Without Optional Chaining
const city = user && user.address ? user.address.city : undefined;

// With Optional Chaining
const city = user?.address?.city;

console.log(city); // 'New York'
Enter fullscreen mode Exit fullscreen mode

为什么要使用它:

  • 无需重复进行空值检查。
  • 使您的代码更清晰、更易于阅读。

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

运算符是提供默认值的??绝佳替代方案。与 不同,它仅将视为空值,因此不会将 、 或 错误地视为值。||||nullundefinedfalse0''

例子:

const input = 0;

// Using OR (||)
const value = input || 10; // 10 (undesirable)

// Using Nullish Coalescing (??)
const value = input ?? 10; // 0 (desirable)

console.log(value);
Enter fullscreen mode Exit fullscreen mode

为什么要使用它:

  • 帮助您避免意外的回退。
  • 非常适合以可预测的方式处理默认值。

3.动态导入

动态导入允许您有条件地或按需加载 JavaScript 模块。这对于通过将代码拆分成更小的块来提高大型应用程序的性能尤其有用。

例子:

if (user.isAdmin) {
  import('./adminPanel.js').then(module => {
    module.loadAdminPanel();
  });
}
Enter fullscreen mode Exit fullscreen mode

为什么要使用它:

  • 通过延迟非关键代码的加载来减少初始加载时间。
  • 对于在现代 Web 应用程序中实现延迟加载至关重要。

4.Promise.allSettled

处理多个 Promise 时,有时你想知道每个 Promise 的结果,无论是已完成还是已拒绝。与 不同Promise.all,它在第一次拒绝时会快速失败,Promise.allSettled从而让你了解完整的情况。

例子:

const promises = [
  Promise.resolve('Success'),
  Promise.reject('Error'),
  Promise.resolve('Another success')
];

Promise.allSettled(promises).then(results => {
  results.forEach(result => {
    if (result.status === 'fulfilled') {
      console.log('Fulfilled:', result.value);
    } else {
      console.log('Rejected:', result.reason);
    }
  });
});
Enter fullscreen mode Exit fullscreen mode

为什么要使用它:

  • 优雅地处理混合结果而不停止执行。
  • 非常适合您想要单独处理所有结果的场景。

5.逻辑赋值运算符(&&=||=??=

这些简写运算符结合了逻辑运算和赋值,使您的代码更加简洁。

例子:

let user = {
  isLoggedIn: false,
  preferences: null
};

// Using Logical Assignment Operators
user.isLoggedIn ||= true; // Sets to true if false or undefined
user.preferences ??= { theme: 'dark' }; // Sets if null or undefined

console.log(user);
// { isLoggedIn: true, preferences: { theme: 'dark' } }
Enter fullscreen mode Exit fullscreen mode

为什么要使用它:

  • 减少代码中的冗余。
  • 增强可读性,特别是对于状态更新或对象修改。

最后的想法

这些现代 JavaScript 功能不仅仅是语法糖,更是编写更简洁、更安全、更高效代码的工具。如果您还没有使用它们,现在正是开始使用的最佳时机。

您觉得这些功能中哪些最有用?或者,您已经在使用哪些功能,它彻底改变了您的编程体验?请在下方评论区分享您的想法!

关注并订阅:

鏂囩珷鏉ユ簮锛�https://dev.to/dipakahirav/top-5-javascript-features-youre-not-using-enough-2idh
PREV
Angular:RxJS BehaviorSubject
NEXT
CORS 简介:通过实际示例理解基础知识