js二维数组转为一维数组的方法（二维数组的定义初始化）

在查询js数组排序操作时，你会发现有二维数组这个名词出现。二维数组也是数组，它是以数组作为元素的数组，而且二维数组列的长度可以不唯一，本文介绍二维数组初始化代码及二维数组定义代码和二维数组转为一维数组的方法。在前端开发中后端可能会返回给我们一些奇怪的数据，比如说数组里面的元素也是数组，但是我们需要的是一个简单的一维数组，这个时候就需要将二维数组（或者多维数组）转化为我们需要的一维数组。也可以叫做数组扁平化。

一、js二维数组的定义初始化

1、js二维数组的定义：

二维数组本质上是以数组作为数组元素的数组，即“数组的数组”，指数组的每一元素也是一个数组；

JavaScript中的二维数组的列的长度可以不唯一。

2、二维数组的初始化：

var arr = new Array();         //先声明一维
       for(var i=0;i<5;i++){          //一维长度为5
          arr[i]=new Array(i);    //在声明二维
          for(var j=0;j<5;j++){      //二维长度为5
             arr[i][j]=i;
       }
}

3、定义二维数组：

var arr = new array();            //先声明一维
   for(var i=0;i<5;i++){          //一维长度为5
    arr[i]=new array();           //在声明二维
       for(var j=0;j<5;j++){      //二维长度为5
          arr[i][j]=1;
       }
    }

二、js二维数组转为一维数组的方法

1. flat方法

flat是ES10新增的一个数组处理的方法，非常的好用，它专门用来扁平化数组，来看看官方的解释：

官方说的非常的清楚，就是将数组里面的所有元素都遍历出来，无论层级有多深，最后返回一个新的数组，示例代码如下：

let arr = [1, 2, 3, [1, 2, 3]];
console.log(arr.flat()); // [1, 2, 3, 1, 2, 3]

flat默认将二维数组转为一维数组，如果数组层数较多，我们可以传入参数指定固定层数，参数默认为1，示例代码如下：

let arr = [1, 2, 3, [1,[1,2,3], 2, 3]];
console.log(arr.flat(2)); // [1, 2, 3, 1, 1, 2, 3, 2, 3]

如果数组层数未知，可以传入参数Infinity，示例代码如下：

let arr = [1, 2, 3, [1,[1,[1,2,3],2,3], 2, 3]];
console.log(arr.flat(Infinity)); // [1, 2, 3, 1, 1, 1, 2, 3, 2, 3, 2, 3]

2. concat + 扩展符

concat方法是一个数组操作的方法，官方说的非常明白，解释如下：

扩展运算符（...）可以将数组转为用逗号分隔的参数序列。

结合上面两个方法，我们就可以将二维数组转化为一维数组，示例代码如下

let arr = [1, 2, 3, [1, 2, 3], 2, 3];
console.log([].concat(...arr)); // [1, 2, 3, 1, 2, 3, 2, 3]

但是这种方式无法将多维数组转为一维数组。

3. reduce + concat

reduce() 方法接收一个函数作为累加器,reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（上一次回调的返回值），当前元素值，当前索引，原数组 。

语法：arr.reduce(callback,[initialValue])

callback:函数中包含四个参数
  - previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
  - currentValue （数组中当前被处理的元素）
  - index （当前元素在数组中的索引)
  - array （调用的数组）
initialValue （作为第一次调用 callback 的第一个参数。）

先来看一段reduce使用方法的示例代码：

const arr = [1, 2, 3, 4, 5]
const sum = arr.reduce((pre, item) => {   return pre + item}, 0)
console.log(sum) // 15

然后我们在利用reduce+concat来实现二维数组的扁平化，代码如下：

let flattened = [1, [0, 1], [2, 3], [4, 5]].reduce(
   (acc, cur) => acc.concat(cur),
   []
);
console.log(flattened) // [1, 0, 1, 2, 3, 4, 5]

这里我们将初始值设置为了[]空数组，然后将需要扁平化的数组的每一项都用concat重新连接，最终得到一个一维数组。

4. toString + split

先使用 toString 把数组转成字符串，再使用 split 把字符串转回数组：

let arr = [1, [1, 2], [3, 4]]
let arrnew = arr.toString().split(",").map((item) => +item)
console.log(arrnew) // [1, 1, 2, 3, 4]

使用map是为了让数组元素变为Number类型。

总结

数组扁平化是面试中非常常见的一种题型，上面给出了四种解决方案，当然还有很多其它的方案，但是大体来说就是合理的使用递归和循环，当然我们还要考虑一些性能问题。