前端小技巧: 拍平数组的6种常见方法

关于数组拍平

• 所谓数组拍平，就是按照顺序，把他们全放在一个数组中
• 需要考虑多层级和嵌套的问题来彻底拍平数组
  *

实现方案

1 ）一般思路, 先实现一级扁平化，然后递归，直到全部扁平

function flat(arr) {const res = [];arr.forEach(item => {if(Array.isArray(item)) {const flatItem = flat(item); // 递归flatItem.forEach(n => res.push(n));} else {res.push(item);}})return res;
}const res = flat( [1, 2, [3, 4, [10, 20, [100, 200]]], 5] );
console.log(res); // [1, 2, 3, 4, 10, 20, 100, 200, 5]

2 ）基于 Array的concat方法和递归实现, 优化方案1

function flat(arr) {// 验证 arr 中，还有没有深层数组 [1, 2, [3, 4]]const isDeep = arr.some(item => item instanceof Array);if (!isDeep) return arr; // 已经是 flatern [1, 2, 3, 4]// 如果有深层数组，则拍平，示例：[].concat(1,2,[3,4],5) 返回 [1,2,3,4,5], 利用concat方法的拍平const res = Array.prototype.concat.apply([], arr);return flat(res); // 递归
}const res = flat( [1, 2, [3, 4, [10, 20, [100, 200]]], 5] );
console.log(res); // [1, 2, 3, 4, 10, 20, 100, 200, 5]

3 ）使用reduce实现

function flat(arr) {return arr.reduce((result, current) => {if (Array.isArray(current)) {return result.concat(flat(current));}return result.concat(current);}, []);
}const res = flat( [1, 2, [3, 4, [10, 20, [100, 200]]], 5] );
console.log(res); // [1, 2, 3, 4, 10, 20, 100, 200, 5]

4 ）基于String的toString方法和递归实现

function flat(arr) {// 验证 arr 中，还有没有深层数组 [1, 2, [3, 4]]const isDeep = arr.some(item => item instanceof Array)if (!isDeep) return arr // 已经是 flatern [1, 2, 3, 4]// 如果有深层数组，则拍平，转换成字符串拍平const res = arr.toString().split(',').map(val => +val);return flat(res) // 递归
}const res = flat( [1, 2, [3, 4, [10, 20, [100, 200]]], 5] );
console.log(res); // [1, 2, 3, 4, 10, 20, 100, 200, 5]

5 ）直接使用toString方法即可拍平成字符串，再转成数组即可，方案4的优化版本

function flat(arr) {return arr.toString().split(',').map(val => +val);
}const res = flat( [1, 2, [3, 4, [10, 20, [100, 200]]], 5] );
console.log(res); // [1, 2, 3, 4, 10, 20, 100, 200, 5]

6 ) 使用 Array的 flat() 方法, 注意参数的使用，可以用 Infinity 代替具体的层数

function flat(arr) {return arr.flat(Infinity);
}const res = flat( [1, 2, [3, 4, [10, 20, [100, 200]]], 5] );
console.log(res); // [1, 2, 3, 4, 10, 20, 100, 200, 5]