建站
咨詢
售后
建站咨詢
新聞中心
array.map() 是一個(gè)非常有用的映射函數(shù)：它接收一個(gè)數(shù)組和一個(gè)映射函數(shù)，然后返回一個(gè)新的映射數(shù)組。
創(chuàng)新互聯(lián)專注于四平網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供四平營(yíng)銷型網(wǎng)站建設(shè)，四平網(wǎng)站制作、四平網(wǎng)頁(yè)設(shè)計(jì)、四平網(wǎng)站官網(wǎng)定制、重慶小程序開(kāi)發(fā)服務(wù)，打造四平網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供四平網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。
然而，有一個(gè)替代 array.map()的方法：array.flatMap()(從ES2019開(kāi)始可用)。這個(gè)方法給了我們映射的能力，但也可以在生成的映射數(shù)組中刪除甚至添加新的項(xiàng)目。
1. 更加智能的映射器
有一個(gè)數(shù)字?jǐn)?shù)組，我們要如何創(chuàng)建一個(gè)新的數(shù)組，使用每個(gè)數(shù)字加倍?
使用array.map()函數(shù)是一個(gè)好方法。
const numbers = [0, 3, 6];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // logs [0, 6, 12]
地址：https://jsfiddle.net/dmitri_pavlutin/7g5fz93y/
numbers.map(number => 2 * number) 將 number 數(shù)組映射到一個(gè)新的數(shù)組，其中每個(gè)數(shù)字都被翻倍。
對(duì)于需要一對(duì)一映射的情況，也就是說(shuō)，映射后的數(shù)組與原始數(shù)組的項(xiàng)數(shù)相同，array.map()的效果非常好。
但如果我們需要將一個(gè)數(shù)組的數(shù)字翻倍，同時(shí)跳為0的項(xiàng)，該怎么辦?
直接使用 array.map() 是不可能的，因?yàn)樵摲椒偸莿?chuàng)建一個(gè)映射的數(shù)組，其項(xiàng)數(shù)與原數(shù)組相同。但是我們可以使用 array.map()和 array.filter() 的組合。
const numbers = [0, 3, 6];
const doubled = numbers
.filter(n => n !== 0)
.map(n => n * 2);
console.log(doubled); // logs [6, 12]
事例地址：https://jsfiddle.net/dmitri_pavlutin/cvtjyLpo/
array.map()和 array.filter() 可以解決問(wèn)題，但有沒(méi)有更簡(jiǎn)短的方法?
必須滴。使用 array.flatMap() 方法，只需調(diào)用一個(gè)方法就可以執(zhí)行映射和刪除項(xiàng)目。
const numbers = [0, 3, 6];
const doubled = numbers.flatMap(number => {
return number === 0 ? [] : [2 * number];
});
console.log(doubled); // logs [6, 12]
事例地址：https://jsfiddle.net/dmitri_pavlutin/j945qunz/
通過(guò)只使用 numbers.flatMap()，你可以將一個(gè)數(shù)組映射到另一個(gè)數(shù)組，但也可以從映射中跳過(guò)某些元素。
接著，我們來(lái)更詳細(xì)地看看 array.flatMap()是如何工作的。
2. array.flatMap()
array.flatMap() 函數(shù)接受一個(gè)回調(diào)函數(shù)作為參數(shù)并返回一個(gè)新的映射數(shù)組
const mappedArray = array.flatMap((item, index, origArray) => {
// ...
return [value1, value2, ..., valueN];
}[, thisArg]);
回調(diào)函數(shù)在原數(shù)組中的每個(gè)iteam上被調(diào)用，有3個(gè)參數(shù)：當(dāng)前項(xiàng)、索引和原數(shù)組。然后，回調(diào)函數(shù)返回的數(shù)組被扁平化了1層，得到的項(xiàng)目被添加到映射的數(shù)組中。
此外，該方法還接受第二個(gè)可選參數(shù)，表示回調(diào)內(nèi)部的 this 值。
使用 array.flatmap()最簡(jiǎn)單的方法是將包含項(xiàng)目的數(shù)組扁平化
const arrays = [[2, 4], [6]];
const flatten = arrays.flatMap(item => item);
console.log(flatten); // logs [2, 4, 6]
事例地址：https://jsfiddle.net/dmitri_pavlutin/5rwvcz17/
但是array.flatMap()除了簡(jiǎn)單的扁平化之外，還可以做更多的事情。通過(guò)控制從回調(diào)中返回的數(shù)組項(xiàng)的數(shù)量：
- 通過(guò)返回一個(gè)空數(shù)組從結(jié)果數(shù)組中刪除該項(xiàng)
- 通過(guò)返回一個(gè)帶有一個(gè)新值的數(shù)組 [newValue] 來(lái)修改映射的項(xiàng)
- 通過(guò)返回一個(gè)包含多個(gè)值的數(shù)組來(lái)添加新項(xiàng): [newValue1, newValue2, ...]
例如，正如你在上一節(jié)中所看到的，可以通過(guò)將項(xiàng)目加倍來(lái)創(chuàng)建一個(gè)新的數(shù)組，但同時(shí)也要?jiǎng)h除 0。
const numbers = [0, 3, 6];
const doubled = numbers.flatMap(number => {
return number === 0 ? [] : [2 * number];
});
console.log(doubled); // logs [6, 12]
現(xiàn)在，我們來(lái)看下它是怎么工作的。
如果當(dāng)前項(xiàng)為 0，回調(diào)函數(shù)返回一個(gè)空數(shù)組 []。這意味著當(dāng)被扁平化時(shí)，空數(shù)組[]沒(méi)有提供任何值。
如果當(dāng)前迭代項(xiàng)非零，則返回 [2 * number]。當(dāng)扁平[2 * number]數(shù)組時(shí)，結(jié)果數(shù)組中只添加2 * number。
你也可以使用 array.flatMap()來(lái)增加映射的數(shù)組中的項(xiàng)目數(shù)量。
例如，下面的代碼片段通過(guò)添加兩倍和三倍的數(shù)字將一個(gè)數(shù)字?jǐn)?shù)組映射到一個(gè)新數(shù)組:
const numbers = [1, 4];
const trippled = numbers.flatMap(number => {
return [number, 2 * number, 3 * number];
});
console.log(trippled);
// logs [1, 2, 3, 4, 8, 12]
事例地址：https://jsfiddle.net/dmitri_pavlutin/k7p2x1ar/
3: 總結(jié)
如果你想把一個(gè)數(shù)組映射到一個(gè)新的數(shù)組中，同時(shí)又能控制你想在新的映射數(shù)組中添加多少項(xiàng)，那么 array.flatMap() 方法就是一個(gè)好辦法。
array.flatMap(callback) 的回調(diào)函數(shù)被調(diào)用，有3個(gè)參數(shù)：當(dāng)前迭代的項(xiàng)、索引和原始數(shù)組。然后，從回調(diào)函數(shù)返回的數(shù)組在1層深處被扁平化，得到的項(xiàng)目被插入到所產(chǎn)生的映射數(shù)組中。
~完，我是刷碗智，新的一年我們一起洗刷刷!!!!!!
作者：Dmitri Pavlutin 譯者：前端小智 來(lái)源：dmitripavlutin 原文：https://dmitripavltin.com/javascrit-array-flatmap/
網(wǎng)頁(yè)名稱：厲害了，一個(gè)更智能的JavaScript映射器：array.flatMap()
轉(zhuǎn)載注明：http://m.5511xx.com/article/djpgghg.html
