修复基于val.js.url的数组去重函数冲突及优化方案

原代码的问题分析 #

你当前的函数两次调用出现冲突的核心原因是：Array.reverse()是原地修改数组的方法，第一次调用dupfix时，传入的原数组会被直接反转修改，第二次调用时处理的是已经被反转过的数组，自然无法得到正确结果。

修复原代码的方案 #

只需要在反转前先复制原数组的副本，避免修改原数组即可：

function dupfix(arr) {
  // 复制原数组生成副本，后续操作不会影响原数组
  return [...arr].reverse().filter(val => {
    if (!this.hasOwnProperty(val.js.url)) {
      return this[val.js.url] = true
    }
    return false
  }, {}).reverse()
}

更优的实现方式 #

不需要依赖反转数组，直接使用reduce构建映射表，让后续出现的同url项自动覆盖前面的，最终提取映射表的值即可，逻辑更清晰且性能更优：

function dupfix(arr) {
  // 遍历数组，以js.url为键存储对象，后续项自动覆盖旧项，保留最新的
  const uniqueMap = arr.reduce((acc, current) => {
    acc[current.js.url] = current;
    return acc;
  }, {});
  // 将映射表的值转为数组返回
  return Object.values(uniqueMap);
}

原理说明 #

• 遍历数组时，每个对象以其js.url作为键存入对象uniqueMap，如果遇到相同url的对象，后出现的会直接覆盖之前存储的，确保每个url对应的都是数组中**最后出现（最新）**的对象。
• 最后通过Object.values()将映射表中的对象转为数组，得到去重后的结果。

这个方法无需修改原数组，仅需一次遍历即可完成去重，相比原方案的三次遍历（反转、过滤、再反转）效率更高。

内容的提问来源于stack exchange，提问作者blueway