js findIndex方法，向复杂数组添加数据时查看是否有重复

最新推荐文章于 2025-03-26 16:05:55 发布

原创最新推荐文章于 2025-03-26 16:05:55 发布 · 860 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

js方法专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何利用JavaScript的findIndex方法快速检查数组中是否存在特定对象，并在不存在时将其添加。示例展示了在复杂数组中查找具有相同id的对象，如果未找到则将其添加到数组中。通过这种方法，可以避免使用循环进行繁琐的查找操作。

当我们向复杂数组中添加对象时，想要检查数组中是否存在相同的对，使用循环过于麻烦，

这时我们可以使用findIndex方法

<script>
      let arr = [
        { id: "1", name: "晓明", age: "15" },
        { id: "3", name: "小白", age: "35" },
        { id: "2", name: "大黄", age: "18" },
        { id: "4", name: "小绿", age: "13" },
      ];
      let aee = { id: "1", name: "小红", age: "15" };
      let acc = { id: "5", name: "小红", age: "15" };
      let index = arr.findIndex((e) => {
        return e.id == acc.id;
      });
      let indexTow = arr.findIndex((e) => {
        return e.id == aee.id;
      });
      // 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
      // 如果没有符合条件的元素返回 -1
      if (index < 0) {
        arr.push(acc);
      }
      if (indexTow < 0) {
        arr.push(aee);
      }
      console.log("index:", index);
      console.log("indexTow:", indexTow);
      console.log(arr);
    </script>

此时控制台打印：

index: -1

indexTow: 0

(5) [{…}, {…}, {…}, {…}, {…}]
1. 0: {id: '1', name: '晓明', age: '15'}
2. 1: {id: '3', name: '小白', age: '35'}
3. 2: {id: '2', name: '大黄', age: '18'}
4. 3: {id: '4', name: '小绿', age: '13'}
5. 4: {id: '5', name: '小红', age: '15'}
6. length: 5
7. [[Prototype]]: Array(0)