ES6中将多维数组转换为一维数组之flat()

JavaScript中如何将嵌套的数组"拉平"变成一维数组?这个功能在实际项目中，还是用到的比较多。实际项目中也遇到过，所以

今天就在这里做个总结，方便后续拓展~

看到网上好多资料是通过join() / oString()方法结合split()方法进行转换，但是这样最终得到的是一个字符串数组。有时我们原

本的数组成员并不是字符串类型的。不想处理后改变数组成员类型。那此时我么可以用ES6中给出的手段去解决->既不会改变数

组成员类型，又简单高效。走起吧!!!

举例说明：

先看常用的处理方式吧，如下：

let arr1 = [1,2,[3,[4]]];
let arr2 = arr1.toString().split(',');  // ["1", "2", "3", "4"]
let arr3 = arr1.join().split(',');   // ["1", "2", "3", "4"]

上述代码缺点：数组每一项都成字符串了。

说明：虽然有时我们需要处理成这种字符串数组，但是有时也并不想要这种结果，面对这个，解决的方案有：

1、ES5中的处理手段：

使用数组map()方法，对数组中的每一项进行一个处理，然后返回符合条件的结果。

对上述的字符串数组arr2、arr3做一个类型转换。

let arr2_dealWith = arr2.map(item => Number(item))
arr2_dealWith // [1, 2, 3, 4]

let arr3_detailWith = arr3.map(item => Number(item))
arr3_detailWith //  [1, 2, 3, 4]

说明：最后虽然结合map()方法解决了问题，但是却使用了3个方法 toString()/join() + split() + map()) 这貌似有点恐怖呀，所以

2、ES6提供了flat()方法， 一次性即可解决掉~

let array_1 = [1, 2, 3, [4, 5], 6];
let array_1_result = array_1.flat();
array_1_result // [1, 2, 3, 4, 5, 6]

说明：

1>、该方法返回一个新数组，不会更改原数组。

2>、该方法默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层

数，默认为1。

let array_2 = [1, 2, 3, [[4], 5], 6];
let array_2_result = array_2.flat(2); //表示拉平两层
array_2_result // [1, 2, 3, 4, 5, 6]

3>、如果嵌套20、30等层，用参数就比较麻烦（数起来，当然这么多嵌套实际项目中是没有的）所以，提供了用Infinity关键字作

为参数->此时不管有多少层嵌套，都可以转成一维数组。

let array_3 = [1, 2, 3, [[4, [10]], 5], 6];
let array_3_result = array_3.flat(Infinity); 
array_3_result //  [1, 2, 3, 4, 10, 5, 6]
			

注：如果有空位，flat()方法会跳过空位,这样可以延伸出，flat()不仅能拉平数组，还能去除数组的空位这一能力。

let vacancyArray = [1, 2, 3, , 4, , 6];
let vacancyArray_result = vacancyArray.flat();
vacancyArray_result //[1, 2, 3, 4, 6]

 flatMap()方法对原数组的每个成员执行一个函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方

法。该方法返回一个新数组，不改变原数组。

let a = [1,2,3];
let res = a.flatMap((x) => [x, x * 2])
// 相当于 [[1, 2], [2, 4], [3, 6]].flat()
res // [1, 2, 2, 4, 3, 6]

说明：

1>、该方法只能展开一层。

 2>、flatMap()方法的参数是一个遍历函数，该函数可以接受三个参数，分别是当前数组成员、当前数组成员的位置（从零开

始）、原数组。

3>、flatMap()方法还可以有第二个参数，用来绑定遍历函数里面的this。