数组降维的 4 大方法

什么是数组降维？

数组降维又称之为数组扁平化，举个栗子：

let arr = [1, 2, [3, 4, [5, 6]]]; // 这就是个三维的数组(套娃数组)
let flatArray = [1, 2, 3, 4, 5, 6]; // 这就是扁平化的数组，是不是简单易懂

一、ES6 的 flat 方法

es6 添加了 flat 方法可以扁平化数组，而且可以自己选择往下拍扁几层，默认是 1，比如说：

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

当然，拍到底了变成一维的数组了肯定就不能往下拍了，数组再扁也扁不到负数维度，所以如果你不知道或者不想去算现在你的数组是多少维度的，那把往下拍的层数设置为 Infinity就好了，玩下拍无限大层。

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

二、递归大法好

这种多层结构的数据处理，递归是一个解决方案：

let arr = [1, 2, [3, 4, [5, 6]]];
let flat = (arr) => {
    let result = [];
    for (let item of arr) {
        item instanceof Array ? result.push(...flat(item)) : result.push(item);
    }
    return result;
}

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

使用 reduce() 递归：

let arr = [1, 2, [3, 4, [5, 6]]];
let flat = (arr) => {
    return arr.reduce((prev, cur) => {
         return prev.concat(cur instanceof Array ? flat(cur) : cur);
    }, []);
}

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

三、拓展运算符... & 迭代

拓展运算符 ... ，三个点，很好用的一个运算符，它能去掉一层括号，举个栗子：

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

利用这个特点，我们可以扁平化数组：

let arr = [1, 2, [3, 4, [5, 6]]];
while(arr.some(x => Array.isArray(x))) {
    arr = [].concat(...arr);
}
console.log(arr); // [1, 2, 3, 4, 5, 6]

四、正则表达式 序列化

先将数组序列化为字符串，然后使用正则表达式的 replace 替换，将 “ [ ” 或者 “ ] ” 替换为空字符串“”，最后补齐最左边和右边的 “ [ ” 和 “ ] ”，反序列化变回数组，就实现了数组的扁平化。

let arr = [1, 2, [3, 4, [5, 6]]];
let jsonArray = "[" + JSON.stringify(arr).replace(/(\[|\])/g, "") + "]";
console.log(JSON.parse(jsonArray));  // [1, 2, 3, 4, 5, 6]

喜欢的话记得点个赞再走哦！