一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第16天，点击查看活动详情

array.map()是非常好用的映射函数：它用一个数组和一个映射函数，返回一个新的映射数组。另一方面，还有了一个更好用的方法——array.flatMap()（ES2019新增），此方法不但让我们能够映射，而且还可以可以在生成的映射数组中删除甚至添加新的元素。

1.更智能的映射函数

有一个数字数组，你将如何创建一个新的数组，使每个元素的值都翻倍？使用 array.map() 是一种很好的解决方法：

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

numbers.map(number => 2 * number)将数组映射到一个新数组，新数组的每个数字都是原来的元素的两倍。这种情况array.map()处理得很好。但是，如果需要跳过值为零的元素，该怎么办？直接使用 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); // 打印 [6, 12]

Double 数组现在的元素为numbers数组元素乘以2的值，并且不包含零。 array.map() and array.filter() 映射并过滤了数组。但有没有一种更短的方法？多亏了array.flatMap()方法，只需一个方法调用就可以执行映射和删除项。下面是如何使用array.flatMap()返回一个新的映射数组，其中的每个元素的值翻倍，同时过滤0：

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

2. array.flatMap()

array.flatMap()的作用是：接受一个回调函数作为参数，返回一个新的映射数组：

const mappedArray = array.flatMap((item, index, origArray) => {

    // ...
    return [value1, value2, ..., valueN];

}[, thisArg]);

对原始数组中的每个item调用回调函数，它有三个参数：当前项、索引和原始数组。然后将回调返回的数组展平1级，并将结果项添加到映射到的新数组中。此外，该方法还接受第二个可选参数，表示回调函数内部的 this 值。使用array.flatMap()的最简单方法是将包含二维数组展平为一维数组：

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

在上面的示例中，arrays包含数字数组：[[2,4]，[6]]。调用arrays.flatMap(item => item)）将数组展平为[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); // 打印 [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);
//打印 [1, 2, 3, 4, 8, 12]

3.总结

array.flatMap()是一种映射数组的方法，而且它也可以控制你想向新映射的数组中添加元素或者删除元素。 array.flatMap(callback)中的回调函数参数由三个参数调用：当前迭代项、索引和原始数组。然后将回调函数返回的数组展平到1级深度，并将生成的项插入到生成的映射数组中。不过，如果只想将单个项映射到单个新值，还是建议使用array.map()。

译自:dmitripavlutin.com/javascript-…

更智能的js映射器：array.flatMap()

1.更智能的映射函数

2. array.flatMap()

3.总结