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

迷南。 2021-11-04 22:12 385阅读 0赞

**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()不仅能拉平数组，还能去除数组的空位这一能力。**