本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一、前言

本篇主要介绍js数组降维的几种方法，数组降维主要是指，将多维数组转化成一维数组。在实际项目中，我们会在有些时候，需要将树状结构的数据，转换成一维的列表形式数据，这里就用到了数组降维。所以这里我们分为两部分说，简单多维数组和复杂多维数组的降维。

二、简单多维数组降维的具体方法

1.flat()

flat()方法是es6新增的数组方法，该方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。点击查看官网介绍

var arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

//使用 Infinity，可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

这个方法适用于简单的多维数组结构。

2.将多维数组转化成字符串，再组成数组

let arr = [1, [2, 3, 4, 5], [6, 7, 8, 9, [10, 11, 12, [14, 15, 16]]]]
arr.join(',').split(',')
// ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '14', '15', '16']

也可以这样来实现

let arr = [1, [2, 3, 4, 5], [6, 7, 8, 9, [10, 11, 12, [14, 15, 16]]]]
let str = JSON.stringify(arr)
str.replace(/\[|\]/g, '').split(',')
// ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '14', '15', '16']

这种方式有点取巧了，并且改变了元素的类型，请在适合的场景使用。

3.递归

使用递归实现数组降维的方式有很多种，如下

其一、利用for循环以及递归不断地判断是否有数组存在进行筛选，实现数组降维

let arr = [1, [2, 3, 4, 5], [6, 7, 8, 9, [10, 11, 12, [14, 15, 16]]]]
let result = [];
const flat = (arr) => {
    for(let i = 0; i < arr.length; i++) {
        let item = arr[i];
        if(Array.isArray(arr[i])){
            flat(item);
        } else{
            result.push(item);
        }
    }
}
flat(arr)
// ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '14', '15', '16']

其二、利用while循环的特性以及concat和运算符...解构的特质实现数组降维。

let arr = [1, [2, 3, 4, 5], [6, 7, 8, 9, [10, 11, 12, [14, 15, 16]]]]
while(arr.some(Array.isArray)) {
    arr = [].concat(...arr);
}

其三、利用reduce以及递归实现数组降维

let arr = [1, [2, 3, 4, 5], [6, 7, 8, 9, [10, 11, 12, [14, 15, 16]]]]
const flat = (arr) => {
    return arr.reduce((pre, cur) => {
         return pre.concat(Array.isArray(cur) ? flat(cur) : cur);
    }, [])
}
flat(arr)

以上就是简单多维数组降维的实现方法了。

三、复杂多维数组降维的方法

这里主要是用递归的方式，将树状结构降维成一维数组。在我们开发过程中使用的数组，很少有这种基础类型作为元素的数组，经常是对象作为元素，例如用children或者list，来一层一层的嵌套，针对这种情况，我们可以封装一个方法，如下

/* 
** 复杂数组降维
* 参数arr：要降维的数组
* 参数key：嵌套的字段
*/
const flat = (arr, key = 'children') => {
    let newArr=[]
    for(let i=0;i<arr.length;i++){
      if(arr[i][key]){ 
        newArr.push(...flat(arr[i][key]))
      }
      newArr.push({...arr[i]})
    }
    return newArr
}
let result = flat(arr)

以上就是实现复杂多维数组降维的实现方法了。

四、后记

在前端开发的过程中，我们处理最多的数据类型基本就是数组了。所以日常积累一些方法，封装一些方法是很有必要的，可以帮助我们省去很多麻烦。

本篇完结！撒花！感谢观看！希望能帮助到你！

JS数组降维的方法