前端手写函数 -- 手写flat的递归与迭代的两种思路

前端手写函数 – 手写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);
});

如果有更好的方法解决涉及对象引用的对象数组，可以在评论区留言…,