V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
zzlit
V2EX  ›  程序员

求助纯 JavaScript 代码优化

  •  
  •   zzlit · 211 天前 · 1137 次点击
    这是一个创建于 211 天前的主题,其中的信息可能已经有所发展或是发生改变。
    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 对象去找一个数组里面嵌套的值,表达可能不太清楚,代码能直接跑起来,输出一眼能看出来是干嘛的。求助大佬们这段代码怎么优化?感觉有很大的优化空间

    10 条回复
    SHF
        1
    SHF  
       211 天前   ❤️ 1
    笑死,连要解决的问题都没法描述清楚,直接丢了一坨代码要人看输出去猜,你这个要优化的不是代码,是你编程的思路。
    summerwar
        2
    summerwar  
       211 天前
    你直接把代码贴给 AI 吧,然后他会帮你优化下
    LavaC
        3
    LavaC  
       211 天前
    zsh2517
        4
    zsh2517  
       211 天前
    贴个运行结果

    ![]( 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
       210 天前 via Android
    @SHF v2 贴图不太方便,不然直接贴图了。我想的是 f12 贴代码就能看到运行输出结果了,不过确实我也还是需要描述一下解决的问题的,不然每个人读代码都会有不同的见解
    zzlit
        6
    zzlit  
    OP
       210 天前 via Android
    @LavaC 感谢大佬
    zzlit
        7
    zzlit  
    OP
       210 天前 via Android
    @zsh2517 确实应该直接描述问题然后再贴代码比较合适,直接贴代码会读不下去
    zsh2517
        8
    zsh2517  
       210 天前
    @zzlit #7 主要最近比较忙。本来想写一下试试,打开 IDE 看了一会,不想动脑子了😂
    x4storm
        9
    x4storm  
       210 天前
    原始的代码确实难读:手动 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
       210 天前
    @x4storm 多谢大佬,学习了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1037 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 123ms · UTC 19:38 · PVG 03:38 · LAX 11:38 · JFK 14:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.