阿川私房教材：學程式，拿 offer！

63 個專案實戰，直接上手！
無需補習，按步驟打造你的面試作品。

小編精選 - 技術文章翻譯 · 11月30日

您應該多用的 5 個 JavaScript 功能

多年來，JavaScript 發生了巨大的發展，引入了使編碼更加高效、可讀和強大的功能。然而，許多開發人員仍堅持舊習慣，錯過了一些非常有用的功能。讓我們深入探討您可能使用得不夠多的五個 JavaScript 功能，以及為什麼您應該立即開始使用它們。

1.可選連結 ( `?.` )

您是否曾經編寫過多個if語句來檢查嵌套物件屬性？可選連結簡化了這個過程，並降低了在存取深層嵌套屬性時出現執行時錯誤的風險。

例子：

const user = {
  name: 'John',
  address: {
    city: 'New York'
  }
};

// Without Optional Chaining
const city = user && user.address ? user.address.city : undefined;

// With Optional Chaining
const city = user?.address?.city;

console.log(city); // 'New York'

為什麼你應該使用它：

消除了重複的 null 檢查的需要。
讓您的程式碼更清晰、更易於閱讀。

2.空合併運算子 ( `??` )

這??運算符是||的絕佳替代品用於提供預設值。不像|| ，它只將null和undefined視為 nullish，因此它不會錯誤地將false 、 0或''視為 nullish。

例子：

const input = 0;

// Using OR (||)
const value = input || 10; // 10 (undesirable)

// Using Nullish Coalescing (??)
const value = input ?? 10; // 0 (desirable)

console.log(value);

為什麼你應該使用它：

幫助您避免意外的回退。
非常適合以可預測的方式處理預設值。

3.動態導入

動態導入可讓您有條件或按需載入 JavaScript 模組。這對於透過將程式碼分割成更小的區塊來提高大型應用程式的效能特別有用。

例子：

if (user.isAdmin) {
  import('./adminPanel.js').then(module => {
    module.loadAdminPanel();
  });
}

為什麼你應該使用它：

透過推遲非關鍵程式碼的載入來減少初始載入時間。
對於在現代 Web 應用程式中實現延遲載入至關重要。

`Promise.allSettled`

在處理多個 Promise 時，有時您會想知道每個 Promise 的結果，無論是履行還是拒絕。與Promise.all在第一次拒絕時快速失敗不同， Promise.allSettled為您提供了完整的情況。

例子：

const promises = [
  Promise.resolve('Success'),
  Promise.reject('Error'),
  Promise.resolve('Another success')
];

Promise.allSettled(promises).then(results => {
  results.forEach(result => {
    if (result.status === 'fulfilled') {
      console.log('Fulfilled:', result.value);
    } else {
      console.log('Rejected:', result.reason);
    }
  });
});

為什麼你應該使用它：

優雅地處理混合結果而不停止執行。
非常適合您想要單獨處理所有結果的場景。

5.邏輯賦值運算子（ `&&=` 、 `||=` 、 `??=` ）

這些簡寫運算子結合了邏輯運算和賦值，讓您的程式碼更加簡潔。

例子：

let user = {
  isLoggedIn: false,
  preferences: null
};

// Using Logical Assignment Operators
user.isLoggedIn ||= true; // Sets to true if false or undefined
user.preferences ??= { theme: 'dark' }; // Sets if null or undefined

console.log(user);
// { isLoggedIn: true, preferences: { theme: 'dark' } }