開發人員必須了解的 JavaScript 技巧

1. 循環對象

使用 Object.entries() 循環鍵值對。

const person = {
  name: 'Tony Stark',
  age: 53,
  city: 'NewYork'
};

/*
name: Tony Stark
age: 53
city: NewYork
*/
for (const [key, value] of Object.entries(person)) {
  console.log(`${key}: ${value}`);
}

說明：

• Object.entries() 將物件的屬性轉換為鍵值對數組，以便輕鬆迭代它們。

 

2. 從陣列中刪除假值

使用filter(Boolean)過濾掉假值。
（虛假值包括 false、0、''、null、undefined 和 NaN）

const arr = [1, 2, 0, '', undefined, null, 3, NaN, false];

const filteredArr = arr.filter(Boolean);

console.log(filteredArr); // [1, 2, 3]

說明：

• 在此程式碼中，布林值會作為回呼函數傳遞給filter()。
• Boolean() 函數是 JavaScript 中的內建函數，對於真值傳回 true，對於假值傳回 false。
• 透過將布林值傳遞為回呼函數，filter() 將從陣列 arr 中刪除所有虛假值，並傳回僅包含真實值的新陣列 filteredArr。

 

3. 展平多維數組

使用 flat() 方法來展平數組。

const multiDimensionalArray = [[1, 2], [3, 4, [5, 6]]];
const flattenedArray = multiDimensionalArray.flat(2);

// Output: [1, 2, 3, 4, 5, 6]
console.log(flattenedArray); 

說明：

• 在此程式碼中，multiDimensionalArray 是一個具有兩個巢狀陣列的二維陣列。
• 透過呼叫深度為 2 的 flat() 方法，所有子數組元素都連接成一個平面數組。
• 產生的 flattenedArray 在一個維度中包含原始多維數組的所有元素。

 

4. 從可迭代物件建立數組

使用 Array.from() 從可迭代物件建立陣列。

// Converting String to an array
const str = "TonyStark";
const arr = Array.from(str);

// ['T', 'o', 'n', 'y', 'S', 't', 'a', 'r', 'k']
console.log(arr);

// Converting Set to an array
const set = new Set([1, 2, 3, 3, 4, 5]);
const arr = Array.from(set);
console.log(arr); // Output: [1, 2, 3, 4, 5]

說明：

• Array.from() 將可迭代或類似陣列的物件（如字串、集合、映射）轉換為陣列。

 

5. 從數組中提取值

使用解構從數組中提取值。

const numbers = [1, 2, 3, 4, 5];
const [first, second, , fourth] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(fourth); // 4

說明：

• 解構讓您可以將陣列元素直接指派給變數並跳過不需要的值。

 

6. 從物件中提取值

使用物件解構來提取屬性。

const person = {
  name: 'Tony Stark',
  age: 53,
  email: 'tonystark@starkindustries.com'
};

const {name, age, email} = person;

console.log(name); // Tony Stark
console.log(age); // 53
console.log(email); // tonystark@starkindustries.com

說明：

• 解構透過將物件屬性與變數配對來提取物件屬性。

 

7. 並行執行多個 Promise

Promise.all() 允許並行執行多個 Promise。

const promise1 = fetch('https://api.example.com/data1');
const promise2 = fetch('https://api.example.com/data2');

Promise.all([promise1, promise2])
  .then(responses => {
    // handle responses from both requests here
    const [response1, response2] = responses;
    // do something with the responses
  })
  .catch(error => {
    // handle errors from either request here
    console.error(error);
  });

說明：

• 在此程式碼中，我們使用 fetch() 方法建立兩個 Promise，以從兩個不同的端點取得資料。
• 然後，我們將一個 Promise 陣列傳遞給 Promise.all()，它會傳回一個新的 Promise，當陣列中的所有 Promise 都已解決時，該新 Promise 就會解決。
• 然後我們可以使用 then() 區塊中的回應數組來處理兩個請求的回應。如果任一 Promise 被拒絕，catch() 區塊將處理該錯誤。

 

8. 找出數組中最大和最小的數字

使用帶有展開語法的 Math.max() 和 Math.min()。

const nums = [10, 12, 29, 60, 22];
console.log(Math.max(...nums)); // 60
console.log(Math.min(...nums)); // 10

說明：

• 擴充語法 (...) 擴充陣列元素，允許 Math.max() 和 Math.min() 加值。

 

9. 將任何值轉換為布林值

使用雙重否定！ ！轉換值。

!!2; // true
!!''; // false
!!NaN; // false
!!'word'; // true
!!undefined; // false

說明：

JavaScript 中的雙重否定 (
• !!) 是將任何值轉換為其布林值的技巧。
第一個
• ! 將真值轉換為false 並將假值轉換為true，第二個! 翻轉此佈林值，結果true 表示真值，false 表示假值。

 

10. 交換變數值

使用陣列解構來交換值。

let a = 5;
let b = 10;

// Swap values using array destructuring
[a, b] = [b, a];

console.log(a); // 10
console.log(b); // 5

說明：

在此範例中，
• a 和 b 的值在不使用臨時變數的情況下進行交換。
右邊的
• [b, a] 建立一個新數組，其值為b 和a，然後解構賦值 [a, b] 將這些值分配回a 和b，有效地交換它們的值。

以上是開發人員必須了解的 JavaScript 技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！