返回

JavaScript去重的11种方法,让你如虎添翼

前端







## JavaScript去重的11种方法

去重是开发和面试中经常遇到的问题,尤其是在处理数据时。JavaScript提供了多种去重方法,每种方法都有其独特的优缺点。

### 1. 使用数组的原生`filter`方法

```javascript
const numbers = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueNumbers = numbers.filter((item, index) => numbers.indexOf(item) === index);

console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

2. 使用Set数据结构

Set数据结构可以自动去重,非常适合处理唯一值的集合。

const numbers = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueNumbers = [...new Set(numbers)];

console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

3. 使用Map数据结构

Map数据结构可以将键值对存储为对象,并且键是唯一的。我们可以利用这一点来实现去重。

const numbers = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueNumbers = [];
const map = new Map();

for (const number of numbers) {
  if (!map.has(number)) {
    map.set(number, true);
    uniqueNumbers.push(number);
  }
}

console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

4. 使用Array.from()方法

Array.from()方法可以将类数组对象转换为数组,同时可以应用一些函数对每个元素进行操作。我们可以利用这一点来实现去重。

const numbers = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueNumbers = Array.from(new Set(numbers));

console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

5. 使用reduce()方法

const numbers = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueNumbers = numbers.reduce((acc, item) => {
  if (!acc.includes(item)) {
    acc.push(item);
  }
  return acc;
}, []);

console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

6. 使用indexOf()方法

const numbers = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueNumbers = [];

for (let i = 0; i < numbers.length; i++) {
  if (numbers.indexOf(numbers[i]) === i) {
    uniqueNumbers.push(numbers[i]);
  }
}

console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

7. 使用lastIndexOf()方法

const numbers = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueNumbers = [];

for (let i = 0; i < numbers.length; i++) {
  if (numbers.lastIndexOf(numbers[i]) === i) {
    uniqueNumbers.push(numbers[i]);
  }
}

console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

8. 使用includes()方法

const numbers = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueNumbers = [];

for (let i = 0; i < numbers.length; i++) {
  if (!uniqueNumbers.includes(numbers[i])) {
    uniqueNumbers.push(numbers[i]);
  }
}

console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

9. 使用find()方法

const numbers = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueNumbers = [];

numbers.forEach((number) => {
  if (!uniqueNumbers.find((item) => item === number)) {
    uniqueNumbers.push(number);
  }
});

console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

10. 使用findIndex()方法

const numbers = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueNumbers = [];

numbers.forEach((number) => {
  if (numbers.findIndex((item) => item === number) === numbers.indexOf(number)) {
    uniqueNumbers.push(number);
  }
});

console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

11. 使用lodash库

lodash库提供了许多有用的函数,其中包括uniq()函数,可以实现数组去重。

const numbers = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueNumbers = _.uniq(numbers);

console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

总结

本文介绍了JavaScript中常用的11种数组去重方法,每种方法都有其独特的优缺点。在实际开发中,我们可以根据具体情况选择合适的方法。