JS的這些新特性，你都用過么？
共 5582字，需瀏覽 12分鐘
·
2024-05-09 09:16
點擊上方 前端Q，關(guān)注公眾號
回復(fù)加群，加入前端Q技術(shù)交流群
作為一門不斷演進的語言，JavaScript每年都會引入新特性。這些特性的加入，能夠幫助我們編寫更加簡潔、高效、易于維護的代碼。然而，并非所有新特性都會立即廣泛應(yīng)用。它們的采用往往取決于社區(qū)的接受度以及瀏覽器的支持情況。比如我，會根據(jù)項目需求、團隊習(xí)慣以及特性的成熟度來選擇是否使用這些新特性。以下是一些我認(rèn)為特別有用的新JavaScript特性，以及一些補充的實例代碼，大家一起共勉。
可選鏈
可選鏈讓我們能夠以安全的方式訪問嵌套對象的屬性，避免因為中間某個屬性不存在而拋出錯誤。
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, 而不是拋出錯誤
空值合并運算符
空值合并運算符允許我們?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的值提供一個默認(rèn)值。
const defaultAge = 25;
const userAge = null;
const age = userAge ?? defaultAge;
console.log(age); // 25
Promise.allSettled()
這個方法讓我們可以在所有的Promise都得到解決之后，無論是fulfilled還是rejected，都可以獲得每一個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"
動態(tài)導(dǎo)入
動態(tài)導(dǎo)入讓我們可以在代碼運行時按需加載模塊。
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允許我們在模塊頂層使用await關(guān)鍵字，簡化了異步導(dǎo)入和操作的代碼邏輯。
const data = await fetchData('api/data');
console.log(data);
邏輯賦值運算符
這些運算符結(jié)合了邏輯運算符和賦值運算符。
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方法讓我們可以更容易地替換字符串中的所有匹配項，而不僅僅是第一個匹配項。
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對象允許您保持對另一個對象的弱引用，而不會阻止該對象被垃圾回收。FinalizationRegistry對象允許您在對象被垃圾回收時執(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');
// 某個時間后，如果obj不再被其他引用，垃圾回收器會清除obj
obj = null;
總結(jié)
新特性的引入總是帶來了新的編程范式和工具，我們可以利用它們來提升我們的開發(fā)效率和代碼質(zhì)量。隨著新特性逐步融入我們的日常工作，我們需要保持學(xué)習(xí)的態(tài)度，不斷適應(yīng)和采納這些新工具。
盡管如此，我們也要考慮到項目的現(xiàn)實需求，如瀏覽器兼容性和團隊的熟悉度，以確保新特性的引入不會對項目造成負(fù)面影響。
最終，合理利用現(xiàn)代JavaScript特性，我們能夠編寫出更加現(xiàn)代化、高效且可維護的前端代碼
作者：純愛掌門人
原文：https://juejin.cn/post/7321294927592456203
往期推薦
最后
歡迎加我微信，拉你進技術(shù)群，長期交流學(xué)習(xí)...
歡迎關(guān)注「前端Q」,認(rèn)真學(xué)前端，做個專業(yè)的技術(shù)人...