JavaScript 二维数组转一维数组

Posted 2021-08-25 奥特曼　

目录

1. flat()

2. reduce+concat

3. [ ].concat 

4. concat.apply 

5. toString + split （字符串或数值）

6. 遍历判断 

7.多维数组转一维数组

---

1. flat()

语法：var newArray = arr.flat([depth])

depth(深度)：指定要提取嵌套数组的结构深度，默认值为 1。

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

    const arr = [1,2,3,4,[5,6,7]]
    console.log(arr.flat()); //[1, 2, 3, 4, 5, 6, 7]

不写参数 默认值为1 可扁平化一层  扁平最外层

        const arr1 = [1,2,3,4,[5,[6,7]]]
        console.log(arr1.flat()); //[1, 2, 3, 4, 5, [5,6]]

指定扁平化次数

        const arr2 = [1,2,3,4,[5,[6,7]]]
        console.log(arr2.flat(2)); //[1, 2, 3, 4, 5, 6, 7]

一步到位之转换一维数组  无论几维数组  都变成一维数组

        const arr3 = [1,[2,[3,[4,[5]]]]]
        console.log(arr3.flat(Infinity))

2. reduce+concat

concat：用来拼接两个或多个数组 不会改变原数组，返回一个新数组

reduce 累加器 参数callback  callback参数：acc,val,idx,arr   acc:作为累加器，每次拿到上一次的返回值，val数组的每一项，idx：索引 默认从0，arr调用reduce 的原数组

        const arr = [1, 2, 3, 4, [5, 6, 7]]
        console.log(arr.reduce((acc,val)=>acc.concat(val),[])); //[1, 2, 3, 4, 5, 6, 7]

通过[ ] 每次都通过reduce() 拼接数组中的每一项 返回一个新的数组  

3. [ ].concat 

        const arr = [1, 2, 3, 4, [5, 6, 7]]
        console.log([].concat(...arr));

...arr  1,2,3,4,[5,6,7]

[ ].concat(...arr)   1,2,3,4,[5,6,7]   拼接成一个数组

4. concat.apply 

        const arr = [1, 2, 3, 4, [5, 6, 7]]
        console.log([].concat.apply([], arr));

 apply的第二个参数要求是一个数组  你可以理解为 先将1进行合并成一个数组 在将2 合并成一个数组 以此类推

5. toString + split （字符串或数值）

split  将字符串类型利用分隔符分隔 转换成数组 

        const arr = [1, 2, 3, 4, [5, 6, 7]]
        const str = arr.toString() //1,2,3,4,5,6,7  (字符串类型)
        console.log(str.split(',')); //["1", "2", "3", "4", "5", "6", "7"]

简化 

arr.toString().split(',')

 注意利用 split转换后 每一项变成了字符串类型  如果你只需要字符串类型 到这步已经完成了

 如果你只需要数值类型   可用map 进行对每一项Number转换  字符串类型会转成NaN

        console.log(arr.toString().split(',').map(Number)); //[1, 2, 3, 4, 5, 6, 7]

6. 遍历判断 

        const arr = [1, 2, 3, 4, [5, 6, 7]]
        const falt = []
        arr.forEach(it => {
            if(Array.isArray(it)){
                falt.push(...it)
            }else {
                falt.push(it)
            }
        })
        console.log(falt);

遍历数组中的每一项 如果数组中还有数组 就进行展开（...ES6新语法）添加到数组中 如果没有 就直接添加到数组中

复习判断是否为数组

Array.isArray(数组)

数组 instanceof Array

数组.constructor===Array

中间的判断可简化为三元

        const arr = [1, 2, 3, 4, [5, 6, 7]]
        const falt = []
        arr.forEach(it => Array.isArray(it) ? falt.push(...it) : falt.push(it))
        console.log(falt);

7.多维数组转一维数组

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

        function recursion(arr) {
           const falt = []
           arr.forEach((it, idx) =>  Array.isArray(arr[idx]) ? falt.push(...recursion(arr[idx])) : falt.push(arr[idx]))
            return falt
        }
        console.log(recursion(arr));