JS的這些新特性，你都用過么？
共 5582字，需瀏覽 12分鐘
·
2024-05-09 09:16
點(diǎn)擊上方 前端Q，關(guān)注公眾號(hào)
回復(fù)加群，加入前端Q技術(shù)交流群
作為一門不斷演進(jìn)的語言，JavaScript每年都會(huì)引入新特性。這些特性的加入，能夠幫助我們編寫更加簡(jiǎn)潔、高效、易于維護(hù)的代碼。然而，并非所有新特性都會(huì)立即廣泛應(yīng)用。它們的采用往往取決于社區(qū)的接受度以及瀏覽器的支持情況。比如我，會(huì)根據(jù)項(xiàng)目需求、團(tuán)隊(duì)習(xí)慣以及特性的成熟度來選擇是否使用這些新特性。以下是一些我認(rèn)為特別有用的新JavaScript特性，以及一些補(bǔ)充的實(shí)例代碼，大家一起共勉。
可選鏈
可選鏈讓我們能夠以安全的方式訪問嵌套對(duì)象的屬性，避免因?yàn)橹虚g某個(gè)屬性不存在而拋出錯(cuò)誤。
const user = {
profile: {
name: 'John Doe',
contact: {
email: '[email protected]',
},
},
};
const userEmail = user.profile?.contact?.email;
console.log(userEmail); // "[email protected]"
const userPhone = user.profile?.contact?.phone;
console.log(userPhone); // 輸出undefined, 而不是拋出錯(cuò)誤
空值合并運(yùn)算符
空值合并運(yùn)算符允許我們?yōu)榭赡苁?code style="color: rgb(30, 107, 184);font-size: 14px;line-height: 1.8em;letter-spacing: 0em;background: none 0% 0% / auto no-repeat scroll padding-box border-box rgba(27, 31, 35, 0.05);width: auto;height: auto;margin-left: 2px;margin-right: 2px;padding: 2px 4px;border-style: none;border-width: 3px;border-color: rgb(0, 0, 0) rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.4);border-radius: 4px;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;word-break: break-all;">null或undefined的值提供一個(gè)默認(rèn)值。
const defaultAge = 25;
const userAge = null;
const age = userAge ?? defaultAge;
console.log(age); // 25
Promise.allSettled()
這個(gè)方法讓我們可以在所有的Promise都得到解決之后，無論是fulfilled還是rejected，都可以獲得每一個(gè)Promise的結(jié)果。
const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];
Promise.allSettled(promises)
.then((results) => results.forEach((result) => console.log(result.status))); // "fulfilled", "rejected"
動(dòng)態(tài)導(dǎo)入
動(dòng)態(tài)導(dǎo)入讓我們可以在代碼運(yùn)行時(shí)按需加載模塊。
button.addEventListener('click', async () => {
try {
const module = await import('./module1.js');
module.load();
} catch (error) {
console.error('Module loading failed:', error);
}
});
BigInt
BigInt是一種新的數(shù)值類型，讓我們可以安全地操作大整數(shù)。
const largeNumber = BigInt('9007199254740991');
const anotherLargeNumber = 9007199254740992n; // 末尾的n表示BigInt
console.log(largeNumber + anotherLargeNumber); // 18014398509481983n
top-level await
top-level await允許我們?cè)谀K頂層使用await關(guān)鍵字，簡(jiǎn)化了異步導(dǎo)入和操作的代碼邏輯。
const data = await fetchData('api/data');
console.log(data);
邏輯賦值運(yùn)算符
這些運(yùn)算符結(jié)合了邏輯運(yùn)算符和賦值運(yùn)算符。
let a = null;
let b = 'default';
a ||= b;
console.log(a); // "default"
let x = 1;
let y = 3;
x &&= y;
console.log(x); // 1
String.prototype.replaceAll()
replaceAll方法讓我們可以更容易地替換字符串中的所有匹配項(xiàng)，而不僅僅是第一個(gè)匹配項(xiàng)。
let str = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';
let newStr = str.replaceAll('dog', 'monkey');
console.log(newStr);
// "The quick brown fox jumps over the lazy monkey. If the monkey reacted, was it really lazy?"
WeakRefs 和 FinalizationRegistry
這些新特性有助于管理內(nèi)存。WeakRef對(duì)象允許您保持對(duì)另一個(gè)對(duì)象的弱引用，而不會(huì)阻止該對(duì)象被垃圾回收。FinalizationRegistry對(duì)象允許您在對(duì)象被垃圾回收時(shí)執(zhí)行一些清理工作。
let obj = {};
const weakRef = new WeakRef(obj);
const registry = new FinalizationRegistry((value) => {
console.log(`The object ${value} will be garbage collected.`);
});
registry.register(obj, 'myObj');
// 某個(gè)時(shí)間后，如果obj不再被其他引用，垃圾回收器會(huì)清除obj
obj = null;
總結(jié)
新特性的引入總是帶來了新的編程范式和工具，我們可以利用它們來提升我們的開發(fā)效率和代碼質(zhì)量。隨著新特性逐步融入我們的日常工作，我們需要保持學(xué)習(xí)的態(tài)度，不斷適應(yīng)和采納這些新工具。
盡管如此，我們也要考慮到項(xiàng)目的現(xiàn)實(shí)需求，如瀏覽器兼容性和團(tuán)隊(duì)的熟悉度，以確保新特性的引入不會(huì)對(duì)項(xiàng)目造成負(fù)面影響。
最終，合理利用現(xiàn)代JavaScript特性，我們能夠編寫出更加現(xiàn)代化、高效且可維護(hù)的前端代碼
作者：純愛掌門人
原文：https://juejin.cn/post/7321294927592456203
往期推薦
最后
歡迎加我微信，拉你進(jìn)技術(shù)群，長(zhǎng)期交流學(xué)習(xí)...
歡迎關(guān)注「前端Q」,認(rèn)真學(xué)前端，做個(gè)專業(yè)的技術(shù)人...