去除数组对象中重复的值

原创已于 2022-05-17 15:07:16 修改 · 1.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #json

于 2020-10-15 16:11:21 首次发布

前端 javascript 专栏收录该内容

32 篇文章

订阅专栏

本文介绍如何使用JavaScript编写一个通用函数，通过字符串化对象属性并排序，从数组中删除重复的对象实例。适合处理接口返回数据中避免渲染重复项的需求。

问题背景：

当我们请求接口拿到数据渲染到页面上时，我们不想将重复的数据也渲染到页面上，这时我们就需要将返回的数据做一些简单的处理。
如下是返回的数据，并非真实数据，仅作演示用：

	var data = [
		{ name: "小三", age: 20 },
        { name: "小王", age: 10 },
        { name: "小王", age: 10 },
        { name: "小张", age: 15 },
       	{ name: "小张", age: 15 },
     ];

看到上面data中的数据有些重复的，怎么将重复的数据去除呢？封装一个通用方法来实现我们的需求

function deteleObject(obj) {
  var uniques = [];
  var stringify = {};
  for (var i = 0; i < obj.length; i++) {
    var keys = Object.keys(obj[i]);
    keys.sort(function (a, b) {
      return Number(a) - Number(b);
    });
    var str = "";
    for (var j = 0; j < keys.length; j++) {
      str += JSON.stringify(keys[j]);
      str += JSON.stringify(obj[i][keys[j]]);
    }
    if (!stringify.hasOwnProperty(str)) {
      uniques.push(obj[i]);
      stringify[str] = true;
    }
  }
  uniques = uniques;
  return uniques;
}
console.log(deteleObject(data));