Use Set to quickly remove duplicate original values in the array, such as [...new Set(arr)]; 2. Use filter() and indexOf() to retain the first occurrence of elements; 3. Use reduce() to manually build a non-repetitive array, but the performance is poor; 4. Object arrays need to be compared with filter() and findIndex() to de-heavy specific keys. For most cases, [...new Set(arr)] is the best choice, suitable for raw type data deduplication, while object arrays need to be filtered based on unique keys. The final method selection depends on the data type and performance requirements.

There are several ways to remove duplicate values from an array in JavaScript. Here are the most common and effective methods:

1. Using Set (Simple and Fast)

The easiest way is to use the Set object, which only stores unique values, then convert it back to an array.

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

This method is fast and clean for primitive values like strings, numbers, and booleans.

Note: This only works reasonably for primitive types . For objects, it won't detect duplicates based on content.

2. Using filter() and indexOf()

This method keeps the first occurrence of each value and filters out later duplicates.

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

How it works:

• indexOf(item) returns the first index where the item appears.
• If the current index matches that first index, it's the first occurrence — so we keep it.

This is useful when you want more control or are working in older environments (though Set is supported in modern browsers).

3. Using reduce() to Build Unique Array

You can use reduce() to manually build a new array without duplicates.

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

While flexible, this method is slower for large arrays because includes() checks the entire accumulator each time.

4. Removing Duplicates from Object Arrays

For arrays of objects, you need to define what makes them "duplicates." Normally, you compare a specific key.

 const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 1, name: 'Alice' }
];

const unique = users.filter((user, index, self) =>
  index === self.findIndex(u => u.id === user.id)
);

This keeps only the first object with each id . You can change u.id === user.id to compare other properties or multiple fields.

Summary of Best Use Cases:

• Primitive values (numbers, strings): Use Set — it's fastest and cleanest.
• Need compatibility or custom logic: Use filter() indexOf() .
• Objects: Use filter() with findIndex() or a Map for better performance.
• Large datasets: Avoid includes() or indexOf() in loops — use Map or Set with keys.

Basically, for most cases, [...new Set(arr)] is your go-to solution.

The above is the detailed content of How to remove duplicate values from an array in JS?. For more information, please follow other related articles on the PHP Chinese website!