根据其中一个键值删除重复的对象。

Question

我有一个只包含对象的数组，我希望根据它们的一个键值 val.js.url 来移除重复的对象，但希望保留其中最新的那个对象。因此，我在我的代码中使用了 reverse()。

我的数组:

[
  {
    "id": "js_1oc3uiteki22",
    "tab": {
      "title": "title 1",
      "url": "http://google.com"
    },
    "js": {
      "initiator": "https://google.com",
      "url": "http://url.com"
    }
  },
  {
    "id": "js_1oc3uiteki22",
    "tab": {
      "title": "title 2",
      "url": "http://google2.com"
    },
    "js": {
      "initiator": "https://google2.com",
      "url": "http://url.com"
    }
  }
]

期望结果：

[
  {
    "id": "js_1oc3uiteki22",
    "tab": {
      "title": "title 2",
      "url": "http://google2.com"
    },
    "js": {
      "initiator": "https://google2.com",
      "url": "http://url.com"
    }
  }
]

实际上，我有以下代码可以解决这个问题，但当我需要在同一个js文件中使用该代码2次时，我想这会产生冲突，并且在第二个数组中不能很好地清除重复项。

function dupfix(arr) {
  return arr.reverse().filter(val => {
    if (!this.hasOwnProperty(val.js.url)) {
      return this[val.js.url] = true
    }
    return false
  }, {}).reverse()
}
file = dupfix(file)

那么，我该如何修复上面的代码，或者有没有其他更好的方法？谢谢。

- blueway

---

为什么期望结果中的 url 是 http://url2.com，而不是原始地址中的 http://url.com？地址中没有数字 2。 - A1exandr Belan

sorry for typo, fixed - blueway

Answer 1

在其他替代方案中，我发现这个非常快捷， https://dev59.com/jlcO5IYBdhLWcg3wrDVq#61027136

function removeDuplicates(array, key) {
   let lookup = {};
   array.forEach(element => {
     lookup[element[key]] = element
   });
   return Object.keys(lookup).map(key => lookup[key]);
};

removeDuplicates(array,'objectKey');

- blueway

Answer 2

您可以使用以下方法来过滤重复项。

const myArr=[
  {
    "id": "js_1oc3uiteki22",
    "tab": {
      "title": "title 1",
      "url": "http://google.com"
    },
    "js": {
      "initiator": "https://google.com",
      "url": "http://url.com"
    }
  },
  {
    "id": "js_1oc3uiteki22",
    "tab": {
      "title": "title 2",
      "url": "http://google2.com"
    },
    "js": {
      "initiator": "https://google2.com",
      "url": "http://url2.com"
    }
  },
  {
    "id": "js_1oc3uiteki23",
    "tab": {
      "title": "title 3",
      "url": "http://google3.com"
    },
    "js": {
      "initiator": "https://google3.com",
      "url": "http://url3.com"
    }
  },
  {
    "id": "js_1oc3uiteki23",
    "tab": {
      "title": "title 4",
      "url": "http://google4.com"
    },
    "js": {
      "initiator": "https://google4.com",
      "url": "http://url4.com"
    }
  }
]


function removeDuplicates(arr) {
  let uniqueIds = [];
  var result = arr.slice().reverse().filter(item => {
       var isDuplicate = uniqueIds.includes(item.id);
          if (!isDuplicate) {
            uniqueIds.push(item.id);
            return item;
          }
       });
       
   return result;
}

console.log(removeDuplicates(myArr));

- Sandushi Dileka

Answer 3

您可以使用哈希分组来唯一标识对象：

const val = [{"id":"js_1oc3uiteki22","tab":{"title":"title 1","url":"http://google.com"},"js":{"initiator":"https://google.com","url":"http://url.com"}},{"id":"js_1oc3uiteki22","tab":{"title":"title 2","url":"http://google2.com"},"js":{"initiator":"https://google2.com","url":"http://url.com"}}];

const uniqs = val.reduce((r, item) => (r[item.js.url] = item, r), {});
const result = Object.values(uniqs);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0 }

- A1exandr Belan