一、什么是数组扁平化
数组的扁平化其实就是将一个嵌套多层的数组 array(嵌套可以是任何层数)转换为只有一层的数组。
二、数组扁平化的实现
方法一:ES6中的数组flat()方法
arr.flat([depth])
其中 depth 是 flat 的参数,depth 是可以传递数组的展开深度(默认不填、数值是 1),即展开一层数组。传 Infinity,代表不论多少层都要展开。
// ES6 Array.flat(Infinity)
const arr = [1, [2, 3], [4, 5, 6, [7, 8, 9, [10]]]];
const result = arr.flat(Infinity);
console.log(result, "result"); // [1,2,3,4,5,6,7,8,9,10]
方法二:递归实现
通过循环递归的方式,一项一项地去遍历,如果每一项还是一个数组,那么就继续往下遍历,利用递归程序的方法,来实现数组的每一项的连接。
// 递归实现
const arr = [1, [2, 3], [4, 5, 6, [7, 8, 9, [10]]]];
function flatten(arr) {
let res = [];
for (let i = 0; i < arr.length; i++) {
if (Array.isArray(arr[i])) {
res = res.concat(flatten(arr[i]));
} else {
res.push(arr[i]);
}
}
return res;
}
const result = flatten(arr);
console.log(result, "result"); // [1,2,3,4,5,6,7,8,9,10]
方法三:利用reduce函数
从方法二递归函数中可以看出,本质是对数组的每一项进行处理,那么我们也可以用reduce 来实现数组的拼接,从而简化方法二的代码。
// reduce函数
const arr = [1, [2, 3], [4, 5, 6, [7, 8, 9, [10]]]];
function flatten(arr) {
return arr.reduce(function (total, current) {
return total.concat(Array.isArray(current) ? flatten(current) : current);
}, []);
}
const result = flatten(arr);
console.log(result, "result"); // [1,2,3,4,5,6,7,8,9,10]
可以看到 reduce 的第一个参数用来返回最后累加的结果,思路和第一种递归方法是一样的,但是通过使用 reduce 之后代码变得更简洁了,也同样解决了扁平化的问题。