高频js手写题之实现数组扁平化、深拷贝、总线模式

本文链接：https://blog.youkuaiyun.com/helloworld1024fd/article/details/127916152

本文介绍了JavaScript中的三道常见手写题：数组扁平化、深拷贝和事件总线（发布订阅模式）。分别讲解了各种实现方式，包括直接使用flat、递归、some结合扩展运算符和concat、转换字符串再操作等方法实现数组扁平化；浅拷贝和深拷贝的区别及实现，特别处理了循环引用的情况；以及事件总线的工作原理和on、off、emit方法的实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

古人学问无遗力，少壮工夫老始成。纸上得来终觉浅，绝知此事要躬行。看懂一道算法题很快,但我们必须将这道题的思路理清、手写出来。

三道js手写题的思路和代码实现

数组扁平化

演示效果

将[1, [1, 2], [1, [2]]] 变成 [1, 1, 2, 1, 2]

第一种：直接使用.flat

console.log([1, [1,2],[1,[2]]].flat(3));

可以将多维数组，降维，传的参数是多少就降多少维
一般直接传参数为 Infinity(简单粗暴) 第二种: 递归方法的方法 + 借用数组的API完成

(1)

function flattten(arr) {
   
    var result = [];
    for(var i = 0, len = arr.length; i < len; i++) {
   
        if(Array.isArray(arr[i])) {
     //  Array.isArray 判断是否为数组
            result = result.concat(flattten(arr[i]))  // concat() 方法用于连接两个或多个数组。
        } else {
   
            result.push(arr[i])
        }
    }
    return result;
}

(2)

function flatten(arr) {
   
    return arr.reduce((pre, cur) => {
   
        return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);
    }, []);
}

第四种: some + …(扩展运算符) + .concat

function flattten(arr) {
   
    // some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
    // some() 方法会依次执行数组的每个元素：
    // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
    // 如果没有满足条件的元素，则返回false。

    while(arr.some(item => Array.isArray(item))) {
   
        console.log(arr)
        arr = [].concat(...arr)
        // ... 会将多维数组降维一层
    }
    return arr
}

第五种: 将多维数组转换成字符串，在进行操作

(1)

function flatten(arr) {
   
    let str = arr.toString();
    str = str.replace(/(\[|\])/g, '').split(',').map(Number)
    return str;
}

/([|])/g 正则表达式 () 代表一个分组, \是转义字符(因为正则表达式规则中有 [ 和 ]的语法, 用\就可以让规则忽略[和]) /g 为全局匹配, 只要遇到了[ 和 ], 就用’'这个来代替。
replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
(2)

function flatten(arr) {
   
    let result = arr.toString();
    result = result.replace(/(\[|\])/g, '');
    result =  '[' + result + ']';
    result = JSON.parse(result);
    // JSON.parse()可以把JSON规则的字符串转换为JSONObject
    return result;
}