ES7 / ES8 数组方法之 flatten
在前端开发中，常常涉及到对数组的操作。ES7 和 ES8 中新增的 flatten 方法，可以用来扁平化嵌套的数组，极大地方便了数组的操作。本文将详细介绍 ES7 / ES8 中的 flatten 方法，并附上示例代码，帮助读者更好地理解。
什么是 flatten？
首先，让我们来看一下什么是 flatten。简单来说，flatten 就是将一个嵌套的数组转换成一个一维数组。
例如，将一个二维数组 [[1, 2], [3, 4]] 扁平化后得到的一维数组就是 [1, 2, 3, 4]。同样，将一个三维数组 [[[1, 2], [3, 4]], [[5, 6], [7, 8]]] 扁平化后得到的一维数组就是 [1, 2, 3, 4, 5, 6, 7, 8]。
ES7 / ES8 中的 flatten 方法
在 ES7 中，引入了 Array.prototype.includes()，可以用来判断数组中是否包含某个元素。但是，该方法并不适用于多维数组的操作。
ES8 中新增了数组扁平化的方法 flat()，可以用来处理多维数组。flat() 方法会将数组中的嵌套数组展开，生成一个新的数组。同时，也可以指定展开的深度，达到我们想要扁平化的效果。
flat() 方法有一个可选参数 depth，用来指定扁平化的深度。默认值为 1，表示只展开一层。我们可以使用 Infinity，展开所有嵌套数组。
示例代码：
// 一维数组 const arr1 = [1, 2, 3, 4]; console.log(arr1.flat()); // [1, 2, 3, 4]
// 二维数组 const arr2 = [[1, 2], [3, 4]]; console.log(arr2.flat()); // [1, 2, 3, 4]
// 三维数组 const arr3 = [[[1, 2], [3, 4]], [[5, 6], [7, 8]]]; console.log(arr3.flat()); // [[1, 2], [3, 4], [5, 6], [7, 8]] console.log(arr3.flat(1)); // [[1, 2], [3, 4], [5, 6], [7, 8]] console.log(arr3.flat(2)); // [1, 2, 3, 4, 5, 6, 7, 8] console.log(arr3.flat(Infinity)); // [1, 2, 3, 4, 5, 6, 7, 8]
值得注意的是，该方法只会展开由数组直接包含的元素。例如：
const arr4 = [1, [2, [3, 4]]]; console.log(arr4.flat()); // [1, [2, [3, 4]]]
此时，我们可以继续使用 flat() 方法来处理嵌套数组。
const arr5 = [1, [2, [3, 4]]]; console.log(arr5.flat(2)); // [1, 2, 3, 4]
实际应用
flatten 方法在实际应用中非常常用。例如，我们可以用 flatten 方法来将一个参数数组传递给函数：
function sum(...args) { const nums = args.flat(); return nums.reduce((total, num) => total + num, 0); }
console.log(sum(1, [2, [3, 4]])); // 10
flatten 方法也可以用来去除嵌套数组中的重复元素：
const arr6 = [1, 2, [3, 4, [2, 5]]]; console.log([...new Set(arr6.flat(Infinity))]); // [1, 2, 3, 4, 5]
此时，我们先用 flat() 方法将嵌套数组扁平化，再使用 Set 数据结构去重。
总结
本文详细讲解了 ES7 / ES8 中的 flatten 方法，包括定义、用法、示例代码等。通过学习本文，读者可以更深入地理解该方法的用途，为日后的前端开发工作提供帮助。同时也建议读者多多练习，以加深对 flatten 方法的掌握程度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64561f1c968c7c53b0962899