快捷導(dǎo)航

JavaScript中這6個新特性你都了解了嗎

更新時間：2024年01月08日 16:02:27 作者：純愛掌門人

作為一門不斷演進的語言,JavaScript每年都會引入新特性,這篇文章主要為大家整理了一些個人認為特別有用的新JavaScript特性,以及一些補充的實例代碼,希望對大家有所幫助

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

可選鏈

可選鏈讓我們能夠以安全的方式訪問嵌套對象的屬性，避免因為中間某個屬性不存在而拋出錯誤。

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, 而不是拋出錯誤

空值合并運算符

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

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;