首先了解下flat的概念 Array.prototype.flat() - JavaScript | MDN
将数组元素展开一层
1、concat + 扩展运算符
const arr = [1, 2, 4, [1, 2, [1, 3, [1, 2, 3]]], 5];
// 扩展运算符 + concat
[].concat(...arr)
// [1, 2, 4, 1, 2, [1, 3, [1, 2, 3]]], 5];
2、concat + apply
apply的语法:func.apply(thisArg, [argsArray])
主要是利用 apply 在绑定作用域时,传入的第二个参数是一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 func 函数。也就是在调用 apply 函数的过程中,会将传入的数组一个一个的传入到要执行的函数中,也就是相当对数组进行了一层的展开。
const arr = [1, 2, 4, [1, 2, [1, 3, [1, 2, 3]]], 5];
// concat + apply
[].concat.apply([], arr);
// [1, 2, 4, 1, 2, [1, 3, [1, 2, 3]]], 5];
将数组元素展开n层
1、如果数组元素都是数字的话,可以用 toString + split 的方法:
const arr = [1, 2, 4, [1, 2, [1, 3, [1, 2, 3]]], 5];
// toString + split
arr.toString().split(',').map(it => parseInt(it))
// [1, 2, 4, 1, 2, 1, 3, 1, 2, 3, 5]
2、使用 reduce 实现 flat 函数
之前对 reduce 的刻板印象是,用于比较前后数字的大小,直到现在才发现我错了... 😞
然后用
reduce + concat 的方法递归实现 flat :
function flatDeep(arr, depth = 1) {
return depth > 0
? arr.reduce(
(total, currVal) => total.concat(
Array.isArray(currVal) ? flatDeep(currVal, depth - 1) : currVal
), []
)
: arr.slice(); // 数组浅拷贝
}