數(shù)組函數(shù)有哪些用處

事實(shí)上呢？數(shù)組和數(shù)組的迭代函數(shù)對(duì)于初學(xué)者來說都會(huì)感到困惑，所以我將試著為每個(gè)簡(jiǎn)化問題，最后提出的問題是：你想要返回什么？

簡(jiǎn)介

接下來一個(gè)個(gè)介紹這些數(shù)組相關(guān)的函數(shù)，并且使用一個(gè)非箭頭函數(shù)示例，另外同時(shí)用一個(gè)箭頭函數(shù)的示例。

為每個(gè)現(xiàn)有的東西返回一個(gè)新東西：map()

如果你有一個(gè)數(shù)組，燕且希望對(duì)該數(shù)組中的每一項(xiàng)執(zhí)行一些操作，返回一個(gè)帶有新值的數(shù)組，那么使用map()是最合適不過。這里有一個(gè)簡(jiǎn)單的函數(shù)，它接受數(shù)組并將數(shù)組每個(gè)項(xiàng)做翻倍運(yùn)算：

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

使用ES6的箭頭函數(shù)：

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

注意：使用新的箭頭函數(shù)語法，我們不需要使用function、return關(guān)鍵詞或者花括號(hào){}。這是因?yàn)榧^函數(shù)提供了像這樣的simple()函數(shù)的隱式返回。你可以從Wes Bos閱讀更多關(guān)于箭頭函數(shù)的信息。

返回一個(gè)新數(shù)組，只包含一些符合條件的現(xiàn)有數(shù)組項(xiàng)：filter()

filter()可能是最容易理解的數(shù)組函數(shù)，因?yàn)樗拿浅：谩?code>filter()接受一系列的值，對(duì)每個(gè)值執(zhí)行一個(gè)函數(shù)或比較，然后返回一個(gè)新的數(shù)組。這些值通過它的測(cè)試（我們稱之為truthy值）。

這里有一個(gè)示例，從一個(gè)數(shù)組中取出大于5的數(shù)，然后返回一個(gè)符合條件的新數(shù)組：

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

使用ES6的箭頭函數(shù)：

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

只返回一個(gè)新東西：reduce()

有時(shí)候你有一個(gè)系列的值，但你只想從它們當(dāng)中返回一個(gè)新東西。數(shù)組中的reduce()函數(shù)會(huì)對(duì)數(shù)組中的每個(gè)項(xiàng)目執(zhí)行一個(gè)函數(shù)或比較，然后對(duì)所謂的累加器執(zhí)行一些操作。這是一個(gè)更容易用一個(gè)例子來描述的函數(shù)，因?yàn)樗枋龅男g(shù)語和函數(shù)本身一樣讓人困惑。

假設(shè)你有名字的數(shù)組，你想數(shù)一下Bob這個(gè)名字出現(xiàn)的次數(shù)：

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的箭頭函數(shù)：

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

正如你看到的一樣，這個(gè)箭頭函數(shù)并沒有節(jié)省我們的時(shí)間，因?yàn)槲覀儽仨殲楹瘮?shù)提供兩個(gè)參數(shù)，然后在返回之前有邏輯，所以我們?nèi)孕枰ɡㄌ?hào){}。

在reduce()函數(shù)末尾的0是我們累加器的開始值，如果我們遇到的值是Bob，則添加1，否則我們將返回當(dāng)前的累加器。如果你不返回任何東西，那么下一次運(yùn)行該函數(shù)的時(shí)候?qū)⒎祷?code>undefined。

對(duì)數(shù)組中每個(gè)值做一些事情，但不返回任何值：forEach()

有時(shí)，你會(huì)有一系列想要處理的值，但不是需要跟蹤每個(gè)函數(shù)調(diào)用的返回值。這就是forEach()的意思。

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

使用ES6箭頭函數(shù)：

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

總結(jié)

簡(jiǎn)單而甜蜜的。這些是我們?yōu)槊總€(gè)函數(shù)提供的最簡(jiǎn)單的示例，讓它盡可能地簡(jiǎn)單，主要是便于理解何時(shí)應(yīng)該使用它們。你可以用這些函數(shù)做大量的工作，而且每個(gè)函數(shù)都有一個(gè)高級(jí)形式，它也提供了當(dāng)前的索引：

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com