JavaScript 前端数组中的对象去重。

w460270218 · 发表于 2023-3-11 16:31

[JavaScript] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const arr = [1, 3, 2, 1, 1, 2, 3];
      const newArr = [...arr];
      //   console.log([...new Set(arr)]);
      for (let i = 0; i < newArr.length; i++) {
        for (let j = i + 1; j < newArr.length; j++) {
          if (newArr[j] === newArr[i]) {
            newArr.splice(j, 1);
            j--;
          }
        }
      }
      console.log(newArr);

      // ----------------------------------------------

      const arr2 = [
        { a: 1, b: 2 },
        { b: 2, a: 1 },
        { a: 1, b: 2, c: { a: 1, b: 2 } },
        { b: 2, a: 1, c: { b: 2, a: 1 } },
      ];
      const newArr2 = [...arr2];
      //   判断数组中的每个值是不是对象格式
      const isObject = (val) => typeof val === "object" && val !== null;
      function equals(val1, val2) {
        // 如果都是对象的话执行
        if (isObject(val1) && isObject(val2)) {
          const keys1 = Object.keys(val1),
            keys2 = Object.keys(val2);
          // 判断连个对象的长度是否一致
          if (keys1.length !== keys2.length) {
            return false;
          }
          //   循环属性名的数组
          for (const k of keys1) {
            // 判断属性名在另外的数组里面存不存在
            if (!keys2.includes(k)) {
              return false;
            }
            // 如果属性在两个对象中都有的话，递归比较
            if (!equals(val1[k], val2[k])) {
              return false;
            }
          }
          return true;
        } else {
          return val1 === val2;
        }
      }
      for (let i = 0; i < newArr2.length; i++) {
        for (let j = i + 1; j < newArr2.length; j++) {
          if (equals(newArr2[i], newArr2[j])) {
            newArr2.splice(j, 1);
            j--;
          }
        }
      }
      console.log(newArr2);
    </script>
  </body>
</html>

my52pojie110 · 发表于 2023-3-11 16:34

可以，整理的很基础

Anima-No · 发表于 2023-3-11 18:41

这代码也太长了吧

w460270218 · 发表于 2023-3-11 19:41

Anima-No 发表于 2023-3-11 18:41
这代码也太长了吧

因为不是简单的数字或者字符串去重，所以逻辑复杂了一点，不光要判断数组中是不是对象和对象的长度是否一致，还判断了键值对是否一样，并且对象中嵌套的对象也判断了，所以代码逻辑长了一些。

Anima-No · 发表于 2023-3-11 20:41

w460270218 发表于 2023-3-11 19:41
因为不是简单的数字或者字符串去重，所以逻辑复杂了一点，不光要判断数组中是不是对象和对象的长度是否一 ...

w460270218 · 发表于 2023-3-11 20:54

Anima-No 发表于 2023-3-11 20:41
const arr = [1, 3, 2, 1, 1, 2, 3];
console.log(new Set(arr));

这个方法写的有问题吧，打印的结果是不能去重的。
[
{
      "id": 1
},
{
      "id": 2
},
{
      "id": 3
},
[
      {
         "id": 3
      },
      {
         "id": 4
      },
      {
         "id": 5
      }
]
]

我所说是将const arr2 = [
      { a: 1, b: 2 },
      { b: 2, a: 1 },
      { a: 1, b: 2, c: { a: 1, b: 2 } },
      { b: 2, a: 1, c: { b: 2, a: 1 } },
   ]
数组去重，  里面的 { a: 1, b: 2 },和 { b: 2, a: 1 },其实是重复的， { a: 1, b: 2, c: { a: 1, b: 2 } },和 { b: 2, a: 1, c: { b: 2, a: 1 } },其实也是重复的。最终打印结果应该是
[
{
      "a": 1,
      "b": 2
},
{
      "a": 1,
      "b": 2,
      "c": {
         "a": 1,
         "b": 2
      }
}
]

帐号		自动登录	找回密码
密码			注册[Register]

[学习记录] JavaScript 前端 数组中的对象去重。

[学习记录] JavaScript 前端数组中的对象去重。