掌握JavaScript中的陣列方法：map、filter和reduce

JavaScript 中的陣列方法：map、filter 和 reduce

JavaScript 提供了強大的陣列方法來簡化陣列操作。其中，map、filter、reduce是每個開發者都應該了解的三個必備的高階函數。

---

1.地圖方法

map 方法透過使用回調函數轉換現有數組的每個元素來建立一個新數組。

文法

array.map(callback(currentValue[, index[, array]])[, thisArg]);

範例：變換元素

const numbers = [1, 2, 3, 4];
const squared = numbers.map(function(number) {
  return number * number;
});
console.log(squared); // Output: [1, 4, 9, 16]

用例

• 對陣列套用轉換（例如，轉換單位、格式化資料）。

---

2.過濾方法

filter 方法建立一個新數組，僅包含透過所提供的回呼函數實現的測試的元素。

文法

array.filter(callback(element[, index[, array]])[, thisArg]);

範例：過濾元素

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});
console.log(evenNumbers); // Output: [2, 4]

用例

• 根據特定條件過濾陣列（例如，過濾空值、尋找活躍使用者）。

---

3.減少方法

reduce 方法將函數應用於累加器和陣列的每個元素（從左到右），將其減少為單一值。

文法

array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue]);

範例：對陣列元素求和

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(sum); // Output: 10

用例

• 計算總計（例如總和、平均值）。
• 展平巢狀數組。

---

4.結合map、filter和reduce

這些方法可以組合起來執行複雜的操作。

範例：偶數平方和

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

const total = numbers
  .filter(function(number) {
    return number % 2 === 0; // Keep even numbers
  })
  .map(function(number) {
    return number * number; // Square the numbers
  })
  .reduce(function(accumulator, currentValue) {
    return accumulator + currentValue; // Sum the squares
  }, 0);

console.log(total); // Output: 20

---

5.主要差異

Method	Purpose	Return Value
map	Transforms each element	A new array of the same length
filter	Filters elements	A new array with fewer or equal items
reduce	Reduces array to a single value	A single accumulated result

---

6.使用這些方法的好處

1. 可讀性：更乾淨、更具聲明性的程式碼。
2. 可重用性：模組化數組上的操作。
3. 效能：透過最佳化的方法簡化常用操作。

---

7.總結

• map 透過對每個元素應用函數來轉換陣列。
• 過濾器根據條件選擇元素。
• reduce 將數組元素聚合為單一值。
• 這些方法促進函數式程式設計並簡化陣列處理。

掌握map、filter和reduce將提升你的JavaScript技能，讓你的程式碼更乾淨、更有效率。

嗨，我是 Abhay Singh Kathayat！
我是一名全端開發人員，擁有前端和後端技術的專業知識。我使用各種程式語言和框架來建立高效、可擴展且用戶友好的應用程式。
請隨時透過我的商務電子郵件與我聯繫：kaashshorts28@gmail.com。

以上是掌握JavaScript中的陣列方法：map、filter和reduce的詳細內容。更多資訊請關注PHP中文網其他相關文章！