如何创建一个新的数组，使用每个数字加倍?(图)

array.map() 是一个非常有用的映射函数：它接受一个数组和一个映射函数，并返回一个新的映射数组。

但是，还有一个替代 array.map() 的方法：array.()（从一开始就可用）。此方法使我们能够进行映射，还可以将新项目删除甚至添加到结果映射数组中。

1. 更智能的映射器

有一个数字数组，我们如何创建一个每个数字加倍的新数组？

使用 array.map() 函数是一个好方法。

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

地址：

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

对于需要一对一映射的情况，即映射的数组与原始数组具有相同数量的项，array.map() 效果很好。

但是，如果我们需要在跳转到 0 项时将数组中的数字加倍怎么办？

直接使用 array.map() 是不可能的，因为该方法总是创建一个与原始数组具有相同项目数的映射数组。但是我们可以使用 array.map() 和 array.() 的组合。

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

案例地址：

array.map() 和 array.() 可以解决问题，但是有更短的方法吗？

一定。使用 array.() 方法，您只需一个方法调用即可执行映射和删除项目。

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

案例地址：

通过仅使用 .() 您可以将一个数组映射到另一个数组，但也可以跳过映射中的某些元素。

接下来，让我们更详细地了解 array.() 的工作原理。

2. 数组.()

array.() 函数接受一个回调函数作为参数并返回一个新的地图数组

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

回调函数在原始数组中的每一项上调用返回值是数组返回值是数组，带有 3 个参数：当前项、索引和原始数组。然后，回调函数返回的数组被展平 1 层，并将结果项添加到映射数组中。

此外，该方法接受第二个可选参数，表示回调中的 this 值。

使用 array.() 最简单的方法是展平包含项目的数组

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

案例地址：

但是 array.() 可以做的不仅仅是扁平化。通过控制回调返回的数组项的数量：

例如，正如您在上一节中看到的，可以通过将项目加倍来创建一个新数组，但也可以删除 0。

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

现在，让我们看看它是如何工作的。

如果当前项为0，则回调函数返回一个空数组[]。这意味着在展平时，空数组 [] 不提供任何值。

如果当前迭代项不为零，则返回 [2*]。展平 [2*] 数组时，仅将 2* 添加到结果数组中。

您还可以使用 array.() 来增加映射数组中的项目数。

例如，以下代码片段通过添加双数和三数将数字数组映射到新数组：

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]1.2.3.4.5.6.

案例地址：

3：总结

如果要将数组映射到新数组，同时仍控制要添加到新映射数组的项目数，那么 array.() 方法是个好主意。

array.() 的回调函数使用 3 个参数调用：当前迭代的项目、索引和原始数组。然后从回调函数返回的数组被展平 1 级深度，并将生成的项插入到生成的映射数组中。

文章来源:https://baijiahao.baidu.com/s?id=1722976319193094199&wfr=spider&for=pc

感谢您的来访，获取更多精彩文章请收藏本站。