共计 2552 个字符,预计需要花费 7 分钟才能阅读完成。
前一阵面试大厂的前端岗,让手撸数组的 Flat 办法, 很遗憾过后太菜没有什么思路,面试后仔细分析了一下,发现这道算法题齐全没有设想中的那么难,确实是一套纯根底题,应用数组的 reduce 联合递归能够很轻松的实现,这里简略介绍下实现思路,以飨读者!
前置常识
数组的 flat 办法:
Flat()俗称把数组拍平的办法。
应用 flat 办法时能够传递一个数字,代表拍平嵌套数组的层数,不传值的话则为默认值 1。如果咱们传递的参数为Infinity,则会将所有嵌套数组拍平。如果数组中有空元素,则拍平后的数组也不蕴含空元素
let arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]
let arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
let arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
// 应用 Infinity,可开展任意深度的嵌套数组
let arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
//flat 会移除数组中的空项
let arr5 =[1,2,3,,5,[6,7]]
console.log(arr5.flat())
//[1, 2, 3, 5, 6, 7]
数组的 Reduce 办法:
第一次接触到 Reduce 是在学习 Hadoop 的时候,那时候的了解是对 Map 后的数据各自执行 Reduce 解决,而后将处理结果汇总返回。JS 中的 Reduce 与这个概念相似,就是通过一个办法对数组中的元素逐个解决,而后将后果逐个叠加,最初将后果返回进来。比方咱们想要对数组中的元素执行平方后求和,用 Reduce 就很容易实现,代码如下:
let arr6=[1,2,3];
console.log(arr6.reduce((prev,curr)=>prev+curr*curr,0));
猛一看确实让人有点费解,大可不必。想要搞清楚 reduce 的应用形式第一步要搞清楚 reduce 传递的参数,为如下四个:
参数名 | 含意 |
---|---|
previousValue | 上一个元素(initialValue 或者数组第一项) |
currentValue | 以后元素 |
currentIndex | 以后元素的 index |
array | 执行 reduce 办法的数组对象(个别不必) |
initialValue | 执行 reduce 办法的初始值 |
在 TS 中,对 Reduce 办法定义的类型如下:
reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;
reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;
咱们能够看到,这里 TS 定义的 reduce 数据类型有两种调用形式,一种为蕴含初始值的调用形式,一种是不提供初始值的调用形式,这两种有什么区别?这里咱们不卖关子,间接看例子:
let arr6=[2,2,3]
console.log(arr6.reduce((prev,curr,index)=>{console.log(index)
return prev+curr*curr
}))
// 输入为:1 2 15
let arr6=[2,2,3]
console.log(arr6.reduce((prev,curr,index)=>{console.log(index)
return prev+curr*curr
},0))
// 输入为: 0 1 2 17
能够分明地看到,提供 initialValue 后,reduce 会从 index 为 0 的元素开始执行回调办法,而不提供 initialValue 则会将跳过 index 为 0 的元素,间接从 index 为 1 的元素开始执行回调办法(行将 index 为 0 的元素设置为 initialValue)。
算法实现
1. 应用 reduce 办法实现提取深度为 1 的数组
function MyFlat(arr){return arr.reduce((prev,curr)=>prev.concat(curr),[]);
}
let arr=[1,2,3,4,5,6,[7,8,9]];
console.log(MyFlat(arr));
//[1, 2, 3, 4, 5, 6, 7, 8, 9]
2. 应用数组的解构赋值实现提取深度为 1 的数组
function MyFlat(arr){return [].concat(...arr)
}
let arr=[1,2,3,4,5,6,[7,8,9]]
console.log(MyFlat(arr))
ps:这个办法有点炫 ^_^
3. 应用 reduce+ 递归实现多层数组的提取
后面两个实现的是不传参的 flat 办法,也即是对数组执行层级为 1 的提取。如果咱们想指定提取的层级,或者应用 Infinity 提取任意层数组怎么做呢?看代码:
function MyFlat(arr,deep=1){return deep>0 ? arr.reduce((prev,curr)=>prev.concat(Array.isArray(curr)?MyFlat(curr,deep-1):curr),[]):arr.slice()}
console.log(MyFlat([1,2,3,[4,5,[6,7,8,[9,10]]]],Infinity))
//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
代码很短,然而很有嚼头。咱们在参数里减少了一个变量 deep 代表默认深度,给他一个默认值 1。程序会首先判断 deep 的深度,如果深度大于零就执行前面的代码,否则返回数组的正本。
如果深度大于 0,咱们会用 initialValue 也就是空数组去 concat 数组外面的元素,在 concat 的时候咱们会判断以后元素是否为数组,如果是数组则递归执行 MyFlat 办法对子元素进行提取。这里不要忘了,咱们提供了初始值 ”[]”,所以其会从 index 为 0 的元素开始执行回调办法。
3. 应用生成器函数实现多层数组的提取
待续……