理解JS中的陣列迭代器方法：filter、map和reduce

JavaScript 具有用於陣列轉換的內建迭代方法。讓我們來分析一下filter()、map()、reduce()以及它們的使用條件。

Array.filter()

它會建立一個新數組，其中包含透過所提供函數實現的測試的所有元素。 它為數組中的每個元素調用一次提供的回調函數，並傳回回調函數傳回 true 的所有值的新數組。

文法

filter(callbackFn)
filter(callbackFn, thisArg)

其計算結果為：Array.filter((element, index, array) => { ... } )

callbackFn 是一個為數組中的每個元素執行的函數，它應該傳回一個 true 值以保留結果數組的元素，否則傳回 false 值。此函數接受三個參數：當前元素、索引和陣列本身。

在下面的範例中，給定一個數字數組並期望找到偶數，filter() 方法的使用如下所示：

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

Array.map()

map() 方法建立一個新數組，其中填充了對目前數組中每個元素呼叫所提供函數的結果。它僅對已賦值的陣列索引呼叫回調函數，對空槽不呼叫回調函數。

文法

map(callbackFn)
map(callbackFn, thisArg)

這簡單翻譯為：Arrays.map((element, index, array) => { ... })

callbackFn 是一個對數組中的每個元素執行的函數，返回值將作為單一元素添加到新數組中。
此函數接受三個參數：目前元素、索引和陣列本身。

給定一個數字數組並期望返回它們的平方，map() 方法將是最有效的，如下所示：

const numbers = [1, 2, 3, 4, 5];
const squareNumbers = numbers.map(number => number ** 2);
console.log(squareNumbers); // Output: [1, 4, 9, 16, 25]

我們正在將一個陣列的值對應到另一個陣列。

Array.reduce()
reduce() 方法按升序索引順序對數組的每個元素運行回調函數縮減器，並傳入前一個元素計算的回傳值。在所有數組元素上運行減速器的最終結果是單一值。

如果提供了初始值，它將用作回呼的第一次呼叫中的第一個參數。如果沒有提供初始值，則使用陣列的第一個元素作為初始值，然後從第二個元素開始迭代。

文法

reduce(callbackFn)
reduce(callbackFn, initialValue)

callbackFn 是對陣列中的每個元素執行的函數。它的傳回值將成為下次呼叫回呼時累加器參數的值。對於最後一次調用，返回值成為reduce()函數的返回值。
它採用以下參數：累加器、currentValue、currentIndex 和呼叫它的陣列。

使用數字數組並負責查找它們的總和，reduce() 方法可以輕鬆地對其進行評估，如下所示：

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // Output: 15

結論
這些方法filter()、map()和reduce()對於陣列迭代和運算是必不可少的。

• filter() 最適合尋找給定數組中滿足回調函數條件的所有元素。

• map() 是一種非破壞性數組方法，最適合用於操作給定數組中的資料並期望返回值。

• reduce() 對於基於縮減函數將數組元素聚合為單一值非常有用。

參考文獻

• Array.prototype.filter 上的 MDN Web 文件

• Array.prototype.map 上的 MDN Web 文件

• Array.prototype.reduce 上的 MDN Web 文件

以上是理解JS中的陣列迭代器方法：filter、map和reduce的詳細內容。更多資訊請關注PHP中文網其他相關文章！