Please list several array deduplication methods and give examples

• Array deduplication method
  • ES6 Set data structure deduplication
  • Double for loop to remove duplicates
  • for loop + findIndex to remove duplicates
  • Use filter and indexOf methods
  • Use reduce method

Array deduplication method

There are many ways to deduplicate arrays, and several common methods are listed below.

ES6 Set data structure deduplication

This method is most commonly mentioned in interviews and is also the simplest.

Using the ES6 Set data structure, the original array is converted into a Set, and then the duplicate elements in the array are removed through the automatic deduplication feature of the Set.

const arr = [1, 1, 2, 3, 5, 6, 6, 7, {
    
    }, {
    
    }, {
    
    name: 'liu'}];
const newArr = Array.from(new Set(arr));
console.log(newArr); // [1, 2, 3, 5, 6, 7, {}, {name: 'liu'}]

Note that this method only applies to primitive types of data, such as numbers, strings, etc., but not to object type data.

Because Set can only store non-repeatable elements, if the elements themselves are mutable, uniqueness cannot be guaranteed in Set.

Double for loop to remove duplicates

This is the most basic method. Through a double for loop, the new array newArr is emptied, and then the original array arr is traversed. If the current element in the original array is different from the existing elements in the new array, it is added to the new array.

function newArrFn(arr) {
    
    
    let newArr = [];
    for (let i = 0; i < arr.length; i++) {
    
    
        let flag = false;
        for (let j = 0; j < newArr.length; j++) {
    
    
            if (arr[i] === newArr[j]) {
    
    
                flag = true;
                break;
            }
        }
        flag ? newArr.push(arr[i]) : null;
    }
    return newArr;
}
console.log(newArrFn(arr)); // [1, 2, 3, 5, 6, 7, {}, {name: 'liu'}]

The disadvantage of this method is that it is less efficient, has a time complexity of O(n^2), and may cause performance problems when processing large amounts of data.

for loop + findIndex to remove duplicates

This method uses the characteristics of findIndex . If the element is not found, it returns -1. Then it is judged that if the return value is -1, it means that it is not found, and the element is added to the new array.

This method has a certain performance improvement compared to the double for loop.

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

However, this method still has performance problems. When there are a large number of duplicate elements in the array, the findIndex method will perform a large number of invalid searches, resulting in reduced efficiency.

findIndex

findIndexIt is a method of JavaScript array, used to find the index position of the array element that meets the specified condition. It accepts a callback function as a parameter and returns the index of the first element that satisfies the condition, or -1 if no element is found that satisfies the condition.

The following is findIndexthe syntax of the method:

array.findIndex(callback(element[, index[, array]])[, thisArg])

• callback: The function to be executed, which receives three parameters:

  • element: The element currently being processed.
  • index(optional): The index of the element currently being processed.
  • array(optional): findIndexArray of methods to call.

• thisArg(optional): the this value passed to the callback function.

Here is an example that demonstrates how to use findIndexthe method to find the index of the first element in an array that is greater than 5:

const arr = [2, 4, 6, 8, 10];
const index = arr.findIndex((element) => element > 5);
console.log(index); // Output: 2

In the above example, the callback function (element) => element > 5is used to determine whether the array element is greater than 5. findIndexThe method will traverse the array from the beginning, and when the first element that meets the condition is found, the index position of the element will be returned. In this example, the first element greater than 5 is 6, so its index 2 is returned. If there is no element in the array that meets the condition, -1 is returned.

findIndexThe method is a new feature introduced in ES6, so it may not be supported on some older versions of browsers. Before using it, make sure your target environment supports this method or provides an appropriate polyfill.

Use filter and indexOf methods

By traversing the original array, use the indexOf method to determine whether the current element already exists in the new array. If it does not exist, add it to the new array.

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

Use reduce method

Iterate over the original array via the reduce method, adding each element to a new array, but only if the element does not already exist in the new array.

const arr = [1, 2, 2, 3, 3, 4];
const uniqueArr = arr.reduce((unique, item) => {
    
    
  return unique.includes(item) ? unique : [...unique, item];
}, []);
console.log(uniqueArr); // Output: [1, 2, 3, 4]

For more details, please search " " on WeChat前端爱好者 and click me to view .