數組函數有哪些用處

很多時候你可能很糾結，你應該使用reduce更多或你不應該使用filter，更應該使用 map；或是for，為什麼不使用forEach？是不是太糾結了。

.事實上呢？數組和數組的迭代函數對於初學者來說都會感到困惑，所以我將試著為每個簡化問題，最後提出的問題是：你想要返回什麼？

簡介

• 為每個現有的東西回傳一個東西：map()

• 只回傳一些現有的東西：filter()

• 只回傳一個東西：reduce()

• 不要回傳任何東西，而是對每個已存在的東西做一些事情：forEach()

接下來一個個介紹這些數組相關的函數，並且使用一個非箭頭函數範例，另外同時使用一個箭頭函數的範例。

為每個現有的東西傳回一個新東西：map()

如果你有一個數組，燕且希望對該數組中的每一項執行一些操作，傳回一個有新值的數組，那麼使用map()是最適合不過。這裡有一個簡單的函數，它接受數組並將數組每個項目做翻倍運算：

const originalArray = [1, 2, 3];const newArray = originalArray.map(function(item) {    return item * 2;
});
console.log(newArray); // -> [2, 4, 6]

使用ES6的箭頭函數：

const originalArray = [1, 2, 3];const newArray = originalArray.map(item => item * 2);
console.log(newArray); // -> [2, 4, 6]

注意：使用新的箭頭函數語法，我們不需要使用function、return關鍵字或花括號{}。這是因為箭頭函數提供了像這樣的simple()函數的隱式傳回。你可以從Wes Bos閱讀更多關於箭頭函數的資訊。

傳回一個新數組，只包含一些符合條件的現有數組項目：filter()

filter()可能是最容易理解的數組函數，因為它的命名非常好。 filter()接受一系列的值，對每個值執行一個函數或比較，然後傳回一個新的陣列。這些值通過它的測試（我們稱之為truthy值）。

這裡有一個範例，從一個陣列中取出大於5的數，然後傳回一個符合條件的新數組：

const originalArray = [1, 9, 4, 2, 42];const newArray = originalArray.filter(function(item) {    return item > 5;
});
console.log(newArray); // -> [9, 42]

使用ES6的箭頭函數：

const newArray = originalArray.filter(item => item > 5);

只回傳一個新東西：reduce()

有時候你有一個系列的值，但你只想從它們當中傳回一個新東西。數組中的reduce()函數會對數組中的每個項目執行一個函數或比較，然後對所謂的累加器執行一些操作。這是一個更容易用一個例子來描述的函數，因為它所描述的術語和函數本身一樣令人困惑。

假設你有名字的數組，你想數一下Bob這個名字出現的次數：

const originalArray = ["Alice", "Bob", "Charlie", "Bob", "Bob", "Charlie"];const numberOfBobs = originalArray.reduce(function(accumulator, item) {    if (item === "Bob") {        return accumulator + 1;
    } else {        return accumulator;
    }
}, 0);
console.log(numberOfBobs); // -> 3

使用ES6的箭頭函數：

const numberOfBobs = originalArray.reduce((accumulator, item) => {    if (item === "Bob") {        return accumulator + 1;
    } else {        return accumulator;
    }
}, 0);

就像你看到的一樣，這個箭頭函數並沒有節省我們的時間，因為我們必須為函數提供兩個參數，然後在返回之前有邏輯，所以我們仍然需要花括號{}。

在reduce()函數末端的0是我們累加器的開始值，如果我們遇到的值是Bob#，則新增1，否則我們將傳回目前的累加器。如果你不回傳任何東西，那麼下次執行該函數的時候將會回傳undefined。

對數組中每個值做一些事情，但不傳回任何值：forEach()

有時，你會有一系列想要處理的值，但不是需要追蹤每個函數呼叫的返回值。這就是forEach()的意思。

const originalArray = [1, 2, 3];
originalArray.forEach(function(item) {
    doSomething(item);
});

使用ES6箭頭函數：

originalArray.forEach( item => doSomething(item); );

總結

#簡單而甜蜜的。這些是我們為每個函數提供的最簡單的範例，讓它盡可能地簡單，主要是便於理解何時應該使用它們。你可以用這些函數做大量的工作，而且每個函數都有一個高級形式，它也提供了當前的索引：

arr.map((item, index) => {})
arr.filter((item, index) => {})
arr.reduce((accumulator, item, index) => {})
arr.forEach((item, index) => {})

相關推薦：

##php數組函數實作關聯表的編輯

最實用的JS陣列函數整理

常用陣列函數有哪些

#

以上是數組函數有哪些用處的詳細內容。更多資訊請關注PHP中文網其他相關文章！