重复的只取一次怎么实现js

在JavaScript中，实现去重的方式有很多种。使用Set对象、利用Array.prototype.filter()方法、通过Array.prototype.reduce()方法等都是有效的手段。接下来，我将详细介绍如何通过这些方法实现数组去重。

一、使用Set对象

Set对象是ES6引入的新特性，它是一种类似于数组的数据结构，但是其中的成员都是唯一的。使用Set对象可以非常简洁地实现数组去重。

function uniqueArray(arr) {
  return [...new Set(arr)];
}
const numbers = [1, 2, 2, 3, 4, 4, 5];
console.log(uniqueArray(numbers)); // [1, 2, 3, 4, 5]

二、利用Array.prototype.filter()方法

filter()方法创建一个新的数组，其中包含通过所提供函数实现的测试的所有元素。我们可以利用这个方法结合indexOf来实现去重。

function uniqueArray(arr) {
  return arr.filter((item, index) => arr.indexOf(item) === index);
}
const numbers = [1, 2, 2, 3, 4, 4, 5];
console.log(uniqueArray(numbers)); // [1, 2, 3, 4, 5]

三、通过Array.prototype.reduce()方法

reduce()方法对数组中的每个元素执行一个由您提供的reducer函数（升序执行），将其结果汇总为单个返回值。我们可以使用这个方法来实现去重。

function uniqueArray(arr) {
  return arr.reduce((accumulator, currentValue) => {
    if (!accumulator.includes(currentValue)) {
      accumulator.push(currentValue);
    }
    return accumulator;
  }, []);
}
const numbers = [1, 2, 2, 3, 4, 4, 5];
console.log(uniqueArray(numbers)); // [1, 2, 3, 4, 5]

四、综合应用

在实际项目中，我们可能会遇到更加复杂的去重需求，比如对象数组的去重。接下来介绍一些高级应用。

1、对象数组去重

对象数组的去重可以通过对对象的某一个或多个属性进行比较来实现。例如，我们有一个包含多个用户对象的数组，我们希望根据用户的id进行去重。

function uniqueArrayById(arr) {
  const seen = new Set();
  return arr.filter(item => {
    const duplicate = seen.has(item.id);
    seen.add(item.id);
    return !duplicate;
  });
}
const users = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 1, name: 'John' },
  { id: 3, name: 'Jack' }
];
console.log(uniqueArrayById(users)); 
// [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }, { id: 3, name: 'Jack' }]

2、多重条件去重

有时我们需要根据多个属性来进行去重，比如根据用户的id和name。

function uniqueArrayByMultipleKeys(arr, keys) {
  const seen = new Set();
  return arr.filter(item => {
    const key = keys.map(k => item[k]).join('|');
    const duplicate = seen.has(key);
    seen.add(key);
    return !duplicate;
  });
}
const users = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 1, name: 'John' },
  { id: 3, name: 'Jack' }
];
console.log(uniqueArrayByMultipleKeys(users, ['id', 'name'])); 
// [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }, { id: 3, name: 'Jack' }]

五、性能比较

在处理大数据量时，去重方法的性能可能会有显著差异。以下是一些常见方法的性能比较。

1、Set对象

Set对象的时间复杂度为O(n)，它在大多数情况下是性能最优的选择。

console.time('Set');
uniqueArray([...Array(1000000).keys(), ...Array(1000000).keys()]);
console.timeEnd('Set');

2、Array.prototype.filter()方法

filter()方法的时间复杂度为O(n^2)，因为indexOf方法本身是O(n)的复杂度。

console.time('Filter');
uniqueArray([...Array(1000000).keys(), ...Array(1000000).keys()]);
console.timeEnd('Filter');

3、Array.prototype.reduce()方法

reduce()方法的时间复杂度为O(n^2)，因为includes方法也是O(n)的复杂度。

console.time('Reduce');
uniqueArray([...Array(1000000).keys(), ...Array(1000000).keys()]);
console.timeEnd('Reduce');

六、总结

在本文中，我们详细介绍了JavaScript中实现数组去重的多种方法，并对其进行了性能比较。Set对象、Array.prototype.filter()方法、Array.prototype.reduce()方法等都是实现数组去重的有效手段。在实际应用中，我们应根据具体需求选择最合适的方法，例如对象数组的去重、多重条件去重等。通过对不同方法的性能比较，我们发现Set对象在大数据量情况下表现最优。希望本文能为你在JavaScript开发中提供有价值的参考。