ES8 中的新方法：Array.flat 和 Array.flatMap-JavaScript中文网-JavaScript教程资源分享门户

ES8 中的新方法：Array.flat 和 Array.flatMap

在 ES8 中，新增了两个方法 Array.flat 和 Array.flatMap，它们都是用来处理数组的方法，这两个新方法可以让我们更加方便地处理数组，同时也使我们的代码更加简洁优雅。

Array.flat

首先我们来看一下 Array.flat。它是用来将多维数组转化为一维数组的方法。如果你以前需要将一个多维数组转化为一维数组，你可能需要使用递归或者循环来完成这个任务，但是现在，你可以使用 Array.flat 来轻松地解决这个问题。

Array.flat 方法的语法结构如下：

array.flat([depth])

其中，array 表示需要处理的数组，depth 表示指定需要展开的维度，它的默认值是 1。

例如：

const arr = [1, [2, 3], [4, [5, 6]]];
const flatArr = arr.flat();
console.log(flatArr); // [1, 2, 3, 4, [5, 6]]

由于我们没有指定展开的深度，所以 Array.flat 默认只展开了一层，导致最后一个子数组并没有展开。如果我们需要将所有的子数组都展开，我们可以指定 depth 的值为 Infinity。

例如：

const arr = [1, [2, 3], [4, [5, 6]]];
const flatArr = arr.flat(Infinity);
console.log(flatArr); // [1, 2, 3, 4, 5, 6]

在处理多维数组时，Array.flat 方法非常有用，可以让我们更加方便地进行数据处理和操作。

Array.flatMap

接下来，我们来看一下 Array.flatMap 方法。它是用来将数组映射成另外一个数组，并将其中的所有元素展开到一维数组中的方法。如果你以前需要使用 Array.map 来映射数组，并且需要使用 Array.flat 来展开数组，那么现在你可以使用 Array.flatMap 来同时完成这两个任务。

Array.flatMap 方法的语法结构如下：

array.flatMap(callback[, thisArg])

其中，callback 表示一个函数，它接受三个参数：当前元素、元素索引和数组本身，并返回一个新数组，这个新数组会被展开到一维数组中。thisArg 表示回调函数中 this 的指向。

例如：

const arr = [1, 2, 3];
const flatMapArr = arr.flatMap((x) => [x * 2]);
console.log(flatMapArr); // [2, 4, 6]

在上面的例子中，我们使用 Array.flatMap 将 arr 数组映射成了另外一个数组，并将其中的元素展开到一维数组中，我们可以看到得到的结果就是 [2, 4, 6]。

Array.flatMap 还有一个很有用的应用，它可以帮助我们过滤掉数组中的空值和 undefined 值，使得我们的代码更加简洁和优雅。

例如：

const arr = ["hello", " ", "world", "  ", " ", "!"];
const flatMapArr = arr.flatMap((x) => x.trim() ? x : []);
console.log(flatMapArr); // ["hello", "world", "!"]

在上面的例子中，我们使用 Array.flatMap 将 arr 数组中的空值和 undefined 值过滤掉了，使得最后的结果变得更加清晰和简洁。

总结

ES8 中新增的两个方法 Array.flat 和 Array.flatMap，可以让我们更加方便地处理数组，使我们的代码更加简洁优雅。其中，Array.flat 是用来将多维数组转化为一维数组的方法，Array.flatMap 是用来将数组映射成另外一个数组，并将其中的所有元素展开到一维数组中的方法。在实际开发中，我们可以根据具体的需求选择使用不同的方法，使得我们的代码变得更加简洁、清晰和易于维护。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64eaed0af6b2d6eab35a55bd