隨著 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
