让你的JS数组去重无忧：12种高效方法大揭秘

2022-11-03 04:42:43

如何从 JavaScript 数组中去除重复元素

在处理 JavaScript 数组时，经常需要去除其中的重复元素。有很多方法可以实现这一点，本文将介绍 13 种不同的方法。

1. ES6 Set

ES6 中新增了 Set 数据结构，它可以自动去除重复元素。我们可以先将数组转换为 Set，然后再将其转换为数组。

const arr = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5]

2. filter()

filter() 方法可以对数组中的每个元素进行过滤，返回一个新的数组，其中只包含通过过滤条件的元素。我们可以使用 filter() 方法来去除数组中的重复元素。

const arr = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index);
console.log(uniqueArr); // [1, 2, 3, 4, 5]

3. indexOf()

indexOf() 方法可以返回某个元素在数组中的第一个索引位置。我们可以使用 indexOf() 方法来检查某个元素是否在数组中已经存在，如果存在则将其删除。

const arr = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
  if (arr.indexOf(arr[i]) === i) {
    uniqueArr.push(arr[i]);
  }
}
console.log(uniqueArr); // [1, 2, 3, 4, 5]

4. lastIndexOf()

lastIndexOf() 方法可以返回某个元素在数组中的最后一个索引位置。我们可以使用 lastIndexOf() 方法来检查某个元素是否在数组中已经存在，如果存在则将其删除。

const arr = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
  if (arr.lastIndexOf(arr[i]) === i) {
    uniqueArr.push(arr[i]);
  }
}
console.log(uniqueArr); // [1, 2, 3, 4, 5]

5. some()

some() 方法可以检查数组中是否存在某个元素。我们可以使用 some() 方法来检查某个元素是否在数组中已经存在，如果存在则将其删除。

const arr = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
  if (!arr.some((item) => item === arr[i] && i !== arr.indexOf(item))) {
    uniqueArr.push(arr[i]);
  }
}
console.log(uniqueArr); // [1, 2, 3, 4, 5]

6. reduce()

reduce() 方法可以将数组中的所有元素累积成一个值。我们可以使用 reduce() 方法来将数组中的重复元素累积成一个数组，然后再将其转换为一个新的数组，其中只包含不重复的元素。

const arr = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueArr = arr.reduce((acc, item) => {
  if (!acc.includes(item)) {
    acc.push(item);
  }
  return acc;
}, []);
console.log(uniqueArr); // [1, 2, 3, 4, 5]

7. includes()

includes() 方法可以检查数组中是否存在某个元素。我们可以使用 includes() 方法来检查某个元素是否在数组中已经存在，如果存在则将其删除。

const arr = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
  if (!uniqueArr.includes(arr[i])) {
    uniqueArr.push(arr[i]);
  }
}
console.log(uniqueArr); // [1, 2, 3, 4, 5]

8. Lodash uniq()

Lodash 是一个 JavaScript 库，它提供了许多有用的函数，其中包括 uniq() 函数。uniq() 函数可以对数组进行去重操作，返回一个新的数组，其中只包含不重复的元素。

const arr = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueArr = _.uniq(arr);
console.log(uniqueArr); // [1, 2, 3, 4, 5]

9. Lodash uniqBy()

uniqBy() 函数可以对数组进行去重操作，但它可以根据指定的函数来判断元素是否相等。这对于我们需要根据某个属性来进行去重操作时非常有用。

const arr = [
  { name: 'John', age: 20 },
  { name: 'Jane', age: 25 },
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 }
];
const uniqueArr = _.uniqBy(arr, 'name');
console.log(uniqueArr); // [{ name: 'John', age: 20 }, { name: 'Jane', age: 25 }]

10. Lodash difference()

difference() 函数可以返回两个数组的差集，即第一个数组中存在而第二个数组中不存在的元素。我们可以使用 difference() 函数来从一个数组中去除另一个数组中的元素。

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [2, 4];
const uniqueArr = _.difference(arr1, arr2);
console.log(uniqueArr); // [1, 3, 5]

11. Lodash differenceBy()

differenceBy() 函数可以返回两个数组的差集，但它可以根据指定的函数来判断元素是否相等。这对于我们需要根据某个属性来进行差集操作时非常有用。

const arr1 = [
  { name: 'John', age: 20 },
  { name: 'Jane', age: 25 },
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 }
];
const arr2 = [
  { name: 'John', age: 20 },
  { name: 'Jane', age: 25 }
];
const uniqueArr = _.differenceBy(arr1, arr2, 'name');
console.log(uniqueArr); // [{ name: 'John', age: 30 }]

12. Lodash intersection()

intersection() 函数可以返回两个数组的交集，即两个数组中都存在的元素。我们可以使用 intersection() 函数来从一个数组中找出另一个数组中也存在的元素。

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [2, 4, 6];
const uniqueArr = _.intersection(arr1, arr2);
console.log(uniqueArr); // [2, 4]

13. Lodash intersectionBy()

intersectionBy() 函数可以返回两个数组的交集，但它可以根据指定的函数来判断元素是否相等。这对于我们需要根据某个属性来进行交集操作时非常有用。

const arr1 = [
  { name: 'John', age: 20 },
  { name: 'Jane', age: 25 },
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 }
];
const arr2 = [
  { name: 'John', age: 20 },
  { name: 'Jane', age: 25 }
];
const uniqueArr = _.intersectionBy(arr1, arr2, 'name');
console.log(uniqueArr); // [{ name: 'John', age: 20 }, { name: 'Jane', age: 25 }]