持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第23天，点击查看活动详情

在我们开发中，前端经常需要对JSON数组进行操作，对数据进行去重，求差集，并集，交集等，方法也有很多...我们一起看看吧

首先定义两个数组对象arr1和arr2

let arr1 = [
    {
      id: "1",
      name: "A"
    },
    {
      id: "2",
      name: "B"
    },
    {
      id: "3",
      name: "C"
    },
    {
      id: "4",
      name: "D"
    }
];
let arr2 = [
    {
      id: "2",
      name: "B"
    },
    {
      id: "3",
      name: "C"
    },
    {
      id: "4",
      name: "D"
    }
];

去重

去重就是首先定义一个新的空数组，遍历原数组，判断新数组里面没有这个item，没有就push进去，否则就返回。

// 去重
function listRemoveRepeat(x) {
let result = [];
for (let i = 0; i < x.length; i++) {
  let flag = true;
  let temp = x[i];
  for (let j = 0; j < result.length; j++) {
    if (temp.id === result[j].id) {
      flag = false;
      break;
    }
  }
  if (flag) {
    result.push(temp);
  }
}
return result;
}

用es6方法去重

说到去重，我们可以想到es6中的set可以对数组进行去重。

// 数组对象去重
arrayToRepeat(arr) {
    let map = new Map();
    for (let item of arr) {
        if (!map.has(item.id)) {
            map.set(item.id, item);
        }
    }
    return [...map.values()];
},

并集

求两个数组的并集，直接用数组的concat方法，连接2个数组， arr.concat(arr1)

// 并集
function listConcat(x, y) {
    return x.concat(y);
}

差集

遍历2个数组，定义临时变量temp是数组2中的第i个，判断两个数组的值是否相同

// 差集
function listDifference(x, y) {
let clone = x.slice(0);
for (let i = 0; i < y.length; i++) {
  let temp = y[i];
  for (let j = 0; j < clone.length; j++) {
    if (temp.id === clone[j].id) {
      clone.splice(j, 1);
    }
  }
}
return clone;
}

交集

// 交集
function listIntersection(x, y) {
    let result = [];
    for (let i = 0; i < y.length; i++) {
      let temp = y[i];
      for (let j = 0; j < x.length; j++) {
        if (temp.id === x[j].id) {
          result.push(temp);
          break;
        }
      }
    }
    return result;
}

for in 和 for of

for in 一般用于遍历对象Object，for in遍历的是数组的索引，对象的属性，以及原型链上的属性
for of 用于遍历数组Array、Set 和 Map，可以跟break、continue和return配合使用

const arr = [1,2,3,4]
// for ... in
for (const key in arr){
    console.log(key) // 输出 0,1,2,3
}
 
// for ... of
for (const key of arr){
    console.log(key) // 输出 1,2,3,4
}

数组splice

splice方法用于添加或删除数组中的元素

*array*.splice(*index*,*howmany*,*item1*,.....,*itemX*)

index 必须的，从何处添加/删除元素，开始插入和（或）删除的数组元素的下标，必须是数字
howmany 可选。规定应该删除多少元素。必须是数字，但可以是 "0"
item1 可选。要添加到数组的新元素

JSON数组的操作

去重

并集

差集

交集

for in 和 for of

数组splice