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