js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解

一、什么是js嵌套的数组扁平化

当一个数组中嵌套了多个数组时，我们把这种数组称为多维数组。而将多维数组变成一维数组的操作就被称为数组扁平化。js嵌套的数组扁平化就是将多维数组变成一维数组的过程，使得多维数组中的元素都能展开成一维数组。

二、js嵌套数组扁平化的实现方式

实现js嵌套数组扁平化有多种方式，例如用递归、利用数组的flat()方法等，这里介绍一种比较常见的方法——使用reduce方法。

reduce方法：它用于数组的进一步结合运算，常用于累加数组元素或展开一个多维数组。reduce()的参数是一个回调函数和初始值。

具体的做法如下所示：

function flatten(arr) {
  return arr.reduce(function(prev, cur) {
    return prev.concat(Array.isArray(cur) ? flatten(cur) : cur);
  }, []);
}

这段代码的含义是：如果当前数组元素是数组，那么把它展开；如果当前元素不是数组，那就把它插入到新的数组中。

三、push()与concat()区别的讲解

在js中push()和concat()都是用于数组合并的方法，表示将一个或多个数组合并成一个数组。但是它们之间还是有区别的。

1. push()方法：是向已有的数组插入新元素。它可以接受多个参数，每个参数都会被插入到数组的末尾，并返回新的数组长度。

举个例子：

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
arr1.push(arr2);
console.log(arr1); // [1, 2, 3, [4, 5, 6]]

在上例中，arr2被当成一个整体，作为一个元素插入到了arr1中。

1. concat()方法：是将一个或多个数组连接成一个新的数组。不会影响原来的数组，返回一个新数组，而不是修改原数组。

举个例子：

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = arr1.concat(arr2);
console.log(arr3); // [1, 2, 3, 4, 5, 6]
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [4, 5, 6]

在上例中，arr1和arr2都没有被修改，而是返回了一个新数组arr3。

总结：push()用于往数组中添加一个或多个元素，concat()则是连接多个数组并返回一个新的数组。返回的结果对原数组都没有影响。

四、示例说明

(1) 将多维数组扁平化

假设有一个多维数组：

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

可以通过调用我们之前实现的flatten方法来将多维数组扁平化：

let newArr = flatten(arr);
console.log(newArr); // [1, 2, 3, 4, 5, 6, 7]

可以看到，多维数组已经被成功的变成了一维数组。

(2) 比较push()和concat()的不同

使用之前的例子：

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
arr1.push(arr2);
console.log(arr1); // [1, 2, 3, [4, 5, 6]]

let arr3 = arr1.concat(arr2);
console.log(arr3); // [1, 2, 3, [4, 5, 6], 4, 5, 6]
console.log(arr1); // [1, 2, 3, [4, 5, 6]]
console.log(arr2); // [4, 5, 6]

可以看到，使用push()方法之后，数组arr1中仅仅只是添加了一个数组元素。而使用concat()方法时，数组arr1会和数组arr2一起被连接起来，生成一个新的数组arr3，同时原来的数组仍然不会发生任何改变。