利用 ES10 中的 Array.flat() 转换多层嵌套数组

利用 ES10 中的 Array.flat() 转换多层嵌套数组

在 JavaScript 中，嵌套数组非常常见。有时候我们需要将多层嵌套的数组进行转换，以得到一维数组。在 ES10 中，一个新的方法 Array.flat() 可以轻松地帮助我们完成这项任务。

Array.flat() 方法可以将指定深度的嵌套数组转换成一维数组。其语法如下：

arr.flat([depth])

其中，arr 是要进行转换的数组，depth 是可选的参数，表示要转换的嵌套深度，默认为 1。

示例代码：

const arr1 = [1, 2, [3, 4]];
console.log(arr1.flat()); // [ 1, 2, 3, 4 ]

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

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

在上面的示例中，arr1 和 arr2 分别是一个两层的嵌套数组，arr3 是一个三层的嵌套数组。使用 flat() 方法将它们分别转换成了一维数组，并根据可选参数指定了转换的深度。

有时候，我们并不知道要转换的嵌套深度，但是可以使用 Infinity 参数。

示例代码：

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

在上面的例子中，我们使用了 Infinity 参数来转换整个嵌套数组，得到了一个一维数组。

除了 flat() 方法之外，ES10 中还新增了一个 flatMap() 方法可以同时转换和映射数组。

示例代码：

const arr5 = [1, 2, 3, 4, 5];
console.log(arr5.flatMap(x => [x * 2])); // [ 2, 4, 6, 8, 10 ]

在上面的例子中，我们使用 flatMap() 方法来将原数组中的每个元素都乘以 2，并将结果转换为一维数组。

总结

Array.flat() 方法是 ES10 中一个非常实用的新方法，可以方便地将多层嵌套数组转换成一维数组，极大地提高了对数组数据的处理效率。同时 flatMap() 方法也可以实现对数组的转换和映射。

深入学习这些方法可以提高我们在前端编程工作中的效率，同时也能更好地理解 JavaScript 中的数组特性。

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