js获得两个数组对象的差集

获得两个数组对象的差集，就是获取两个数组对象中都没不包含的元素:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>获得两个数组对象的差集</title>
  <!--引入 element-ui 的样式，-->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  <!-- 引入element 的组件库-->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #app {
      margin: 50px;
    }

    .item {
      margin-bottom: 20px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="item">
      原数组：
      <div v-for="(item, index) in selectedText" :key="index">{{item}}</div>
    </div>

    <div class="item">
      和原数组对比的数组：
      <div v-for="(item, index) in brightTextArr" :key="index">{{item}}</div>
    </div>
    <div class="item">
      差集：
      <div v-for="(item, index) in differenceSet" :key="index">{{item}}</div>
    </div>

  </div>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          // 原数组
          selectedText: [
            {
              "parentId": "1665538708874002433",
              "childId": [
                "0",
                "1",
                "2",
                "3",
                "4",
                "5",
                "6",
                "7"
              ]
            },
            {
              "parentId": "1665538708861419522",
              "childId": [
                "0",
                "1",
                "2",
                "3",
                "4",
                "5"
              ]
            }
          ],
          // 要对比的数组
          brightTextArr: [
            {
              "parentId": "1665538708861419522",
              "childId": [
                "3",
                "4",
                "5",
                '9'
              ]
            },
            {
              "parentId": "1665538708869808130",
              "childId": [
                "0",
                "1",
                "2",
                "3",
                "4",
                "5",
                "6",
                "7"
              ]
            }
          ],
          // 差集
          differenceSet: []

        }
      },
      created() {
        this.subtractionFun(this.selectedText, this.brightTextArr)
      },
      methods: {

        subtractionFun(selectedText, brightTextArr) {
          this.differenceSet = JSON.parse(JSON.stringify(brightTextArr));
          // 转换成对象，parentId为属性名，childId为属性值,
          // 格式为 { 1665538708861419522: ['3', '4', '5', '9'] }
          const brightTextMap = this.differenceSet.reduce((pre, cur) => {
            return {
              ...pre,
              [cur.parentId]: cur.childId,
            };
          }, {});
          selectedText.forEach((item, index) => {
            const childId = item.childId || [];
            const parentChildId = brightTextMap[item.parentId] || [];
            // 求两个数组的差集
            const subtraction = parentChildId.filter((v) => !childId.includes(v));
            const parentChildIdIndex = this.differenceSet.findIndex(
              (v) => v.parentId === item.parentId
            );
            if (parentChildIdIndex >= 0) {
              // 找到和原数组有相同有parentId并且有差集的那一项，替换成差集
              this.differenceSet[parentChildIdIndex].childId = subtraction;
            }
          });
          console.log(this.differenceSet, '差集')
        },
      }
    })
  </script>

</body>

</html>

遇到的问题：
1.将要对比的数组对象转换成以parentId为属性名，childId为属性值格式的对象，这样好对比。

格式为 { 1665538708861419522: ['3', '4', '5', '9'] }

2.需要找到和原数组有相同有parentId并且有差集的那一项，替换成差集

js获得两个数组对象的差集

我的一个道姑朋友

引用和评论

微信小程序:修改对象数组中的某个元素

Vue.js-Vue实例

2025年最新反编译微信小程序的教程及工具

你可能不知道的图片加载相关知识

更强大、更灵活！ defineModel 重新定义双向绑定

使用CSS给标题添加书名号并超出省略

Flex 布局学习总结（对齐方式）