如何模拟一个flat

451 阅读1分钟

首先了解下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(); // 数组浅拷贝
}