随着 JavaScript 不断进化，许多新特性极大提升了代码的可读性和开发效率。然而，不少开发者仍未充分利用这些强大工具。本文带你快速了解 5 个常被忽视但非常实用的 JavaScript 特性，帮你写出更简洁、更安全的代码。
可选链操作符（?.）
当我们访问一个嵌套很深的对象属性时，最怕的就是中途某个属性是 undefined，导致报错。传统做法需要一层层判断，而 可选链操作符 可以大大简化这个过程。
const userInfo = {
name: '小明',
contact: {
city: '上海'
}
};
// 传统方式
const city = userInfo && userInfo.contact ? userInfo.contact.city : undefined;
// 使用可选链
const cityNew = userInfo?.contact?.city;
console.log(cityNew); // 输出: 上海
推荐理由：
- 提升代码可读性，尤其是处理 API 返回数据时非常实用
空值合并运算符（??）
发很多人习惯用 || 来设置默认值，但它会把 false、0、'' 也当作“空值”，有时候会导致预期之外的结果。而 ?? 运算符只在值是 null 或 undefined 时才使用默认值。
const input = 0;
// 使用 || 会误判 0 为假值
const result1 = input || 10; // 输出: 10
// 使用 ?? 正确识别 0
const result2 = input ?? 10; // 输出: 0
console.log(result2);
推荐理由：
- 精准判断 null 和 undefined，避免意外覆盖有效值
动态导入
动态导入可以让你按需加载模块，尤其适合做代码分割、按需加载页面资源等性能优化场景。
if (user.isAdmin) {
import('./adminPanel.js').then(adminModule => {
adminModule.loadAdminPanel();
});
}
简介：基于Tailwind CSS的组件库，提供多种预构建元素。
推荐理由：
- 是构建现代 Web 应用（如懒加载、权限控制）不可缺少的利器
Promise.allSettled：同时处理成功与失败的异步任务
我们常用 Promise.all 执行并发请求，但只要有一个失败就会整体 reject。如果你想知道每个 Promise 的执行结果，不管成败，就该用 Promise.allSettled。
const tasks = [
Promise.resolve('成功'),
Promise.reject('失败'),
Promise.resolve('再次成功')
];
Promise.allSettled(tasks).then(results => {
results.forEach(item => {
if (item.status === 'fulfilled') {
console.log('成功：', item.value);
} else {
console.log('失败：', item.reason);
}
});
});
推荐理由：
逻辑赋值运算符（&&=, ||=, ??=）
这类新运算符结合了逻辑判断与赋值操作，代码更短、更直观。
let userState = {
isLoggedIn: false,
settings: null
};
// 如果 isLoggedIn 是 false，就设置为 true
userState.isLoggedIn ||= true;
// 如果 settings 是 null 或 undefined，就赋默认配置
userState.settings ??= { theme: 'dark' };
console.log(userState);
// 输出: { isLoggedIn: true, settings: { theme: 'dark' } }
推荐理由：
结论
这些现代 JavaScript 特性看似“语法糖”，但用得好，真的能大幅提升开发效率和代码质量。如果你还没用过它们，不妨从下一个项目开始尝试，你会感受到它们带来的便利。
该文章在 2025/6/9 9:55:57 编辑过
400 186 1886
