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