求助纯 Javascript 代码优化 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
zzlit
V2EX    程序员

求助纯 Javascript 代码优化

  •  
  •   zzlit 2024-05-07 22:43:49 +08:00 1495 次点击
    这是一个创建于 547 天前的主题,其中的信息可能已经有所发展或是发生改变。
    const originArr = [ { value: 'q', children: [ { value: 'w', children: [{ value: 'e' }, { value: 'r' }] }, { value: 't', children: [{ value: '' }, { value: 'y' }, { value: 'u' }] }, { value: 'i' } ] }, { value: 'o' } ]; const targetMap = new Map([ ['q/w/e', undefined], ['q/t', undefined] ]); function formatArr(arr, path) { for (let idx = arr.length - 1; idx >= 0; idx--) { const i = arr[idx]; let mapKey = arr[idx].value; if (path) mapKey = `${path}${mapKey ? '/' : ''}${mapKey}`; let flag = true; let finish = false; targetMap.forEach((value, key) => { if (key === mapKey) { finish = true; } else { const index = key.indexOf(mapKey); if (flag && index === 0) flag = false; } }); if (finish) continue; if (flag) { arr.splice(idx, 1); continue; } if (i.children) formatArr(i.children, mapKey); } } const copyArr = JSON.parse(JSON.stringify(originArr)); formatArr(copyArr); console.log(originArr, copyArr); 

    作用是根据一个 map 对象去找一个数组里面嵌套的值,表达可能不太清楚,代码能直接跑起来,输出一眼能看出来是干嘛的。求助大佬们这段代码怎么优化?感觉有很大的优化空间

    SHF
        1
    SHF  
       2024-05-07 23:29:45 +08:00   1
    笑死,连要解决的问题都没法描述清楚,直接丢了一坨代码要人看输出去猜,你这个要优化的不是代码,是你编程的思路。
    summerwar
        2
    summerwar  
       2024-05-07 23:42:28 +08:00
    你直接把代码贴给 AI 吧,然后他会帮你优化下
    LavaC
        3
    LavaC  
       2024-05-07 23:43:29 +08:00
    zsh2517
        4
    zsh2517  
       2024-05-08 00:19:57 +08:00
    贴个运行结果

    ![]( https://sm.ms/image/y1icwg9HCLaRq7N)

    代码读不下去。从运行结果以及粗略扫过的代码来看。大概是

    targetMap 定义了一些路径(这里没必要叫做 map ,没用到 value )。
    originArr 是一个数字,假设这里的类型是 obj ,大概相当于是 interface obj {value: string, children?: obj[])

    然后,对 map 里面每一项 key ,按照 obj.value 作为目录名的完整路径,选择前缀能匹配 obj.value 的东西保留,其他删掉
    zzlit
        5
    zzlit  
    OP
       2024-05-08 07:54:42 +08:00 via Android
    @SHF v2 贴图不太方便,不然直接贴图了。我想的是 f12 贴代码就能看到运行输出结果了,不过确实我也还是需要描述一下解决的问题的,不然每个人读代码都会有不同的见解
    zzlit
        6
    zzlit  
    OP
       2024-05-08 07:56:38 +08:00 via Android
    @LavaC 感谢大佬
    zzlit
        7
    zzlit  
    OP
       2024-05-08 08:00:07 +08:00 via Android
    @zsh2517 确实应该直接描述问题然后再贴代码比较合适,直接贴代码会读不下去
    zsh2517
        8
    zsh2517  
       2024-05-08 11:44:16 +08:00
    @zzlit #7 主要最近比较忙。本来想写一下试试,打开 IDE 看了一会,不想动脑子了
    x4storm
        9
    x4storm  
       2024-05-08 13:18:34 +08:00
    原始的代码确实难读:手动 for 循环;各种 flag 用于控制循环。这些面向过程式的编程风格极大的增加了阅读难度。

    以下是 AI 优化过的代码,利用 js 的函数式编程特性,可以以更易读的方式组织代码:
    主要的优化点是,用 filter 和 some 代替冗长的 for 循环。这里面的 Map 确实不是必要的,如果换成 string array 的话看起来会更简单一点。

    ```Javascript
    const originArr = [
    { value: "q", children: [{ value: "w", children: [{ value: "e" }, { value: "r" }] }, { value: "t", children: [{ value: "" }, { value: "y" }, { value: "u" }] }, { value: "i" }] },
    { value: "o" },
    ];

    const targetMap = new Map([
    ["q/w/e", undefined],
    ["q/t", undefined],
    ]);

    function formatArr(arr, path = '') {
    return arr.filter(item => {
    const currentPath = path ? `${path}/${item.value}` : item.value;

    // Check if the current path is needed
    if (targetMap.has(currentPath)) {
    return true;
    }

    // Check if any target path starts with the current path
    const isPrefix = Array.from(targetMap.keys()).some(key => key.startsWith(currentPath));
    if (!isPrefix) {
    return false;
    }

    // Recursively filter children if they exist
    if (item.children) {
    item.children = formatArr(item.children, currentPath);
    }

    return true;
    });
    }

    const copyArr = formatArr(JSON.parse(JSON.stringify(originArr)));
    console.log(originArr, copyArr);
    ```
    zzlit
        10
    zzlit  
    OP
       2024-05-08 13:49:03 +08:00
    @x4storm 多谢大佬,学习了
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     1249 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 24ms UTC 17:24 PVG 01:24 LAX 09:24 JFK 12:24
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86