快捷導(dǎo)航

js獲取兩個(gè)數(shù)組對(duì)象的差集實(shí)現(xiàn)方法

更新時(shí)間：2023年08月03日 11:59:24 作者：我的一個(gè)道姑朋友

這篇文章主要為大家介紹了js獲取兩個(gè)數(shù)組對(duì)象的差集實(shí)現(xiàn)方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

獲取兩個(gè)數(shù)組對(duì)象中都沒不包含的元素

獲得兩個(gè)數(shù)組對(duì)象的差集，就是獲取兩個(gè)數(shù)組對(duì)象中都沒不包含的元素:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>獲得兩個(gè)數(shù)組對(duì)象的差集</title>
  <!--引入 element-ui 的樣式，-->
  <link rel="stylesheet"  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">
      原數(shù)組：
      <div v-for="(item, index) in selectedText" :key="index">{{item}}</div>
    </div>
    <div class="item">
      和原數(shù)組對(duì)比的數(shù)組：
      <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 {
          // 原數(shù)組
          selectedText: [
            {
              "parentId": "1665538708874002433",
              "childId": [
                "0",
                "1",
                "2",
                "3",
                "4",
                "5",
                "6",
                "7"
              ]
            },
            {
              "parentId": "1665538708861419522",
              "childId": [
                "0",
                "1",
                "2",
                "3",
                "4",
                "5"
              ]
            }
          ],
          // 要對(duì)比的數(shù)組
          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));
          // 轉(zhuǎn)換成對(duì)象，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] || [];
            // 求兩個(gè)數(shù)組的差集
            const subtraction = parentChildId.filter((v) => !childId.includes(v));
            const parentChildIdIndex = this.differenceSet.findIndex(
              (v) => v.parentId === item.parentId
            );
            if (parentChildIdIndex >= 0) {
              // 找到和原數(shù)組有相同有parentId并且有差集的那一項(xiàng)，替換成差集
              this.differenceSet[parentChildIdIndex].childId = subtraction;
            }
          });
          console.log(this.differenceSet, '差集')
        },
      }
    })
  </script>
</body>
</html>