js 数组展开

js 数组展开

在 JavaScript 中，数组展开是一种常用的操作，它可以将一个嵌套的数组结构展开为一个扁平的数组。这在处理多维数组数据时非常实用，可以简化代码逻辑并提高代码可读性。

方法一：使用concat方法

使用concat方法可以将多个数组合并成一个新的数组，通过传入展开运算符(…)来展开数组。

const arr1 = [1, 2, 3];
const arr2 = [4, 5];
const arr3 = [6, 7, 8];

const flatArr = [].concat(...arr1, ...arr2, ...arr3);

console.log(flatArr); // [1, 2, 3, 4, 5, 6, 7, 8]

在上面的示例中，通过concat方法和展开运算符将arr1、arr2和arr3三个数组展开后合并成一个新的扁平数组flatArr。

方法二：使用reduce方法

使用reduce方法可以对数组中的每个元素进行操作，并最终将它们合并成一个新数组。

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

const flatArr = nestedArr.reduce((acc, val) => acc.concat(val), []);

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

在上面的示例中，首先定义了一个嵌套数组nestedArr，然后通过reduce方法将其展开成一个新的扁平数组flatArr。

方法三：使用flat方法

ES6新增了flat方法，可以直接将多维数组展开为一个新数组。

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

const flatArr = nestedArr.flat();

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

在上面的示例中，直接调用nestedArr的flat方法即可将其展开成一个新的扁平数组flatArr。

方法四：使用递归实现

通过递归的方式可以遍历多维数组并将其展开。

const nestedArr = [[1, 2], [3, [4, 5]], [6, [7, 8, [9, 10]]]];

function flatten(arr) {
    return arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatten(val) : val), []);
}

const flatArr = flatten(nestedArr);

console.log(flatArr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

在上面的示例中，定义了一个flatten函数，通过递归的方式遍历nestedArr数组并将其展开为一个新数组flatArr。

总的来说，数组展开是一种非常有用的操作，可以简化多维数组数据的处理过程，提高代码的效率和可读性。无论是使用concat、reduce、flat方法还是递归实现，都可以实现数组展开的功能，开发者可以根据自己的需求选择合适的方式来处理多维数组数据。