JS中flat---提取嵌套数组元素

引言

对于前端项目开发过程中，偶尔会出现层叠数据结构的数组，我们需要将多层级数组转化为一级数组（即提取嵌套数组元素最终合并为一个数组），使其内容合并且展开。那么该如何去实现呢？

数组方法：flat

作用

flat()方法会按照一个可指定的深度递归遍历数组，并将所有元素与便利到的子数组中的元素合并为一个新数组返回。不考虑他所谓指定深度，直白一点来说，就是数组扁平化，也就是把一个有多层嵌套的数组，提取为一个只有一层的数组。

语法

var newArray=arr.flat(depth)

参数

depth（可选参数）指定要提取嵌套数组的结构深度，默认值为1

示例

var arr=['one','two','three',['red','green',[1,2,3],'blue']];
var result=arr.flat();
console.log(result);

上面也提到了，flat的默认参数是1，那么这个参数究竟起到什么作用呢？

从引言部分看到一个大概的解释，“按照一个指定的深度递归遍历数组”，这个参数depth就是所说的深度，也就是能够指定遍历到多少层的层数，直接拿例子说话：

var arr=['red',[1,2,[3,4,[5,6,[7,8,[9,10],11,12]]]]];
console.log(arr.flat());
console.log(arr.flat(2));
console.log(arr.flat(3));
console.log(arr.flat(4));
console.log(arr.flat(Infinity));

嵌套的数组就像洋葱一样一层一层地剥开啦~ 用Infinity作为参数就直接剥光了！

数组扁平化即提取嵌套数组元素的其他方法

需求： 多维数组->一维数组

let ary = [1, [2, [3, [4, 5]]], 6];

除了直接用flat，还有以下几种方法

都是我目前理解不了的办法，就先看看吧

方法一：

ary = str.replace(/(\[\]))/g, '').split(',');

方法二：

let ary = [1, [2, [3, [4, 5]]], 6];
let str = JSON.stringify(ary);
str = str.replace(/(\[\]))/g, '');
str = '[' + str + ']';
ary = JSON.parse(str);

方法三：

let result = [];
let fn = function(ary) {
for(let i = 0; i < ary.length; i++) }{
    let item = ary[i];
    if (Array.isArray(ary[i])){
         fn(item);
    }
    else {
        result.push(item);
    }
}

方法四：

while (ary.some(Array.isArray)) {
    ary = [].concat(...ary);
}

参考： JS数组扁平化