快捷導(dǎo)航

JavaScript中這6個(gè)新特性你都了解了嗎

更新時(shí)間：2024年01月08日 16:02:27 作者：純愛(ài)掌門(mén)人

作為一門(mén)不斷演進(jìn)的語(yǔ)言,JavaScript每年都會(huì)引入新特性,這篇文章主要為大家整理了一些個(gè)人認(rèn)為特別有用的新JavaScript特性,以及一些補(bǔ)充的實(shí)例代碼,希望對(duì)大家有所幫助

作為一門(mén)不斷演進(jìn)的語(yǔ)言，JavaScript每年都會(huì)引入新特性。這些特性的加入，能夠幫助我們編寫(xiě)更加簡(jiǎn)潔、高效、易于維護(hù)的代碼。然而，并非所有新特性都會(huì)立即廣泛應(yīng)用。它們的采用往往取決于社區(qū)的接受度以及瀏覽器的支持情況。比如我，會(huì)根據(jù)項(xiàng)目需求、團(tuán)隊(duì)習(xí)慣以及特性的成熟度來(lái)選擇是否使用這些新特性。以下是一些我認(rèn)為特別有用的新JavaScript特性，以及一些補(bǔ)充的實(shí)例代碼，大家一起共勉。

可選鏈

可選鏈讓我們能夠以安全的方式訪問(wèn)嵌套對(duì)象的屬性，避免因?yàn)橹虚g某個(gè)屬性不存在而拋出錯(cuò)誤。

const user = {
  profile: {
    name: 'John Doe',
    contact: {
      email: 'john@example.com',
    },
  },
};

const userEmail = user.profile?.contact?.email;
console.log(userEmail); // "john@example.com"

const userPhone = user.profile?.contact?.phone;
console.log(userPhone); // 輸出undefined, 而不是拋出錯(cuò)誤

空值合并運(yùn)算符

空值合并運(yùn)算符允許我們?yōu)榭赡苁?code>null或undefined的值提供一個(gè)默認(rèn)值。

const defaultAge = 25;
const userAge = null;

const age = userAge ?? defaultAge;
console.log(age); // 25

Promise.allSettled()

這個(gè)方法讓我們可以在所有的Promise都得到解決之后，無(wú)論是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ù)值類(lèi)型，讓我們可以安全地操作大整數(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;