ES7 引入的 Array#flat 和 Array#flatMap 方法使用指南

在 ES7 中，添加了 Array#flat 和 Array#flatMap 两个方法来方便地操作数组。这两个方法可以让我们更加方便地对数组进行操作，尤其是在处理多维数组时非常有用。

1. Array#flat

Array#flat 方法可以将多维数组“扁平化”，即将多维数组转换成一维数组。如果不指定参数，则默认将多维数组扁平化一层，如果传入参数，则表示将数组扁平化的层数。

1.1 默认将多维数组扁平化一层

const arr = [1, [2, 3], [4, [5, 6]]];

const newArr = arr.flat();
// 输出 [1, 2, 3, 4, [5, 6]]

1.2 传入参数表示扁平化的层数

const arr = [[1, 2], [3, [4, [5, 6]]]];

const newArr1 = arr.flat(); // 输出 [1, 2, 3, [4, [5, 6]]]
const newArr2 = arr.flat(2); // 输出 [1, 2, 3, 4, 5, 6]

2. Array#flatMap

Array#flatMap 方法是将数组中的每一项按照提供的函数进行变换，然后将变换后的结果“扁平化”到新的数组中。

与 Array#map 不同的是，Array#flatMap 在对每个元素进行处理后，会自动调用 flat 方法，将处理后的结果“扁平化”。

// 取出每个字符串中的字符，并返回新的数组
const arr = ['hello', 'world'];
const newArr = arr.flatMap(x => x.split(''));
// 输出 ['h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']

3. 总结

通过使用 Array#flat 和 Array#flatMap 方法，我们可以更加方便地处理多维数组，提高代码的简洁性和可读性。在日常开发中，我们可以使用这两个方法来简化代码，提高编写效率。

注意：当你使用这些方法之后，要检查每个浏览器是否支持它们，以便您的应用程序在不同浏览器中正常工作。

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