隨著 JavaScript 不斷進化，許多新特性極大提升了代碼的可讀性和開發(fā)效率。然而，不少開發(fā)者仍未充分利用這些強大工具。本文帶你快速了解 5 個常被忽視但非常實用的 JavaScript 特性，幫你寫出更簡潔、更安全的代碼。
可選鏈操作符（?.）
當(dāng)我們訪問一個嵌套很深的對象屬性時，最怕的就是中途某個屬性是 undefined，導(dǎo)致報錯。傳統(tǒng)做法需要一層層判斷，而 可選鏈操作符 可以大大簡化這個過程。
const userInfo = {
name: '小明',
contact: {
city: '上海'
}
};
// 傳統(tǒng)方式
const city = userInfo && userInfo.contact ? userInfo.contact.city : undefined;
// 使用可選鏈
const cityNew = userInfo?.contact?.city;
console.log(cityNew); // 輸出: 上海
推薦理由：
- 提升代碼可讀性，尤其是處理 API 返回數(shù)據(jù)時非常實用
空值合并運算符（??）
發(fā)很多人習(xí)慣用 || 來設(shè)置默認(rèn)值，但它會把 false、0、'' 也當(dāng)作“空值”，有時候會導(dǎo)致預(yù)期之外的結(jié)果。而 ?? 運算符只在值是 null 或 undefined 時才使用默認(rèn)值。
const input = 0;
// 使用 || 會誤判 0 為假值
const result1 = input || 10; // 輸出: 10
// 使用 ?? 正確識別 0
const result2 = input ?? 10; // 輸出: 0
console.log(result2);
推薦理由：
- 精準(zhǔn)判斷 null 和 undefined，避免意外覆蓋有效值
動態(tài)導(dǎo)入
動態(tài)導(dǎo)入可以讓你按需加載模塊，尤其適合做代碼分割、按需加載頁面資源等性能優(yōu)化場景。
if (user.isAdmin) {
import('./adminPanel.js').then(adminModule => {
adminModule.loadAdminPanel();
});
}
簡介：基于Tailwind CSS的組件庫，提供多種預(yù)構(gòu)建元素。
推薦理由：
- 是構(gòu)建現(xiàn)代 Web 應(yīng)用（如懶加載、權(quán)限控制）不可缺少的利器
Promise.allSettled：同時處理成功與失敗的異步任務(wù)
我們常用 Promise.all 執(zhí)行并發(fā)請求，但只要有一個失敗就會整體 reject。如果你想知道每個 Promise 的執(zhí)行結(jié)果，不管成敗，就該用 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);
}
});
});
推薦理由：
- 更適合批量上傳、數(shù)據(jù)請求等復(fù)雜異步場景
邏輯賦值運算符（&&=, ||=, ??=）
這類新運算符結(jié)合了邏輯判斷與賦值操作，代碼更短、更直觀。
let userState = {
isLoggedIn: false,
settings: null
};
// 如果 isLoggedIn 是 false，就設(shè)置為 true
userState.isLoggedIn ||= true;
// 如果 settings 是 null 或 undefined，就賦默認(rèn)配置
userState.settings ??= { theme: 'dark' };
console.log(userState);
// 輸出: { isLoggedIn: true, settings: { theme: 'dark' } }
推薦理由：
- 在處理狀態(tài)更新或初始化對象屬性時非常方便
結(jié)論
這些現(xiàn)代 JavaScript 特性看似“語法糖”，但用得好，真的能大幅提升開發(fā)效率和代碼質(zhì)量。如果你還沒用過它們，不妨從下一個項目開始嘗試，你會感受到它們帶來的便利。
該文章在 2025/6/9 9:55:57 編輯過
400 186 1886
