JavaScript的json数组去重、删重

文章展示了如何使用JavaScript的map、filter和reduce方法来实现两个json数组的删重以及一个json数组的去重。还提供了找出两个Json数组相同属性和值的方法,以及将对象转换为json数组的示例。
摘要由CSDN通过智能技术生成

JavaScript两个json数组删重(使用map+filter)

<template>
  <div>两个json数组删重</div>
</template>
<script>
export default {
  mounted() {
    this.testFn()
  },
  methods: {
    testFn() {
      let arr1 = [
        {
          "id": 1,
          "code": "name",
        },
        {
          "id": 2,
          "code": "age"
        },
        {
          "id": 3,
          "code": "addr"
        },
        {
          "id": 4,
          "code": "other"
        }
      ]
      let arr2 = [
        {
          "id": 1,
          "code": "name",
        },
        {
          "id": 2,
          "code": "age"
        },
      ];
      // 调用封装的方法
      this.delJson(arr1, arr2, "id");
    },
    /**
     * 两个json数组删重
     * @param arr1 数组1
     * @param arr2 数组2
     * @param attrName 通过哪个属性删重
     * @return 删重的结果
     */
    delJson(arr1, arr2, attrName) {
      let arr = arr2.map(i => i[attrName])
      let result = arr1.filter(i => !arr.includes(i[attrName]))
      console.log("数组1: ", arr1);
      console.log("数组2: ", arr2);
      console.log("删重后的结果: ", result);
      return result;
    }
  }
}
</script>


结果
在这里插入图片描述

JavaScript一个json数组去重(使用filter)

<template>
  <div>1个json数组去重</div>
</template>
<script>
export default {
  mounted() {
    this.testFn()
  },
  methods: {
    testFn() {
      let arr1 = [
        {
          "id": 1,
          "code": "name",
        },
        {
          "id": 2,
          "code": "age"
        },
        {
          "id": 1,
          "code": "addr"
        },
        {
          "id": 4,
          "code": "other"
        }
      ]
      // 调用封装的方法
      this.uniqueJSON(arr1, "id");
    },
    /**
     * json数组去重
     * @param arr 要去重的json数组
     * @param attrName 通过哪个属性去重
     * @return 去重的结果
     */
    uniqueJSON(arr, attrName) {
      let result = arr.filter((item, index, self) => {
        return index === self.findIndex((t) => (t[attrName] === item[attrName]));
      });
      console.log("原json数组: ", arr);
      console.log("去重结果: ", result);
      return result;
    }
  }
}
</script>

结果
在这里插入图片描述

JavaScript一个json数组去重(使用reduce)

<script>
    let arr1 = [
        {"id": 1, "code": "name"},
        {"id": 2, "code": "age"},
        {"id": 1, "code": "addr"},
        {"id": 4, "code": "other"}
    ];
    // 调用封装的方法
    let result = uniqueJSON(arr1, "id");
    console.log("原json数组: ", arr1);
    console.log("去重结果: ", result);

    /**
     * json数组去重
     * @param arr 要去重的json数组
     * @param attrName 通过哪个属性去重
     * @return 去重的结果
     */
    function uniqueJSON(arr, attrName) {
        let obj = {};
        let result = arr1.reduce((previousValue, currentValue) => {
            (obj[currentValue[attrName]] ? "" : (obj[currentValue[attrName]] = true)) && previousValue.push(currentValue);
            return previousValue;
        }, []);
        return result;
    }
</script>

结果
在这里插入图片描述

JavaScript找出两个Json数组相同的属性和值(使用reduce)

<script>
    /*找出两个Json数组相同的属性和值*/
    let arr1 = [
        {a: 1},
        {a: 2},
        {a: 3},
        {a: 4},
        {a: 5},
    ];
    let arr2 = [
        {a: 1},
        {a: 3},
        {a: 5},
        {a: 7},
    ];
    let res = arr1.reduce((accumulator, currentValue) => {
        if (arr2.some(element => element.a === currentValue.a)) {
            accumulator.push(currentValue);
        }
        return accumulator;
    }, []);
    console.log(res); // [{a: 1},{a: 3},{a: 5}]
</script>

结果
在这里插入图片描述

JavaScript对象变json数组

<script>
    // 用JavaScript将exampleData数据变成exampleRes数据
    let exampleData = {
        "0:00": {
            id: 1
        },
        "2:00": {
            id: 2
        },
        "4:00": {
            id: 3
        }
    }
    let exampleRes = [
        {
            id: 1,
            time: "0:00"
        },
        {
            id: 2,
            time: "2:00"
        },
        {
            id: 3,
            time: "4:00"
        },
    ];
    let res = Object.entries(exampleData).map(element => {
        return {
            id: element[1].id,
            time: element[0]
        }
    });
    console.log(res);
</script>

结果
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码上暴富

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值