JavaScript 帶給了我們極大的自由,但也帶來了一定的復(fù)雜性。為了讓你的代碼更高效、易于維護(hù),下面認(rèn)真分享 12個(gè) JavaScript 的高級(jí)技巧和實(shí)用場(chǎng)景。
空值合并(??)
場(chǎng)景:如果變量為 null 或 undefined ,則使用默認(rèn)值。
const username = user.name ?? 'Guest';
console.log(username); // 如果 user.name 為 null 或 undefined,輸出‘Guest’
使用 Intl 進(jìn)行格式化
場(chǎng)景:Intl 對(duì)象可以用于格式化貨幣、日期以及數(shù)字,非常適合需要進(jìn)行本地化處理的場(chǎng)景。
const formatter = newIntl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY' });
console.log(formatter.format(1000)); // 輸出:¥1,000.00
緩存函數(shù)
場(chǎng)景:緩存函數(shù)結(jié)果以加快重復(fù)調(diào)用速度。
const memoize = fn => {
const cache = {};
return(...args) => {
const key = JSON.stringify(args);
if (!cache[key]) cache[key] = fn(...args);
return cache[key];
};
};
可選鏈接
場(chǎng)景:簡化字符串插值和多行字符串。
const address = user?.contact?.address?.city;
console.log(address);
使用 Set 保存唯一值
場(chǎng)景:當(dāng)需要存儲(chǔ)一組不重復(fù)的值時(shí),可以使用 Set。
const unique = newSet([1, 2, 3, 1]);
console.log(unique); // 輸出:Set { 1, 2, 3 }
模板字面量
場(chǎng)景:插入變量,實(shí)現(xiàn)多行字符串。
const username = "Saurabh";
const entries = 1567;
const message = `Hello, ${username}!, Welcome to dashboard you have ${entries} left`;
默認(rèn)參數(shù)
場(chǎng)景:為函數(shù)參數(shù)分配默認(rèn)值。
function greet(name = 'Guest') {
console.log(`Hello, ${name}!`);
}
數(shù)組擴(kuò)展運(yùn)算符
場(chǎng)景:克隆或合并數(shù)組。
const newArray = [...array1, ...array2];
數(shù)組映射
場(chǎng)景:將元素轉(zhuǎn)換成新數(shù)組。
const names = users.map(user => user.name);
防抖
場(chǎng)景:控制函數(shù)執(zhí)行頻率。
const debounce = (func, delay) => {
let timeout;
return (...args) => {
clearTimeout(timeout);
timeout = setTimeout(() => func(...args), delay);
};
};
節(jié)流
場(chǎng)景:控制函數(shù)隨時(shí)間推移的執(zhí)行頻率。
const throttle = (func, limit) => {
let lastFunc;
let lastRan;
return(...args) => {
if (!lastRan) {
func(...args);
lastRan = Date.now();
} else {
clearTimeout(lastFunc);
lastFunc = setTimeout(() => {
if (Date.now() - lastRan >= limit) {
func(...args);
lastRan = Date.now();
}
}, limit - (Date.now() - lastRan));
}
};
};
Promise.all
場(chǎng)景:并行處理多個(gè) promise。
const results = await Promise.all([fetchData1(), fetchData2()]);
結(jié)論
通過掌握這些高級(jí) JavaScript 技巧,你可以在編寫代碼時(shí)更加高效、優(yōu)雅,并能輕松解決復(fù)雜問題。無論是通過 Intl 進(jìn)行數(shù)據(jù)格式化,還是使用 Set 去重和管理集合,這些實(shí)用的方法都能幫助你寫出更簡潔、更專業(yè)的代碼。
本文首發(fā)于公眾號(hào)“web前端開發(fā)之旅”,轉(zhuǎn)載請(qǐng)注明出處!
該文章在 2025/1/3 9:12:58 編輯過