使用 ES9 中的 Array.prototype.flat() 和 Array.prototype.flatMap() 来处理嵌套数组
在现代的前端开发过程中，数组的处理是非常常见而又重要的一部分。而当我们处理嵌套数组时，我们需要一些更加高效和易用的方式来处理嵌套的数据结构。在 ES9 中，引入了两个新的方法 Array.prototype.flat() 和 Array.prototype.flatMap() ， 这两个方法让处理嵌套数组变得更加方便快捷。
Array.prototype.flat()
Array.prototype.flat() 可以将嵌套数组“平铺”，转换成一维数组。这个方法非常有用，特别是当我们需要访问数组中的每个元素时，不需要用多层嵌套的 for 循环，直接遍历数组就行。
接下来，我为你演示一下这个方法如何使用。
let arr = [1, 2, [3, 4, [5, 6]]]; let flatArr = arr.flat(); // 输出结果：[1, 2, 3, 4, [5, 6]] console.log(flatArr);
在上面的例子中，我们使用了 Array.prototype.flat() 方法，将数组 arr 中的嵌套数组转换成一维数组。上面的输出结果显示出，我们得到了一个平铺的数组。
这个方法还有一个可选参数，depth,它的作用是指定平铺的嵌套层数。
let arr = [1, 2, [3, 4, [5, 6]]]; let flatArr = arr.flat(2); // 输出结果：[1, 2, 3, 4, 5, 6] console.log(flatArr);
在上方的例子中，我们要求将嵌套数组扁平化至最多两层。输出结果是一维嵌套数组 [1, 2, 3, 4, 5, 6]。
如果你使用的是具有 ES6 的浏览器，但不支持 Array.prototype.flat() 方法，我们可以使用 reduce() 方法完成类似的操作。
let arr = [1, 2, [3, 4, [5, 6]]]; let flatArr = arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(val.flat()) : acc.concat(val), []); // 输出结果：[1, 2, 3, 4, 5, 6] console.log(flatArr);
Array.prototype.flatMap()
Array.prototype.flatMap() 方法是一个非常有用的方法，它可以让我们对数组进行变形和过滤操作，并且相较于使用 map() 方法产生的嵌套数组，flatMap() 返回的是“扁平化”的数组。
在下面的例子中，我要用到 flatMap() 方法来展示这个方法的工作方式：
let arr = [1, 2, 3]; let flatMapArr = arr.flatMap(x => [x, x * 2]); // 输出结果：[1, 2, 2, 4, 3, 6] console.log(flatMapArr);
上述的 flatMap() 方法将数组 arr 扁平化，参数 x 传递进一个函数内，然后这个函数会返回一个包含当前元素 x 和其两倍的数组，生成的一维数组是两个函数调用结果的整合。
如果你使用的是具有 ES6 的浏览器，但不支持 Array.prototype.flatMap() 方法，那么我们可以使用 map() 和 reduce() 方法来完成同样的操作。
let arr = [1, 2, 3]; let flatMapArr = arr.map(x => [x, x * 2]).reduce((acc, val) => acc.concat(val), []); // 输出结果：[1, 2, 2, 4, 3, 6] console.log(flatMapArr);
总结
使用 ES9 中的 Array.prototype.flat() 和 Array.prototype.flatMap() 方法，可以大大简化处理嵌套数组的操作。在这篇文章中，我们学习了这两个方法的使用，以及在代码中如何将它们用于嵌套数组的处理。这两个方法是现代 JavaScript 中非常重要的特性，它们能够极大地减少因为嵌套数组所产生的代码复杂度和困难程度，让我们开发者可以更加专注于业务逻辑的实现和优化上。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a4d844add4f0e0ffd31390