JavaScript 实现数组对象差集对比与替换逻辑

<!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" rel="external nofollow" >
  <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>