JS的這些新特性，你都用過么？

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

可選鏈

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

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ù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的值提供一個默認(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)入讓我們可以在代碼運(yùn)行時按需加載模塊。

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);

邏輯賦值運(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)，而不僅僅是第一個匹配項(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對象允許您保持對另一個對象的弱引用，而不會阻止該對象被垃圾回收。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àng)目的現(xiàn)實(shí)需求，如瀏覽器兼容性和團(tuán)隊(duì)的熟悉度，以確保新特性的引入不會對項(xiàng)目造成負(fù)面影響。

最終，合理利用現(xiàn)代JavaScript特性，我們能夠編寫出更加現(xiàn)代化、高效且可維護(hù)的前端代碼

作者：純愛掌門人

原文：https://juejin.cn/post/7321294927592456203

最后

Node 社群

    

     

      

       

        

       
       

        

       
      
     
    
我組建了一個氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對Node.js學(xué)習(xí)感興趣的話（后續(xù)有計(jì)劃也可以），我們可以一起進(jìn)行Node.js相關(guān)的交流、學(xué)習(xí)、共建。下方加 考拉 好友回復(fù)「Node」即可。
   “分享、點(diǎn)贊、在看” 支持一下