JavaScript 数组映射与扁平化：深入理解 array.flatMap()

前言：

array.map() 是一个极具价值的映射工具：它接收一个数组及映射函数，进而返回一个新的映射数组。

然而，存在一种替代 array.map()的方案：array.flatMap()（自ES2019起可用）。该方法不仅提供映射能力，还能在生成的映射数组中执行删除或添加新项目的操作。

1. 更加智能的映射器

若有一个数字数组，如何创建新数组，使每个数字加倍？

使用array.map()函数是理想选择。

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

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]

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]

仅通过numbers.flatMap()，即可将数组映射为另一数组，同时允许跳过部分元素。

接下来，我们将深入剖析 array.flatMap()的工作原理。

2. array.flatMap()

array.flatMap() 函数接收回调函数作为参数，并返回一个新的映射数组。

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

回调函数针对原数组中的每个iteam执行，包含三个参数：当前项、索引及原数组。随后，回调函数返回的数组被扁平化一层，所得项目被添加至映射数组中。

此外，该方法还支持第二个可选参数，用于指定回调内部的 this 上下文值。

使用array.flatmap()最直观的应用是将包含子数组的项目进行扁平化处理。

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

然而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]

3. 总结

若需将数组映射为新数组，同时控制新映射数组中添加的项数，array.flatMap() 方法是理想之选。

array.flatMap(callback) 的回调函数接收三个参数：当前迭代项、索引及原始数组。随后，从回调返回的数组在1层深度被扁平化，所得项目被插入至生成的映射数组中。

至此，关于JavaScript 映射器array.flatMap()的介绍完毕，更多相关JavaScript 映射器内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！