Home >Common Problem >What are the methods to remove duplicates from js arrays?

What are the methods to remove duplicates from js arrays?

zbt
zbtOriginal
2023-08-09 16:47:451135browse

The methods for deduplicating js arrays include using Set, using indexOf, using includes, using filter and using reduce. 1. Use Set, which is characterized by the fact that the elements in the set will not be repeated; 2. Use indexOf to return the first index position of the specified element in the array; 3. Use includes to determine whether an element already exists in the array. 4. Use filter to filter elements; 5. Use reduce to compress elements in an array, etc.

What are the methods to remove duplicates from js arrays?

The operating environment of this tutorial: windows10 system, JavaScript ES12 version, DELL G3 computer.

In JavaScript programming, we often encounter situations where we need to perform deduplication operations on arrays. Deduplication refers to removing duplicate elements from an array and retaining only one of them. This article will introduce some common JavaScript array deduplication methods to help readers better understand and apply them.

Method 1: Use Set

The Set object introduced in ES6 is a new data structure that can help us quickly deduplicate arrays. The characteristic of the Set object is that the elements in the set will not be repeated. We can simply convert the array to a Set object, and then convert the Set object back to an array to achieve the purpose of deduplication.

Sample code:

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

Method 2: Use indexOf

The array object in JavaScript provides an indexOf method, which can return the specified element in The first index position in the array. We can use this method to determine whether an element already exists in the new array, and if it does not exist, add it to it.

Sample code:

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

Method 3: Use includes

The includes method introduced in ES7 is similar to the indexOf method. It can be used to determine an Whether the element already exists in the array. We can use this method to perform array deduplication operations.

Sample code:

let arr = [1, 2, 2, 3, 3, 4, 5];
let 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]

Method 4: Use filter

The array object in JavaScript provides a filter method, which can be used to filter elements . We can use this method to perform array deduplication and only retain the first occurrence of the element.

Sample code:

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

Method 5: Use reduce

The array object in JavaScript provides a reduce method, which can Elements are "compressed" into a single value. We can use this method to perform array deduplication operations.

Sample code:

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

Conclusion:

This article introduces the commonly used array deduplication methods in JavaScript, including using Set, indexOf, and includes , filter and reduce methods. Readers can choose the appropriate method to perform array deduplication according to the actual situation. In actual development, array deduplication is a very basic and commonly used operation. Mastering these methods can process array data more efficiently and improve program performance and readability. .

The above is the detailed content of What are the methods to remove duplicates from js arrays?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:what is spring mvcNext article:what is spring mvc