Javascript之数组去重

一维数组去重

方法一【forEach + includes】

遍历当前数组，并创建一个新数组, 使用数组includes属性，如果包含其中一项，说明该值是重复的，不作处理；反之，push进去

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 5, 4, 3, 2, 1]
 
function duplicateArray(arr) {
   let newArr = [];
   arr.forEach(p => {
     if (!newArr.includes(p)) {
       newArr.push(p);
     }
   })
   return newArr;
 }

duplicateArray(data); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

方法二 【forEach + indexOf】

遍历当前数组，并创建一个新数组, 使用数组indexOf属性，如果不存在（=== -1）push进去; 反之，不做任何处理（有重复项）

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 5, 4, 3, 2, 1]

function duplicateArray(arr) {
  let newArr = [];
  arr.forEach(p => {
    if (newArr.indexOf(p) === -1) {
      newArr.push(p);
    }
  })
  return newArr;
}

duplicateArray(data); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

方法三 【reduce + includes】

利用reduce方法去重，设置初始值为空数组，再用includes方法判断

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 5, 4, 3, 2, 1]

function duplicateArray(arr) {
  return arr.reduce((item, next) => {
    if (!item.includes(next)) {
      item.push(next);
    }
    return item;
  }, [])
}

duplicateArray(data); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

方法四 【ES6 Set】

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 5, 4, 3, 2, 1]

function duplicateArray(arr) {
	return [...new Set(arr)];
}

duplicateArray(data); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

方法五 【filter + indexOf】

利用数组相同值索引的位置(indexOf)来判断, 如果第二次(后面多次)的indexOf !== 第一次的indexOf, 说明是重复的；如果 === 一直成立，说明该值只有一次，再用filter方法过滤

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 5, 4, 3, 2, 1]

function duplicateArray(arr) {
	return arr.filter((val, i, arr) => {
  	return arr.indexOf(val) === i;
  })
}
duplicateArray(data); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

对象数组去重

方法【reduce + find】

• 创建一个空对象obj, 用于保存每个对象值，将每次不相同的value值当做key(方便与后面项进行判断)
• 对对象数组使用reduce方法遍历
• 如果数组某一项下面的value不在obj的key里面，则说明此项是不重复的，将obj设置一个状态(方便下次判断), 并将当前项push到item里面； 反之，不做任何处理(已重复)

const data = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }]

function duplicateArray(arr, objectKeyName) {
  let obj = {};
  return arr.reduce(function(item, next) {
    // [简写] obj[next[objectKeyName]] ? '' : obj[next[objectKeyName]] = true && item.push(next);
    if (!obj[next[objectKeyName]]) {
      obj[next[objectKeyName]] = true;
      item.push(next);
    }
    return item;
  }, []);
}
duplicateArray(data, 'id'); // [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }]

两个对象数组找出重复的对象

适用范围：仅适用对单个key属性进行去重

方法一【reduce + find】

• 对数组1使用reduce遍历
• 再对数组2使用find方法(其他遍历方法也是可以的)
• 找出和数组1相等的那一项，如果存在，则就是重复的

const arr1 =[{ a: 1 }, { a: 2 }, { a: 3 }, { a: 5 }];
const arr2 =[{ a: 1 }, { a: 2 }, { a: 4 }];

function getDuplicateValBycoupleArr(arr1, arr2, objectKeyName) {
  return arr1.reduce((acc, cur) => {
    const matchItemObj = arr2.find(item => item[objectKeyName] === cur[objectKeyName]);
    if (matchItemObj) {
      acc.push(matchItemObj)
    }
    return acc;
  }, [])
}

getDuplicateValBycoupleArr(arr1, arr2, 'a'); // [{ a: 1 }, { a: 2 }];

方法二【filter + find】

• 与方法一比较类似，不再细说

const arr1 =[{ a: 1 }, { a: 2 }, { a: 3 }, { a: 5 }];
const arr2 =[{ a: 1 }, { a: 2 }, { a: 4 }];

function getDuplicateValBycoupleArr(arr1, arr2, objectKeyName) {
  return arr1.filter(p => {
    if (arr2.find(v => p[objectKeyName] === v[objectKeyName])) {
      return p;
    }
  })
}

getDuplicateValBycoupleArr(arr1, arr2, 'a'); // [{ a: 1 }, { a: 2 }];

以上是个人总结的一些常用数组的去重方法，希望能支持下，点个赞！

如有不足之处，还望指正，谢谢~

有更好的实现方式也欢迎在评论区给我留言，谢谢~