关于前端:厉害了一个更智能的-JavaScript-映射器arrayflatMap

作者：Dmitri Pavlutin
译者：前端小智
起源：dmitripavlutin

有幻想，有干货，微信搜寻【大迁世界】关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

array.map() 是一个十分有用的映射函数：它接管一个数组和一个映射函数，而后返回一个新的映射数组。

然而，有一个代替 array.map()的办法：array.flatMap()（从 ES2019 开始可用）。这个办法给了咱们映射的能力，但也能够在生成的映射数组中删除甚至增加新的我的项目。

有一个数字数组，咱们要如何创立一个新的数组，应用每个数字加倍？

应用 array.map() 函数是一个好办法。

const numbers = [0, 3, 6];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // logs [0, 6, 12]

地址：https://jsfiddle.net/dmitri_p…

numbers.map(number => 2 * number) 将 number 数组映射到一个新的数组，其中每个数字都被翻倍。

对于须要一对一映射的状况，也就是说，映射后的数组与原始数组的项数雷同，array.map()的成果十分好。

但如果咱们须要将一个数组的数字翻倍，同时跳为 0 的项，该怎么办？

间接应用 array.map() 是不可能的，因为该办法总是创立一个映射的数组，其项数与原数组雷同。然而咱们能够应用 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_p…

array.map()和 array.filter() 能够解决问题，但有没有更简短的办法？

必须滴。应用 array.flatMap() 办法，只需调用一个办法就能够执行映射和删除我的项目。

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_p…

通过只应用 numbers.flatMap()，你能够将一个数组映射到另一个数组，但也能够从映射中跳过某些元素。

接着，咱们来更具体地看看 array.flatMap()是如何工作的。

array.flatMap() 函数承受一个回调函数作为参数并返回一个新的映射数组

const mappedArray = array.flatMap((item, index, origArray) => {
  // ...
  return [value1, value2, ..., valueN];
}[, thisArg]);

回调函数在原数组中的每个 iteam 上被调用，有 3 个参数：以后项、索引和原数组。而后，回调函数返回的数组被扁平化了 1 层，失去的我的项目被增加到映射的数组中。

此外，该办法还承受第二个可选参数，示意回调外部的 this 值。

应用 array.flatmap()最简略的办法是将蕴含我的项目的数组扁平化

const arrays = [[2, 4], [6]];
const flatten = arrays.flatMap(item => item);
console.log(flatten); // logs [2, 4, 6]

事例地址：https://jsfiddle.net/dmitri_p…

然而 array.flatMap() 除了简略的扁平化之外，还能够做更多的事件。通过管制从回调中返回的数组项的数量：

通过返回一个空数组从后果数组中删除该项
通过返回一个带有一个新值的数组 [newValue] 来批改映射的项
通过返回一个蕴含多个值的数组来增加新项: [newValue1, newValue2, ...]

例如，正如你在上一节中所看到的，能够通过将我的项目加倍来创立一个新的数组，但同时也要删除 0。

const numbers = [0, 3, 6];
const doubled = numbers.flatMap(number => {return number === 0 ? [] : [2 * number];
});
console.log(doubled); // logs [6, 12]

当初，咱们来看下它是怎么工作的。

如果以后项为 0，回调函数返回一个空数组 []。这意味着当被扁平化时，空数组 [] 没有提供任何值。

如果以后迭代项非零，则返回 [2 * number]。当扁平 [2 * number] 数组时，后果数组中只增加2 * number。

你也能够应用 array.flatMap()来减少映射的数组中的我的项目数量。

例如，上面的代码片段通过增加两倍和三倍的数字将一个数字数组映射到一个新数组:

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_p…

如果你想把一个数组映射到一个新的数组中，同时又能管制你想在新的映射数组中增加多少项，那么 array.flatMap() 办法就是一个好方法。

array.flatMap(callback) 的回调函数被调用，有 3 个参数：以后迭代的项、索引和原始数组。而后，从回调函数返回的数组在 1 层深处被扁平化，失去的我的项目被插入到所产生的映射数组中。

~ 完，我是刷碗智，新的一年咱们一起洗刷刷！！！！！！

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://dmitripavltin.com/jav…

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588… 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

关于前端:厉害了一个更智能的-JavaScript-映射器arrayflatMap

1. 更加智能的映射器

2. array.flatMap()

3: 总结

交换