前端手写函数 – 手写flat的递归与迭代的两种思路
描述:
数组扁平化 flat 函数的实现, 两个参数 数组nums, 展开层数deepth
示例:
输入:
nums = [1,2,[3,[4,5]], [6,[7]], 8] deepth = 1
输出:
result = [1,2,3,[4,5], 6,[7],8]
输入:
nums = [1,2,[3,[4,5]], [6,[7]], 8,[9,[10,[11,12]]]] deepth = 3
输出:
result = [1,2,3,4,5,6,7,8,9,20,11,12]
输入:
nums = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]] deepth = 2
输出:
result = [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, [1, 2, 3]]
应用:
数组扁平化的应用场景,数组扁平化一般在一些多维数组
的应用中会出现,
因为操作多维数组会较为麻烦,因此将多维数组扁平化
变为一维数组
后,
将大大简化我们对数组的操作。
这个题目也属于一道经典前端面试题,有很多种利用库函数巧解的做法,甚至可以直接调用ES6
的库函数flat
实现
const flats = (nums, deepth) =>{
return nums.flat(deepth);
}
但面试官肯定不希望这样没有思考
的回答,所以尽量手写体现一下自己的代码能力
和算法水平。
下面主要讲述两种手写flat 函数的实现
一. 递归
递归的思路很简单,遍历数组,如果数组内部出现数组,进行递归操作,直到不是数组类型或者层数达到所给参数的阈值,加入到答案数组中。
举例说明:
nums = [1,[2, 3]] deepth = 1
遍历到1 不是数组,直接插入到result中
遍历到[2, 3] 是数组, 递归[2, 3], 同时层数-1
遍历到2 ,3,直接插入即可
代码如下:
/**
* @description: 递归解决 数组扁平化flat
* @param {*} nums
* @param {*} deepth
* @return {*}
*/
function flat1(nums, deepth = 1){
// 如果是 无穷大,默认20层
if(deepth === Infinity){
deepth = 20;
}
// 校验参数
if(deepth <= 0){
return nums;
}
const result = [];
function flats(arr, deep){
arr.forEach(element => {
// 控制递归条件
if(Array.isArray(element) && deep > 0){
flats(element, deep - 1);
}else{
result.push(element)
}
});
}
flats(nums,deepth)
return result;
}
二. 迭代
递归转迭代一般就比较难思考,这里我们可以引入一个队列的概念,栈也可以(但是栈的思考方式不太好想
),层数最多有deepth 层,于是,可以把每层想象成一个状态,每次检查这个状态,并更新即可。
先说明一下队列,队列是一个先进先出
的数据结构,就像排队的过程一样,早排队的,完成之后,早离开队伍。
入队操作:
出队操作:
举例说明:
nums2 = [1,2,[3,[4,5]], [6,[7]], 8,[9,[10,[11,12]]]] deepth = 3
改变过程: 每次取出队列头部元素,进行处理(是数组就展开,不是数组跳过)之后,再入队
deepth = 1时,状态发生改变:
1 不处理 ,直接入队, 2 不处理 , 直接入队,插入到队尾
[3,[4,5]]处理变成 3 , [4, 5] 进行入队操作
…
状态变成 [1, 2, 3,[4,5], 6,[7], 8,9,[10,[11, 12]]]
deepth = 2 时,根据上面的状态进行再次改变:
状态变成 [1, 2, 3, 4, 5, 6, 7 , 8, 9 , 10, [11, 12]]
…
依此类推, 结果是[1, 2, 3, 4, 5, 6, 7 , 8, 9 ,10, 11, 12]
代码如下:
/**
* @description: 迭代 解决数组扁平化flat
* @param {*} nums
* @param {*} deepth
* @return {*}
*/
function flat2(nums, deepth = 1){
// 如果是 无穷大,默认20层
if(deepth === Infinity){
deepth = 20;
}
// 校验参数
if(deepth <= 0){
return nums;
}
// 用队列层数的思想代替递归
const queue = [...nums];
let deep = 0;
while(deep <= deepth){
deep += 1;
for(let i = 0, n = queue.length;i < n; i ++) {
const top = queue.shift(); // 取出队头元素
// 如果队头元素是数组
if(Array.isArray(top) && deep <= deepth){
// 展开后进行入队
queue.push(...top);
}else{
// 如果不是array, 直接入队
queue.push(top)
}
}
}
return queue;
}
单元测试
test('test flat1 function', () => {
let nums1 = [1,2,[3,[4,5]], [6,[7]], 8] ;
let nums2 = [1,2,[3,[4,5]], [6,[7]], 8,[9,[10,[11,12]]]];
let nums3 = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]]];
let res1 = flat1(nums1,1);
let res2 = nums1.flat(1);
expect(res1).toEqual(res2);
res1 = flat1(nums2,3), res2 = nums2.flat(3);
expect(res1).toEqual(res2);
res1 = flat1(nums3,2), res2 = nums3.flat(2);
expect(res1).toEqual(res2);
});
test('test flat2 function', () => {
let nums1 = [1,2,[3,[4,5]], [6,[7]], 8] ;
let nums2 = [1,2,[3,[4,5]], [6,[7]], 8,[9,[10,[11,12]]]];
let nums3 = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]]];
let res1 = flat2(nums1,1);
let res2 = nums1.flat(1);
expect(res1).toEqual(res2);
res1 = flat2(nums2,3), res2 = nums2.flat(3);
expect(res1).toEqual(res2);
res1 = flat2(nums3,2), res2 = nums3.flat(2);
expect(res1).toEqual(res2);
});
如果有更好的方法解决涉及对象引用的对象数组,可以在评论区留言
…,