How to Remove Duplicate Values from a JavaScript Array?

Remove Duplicate Values from JS Array

When working with JavaScript arrays, it's often necessary to remove duplicate values. Several approaches can be employed to achieve this without altering the original array.

Using the Set Constructor and Spread Syntax

The most straightforward method is to utilize the Set constructor and the spread syntax:

const uniq = [...new Set(array)];

This creates a new Set from the array, which automatically removes duplicates. The spread syntax then converts the Set back to an array.

Filtering Unique Elements

Another option is to filter the array based on the indexOf method:

const uniqueArray = a.filter(function(item, pos) {
    return a.indexOf(item) == pos;
});

This method iterates through the array and checks if the first occurrence of each element matches its position. Only unique elements will satisfy this condition.

Hashing with Objects

For efficiency, hashing with objects can be used:

function uniq(a) {
    const seen = {};
    return a.filter(function(item) {
        return seen.hasOwnProperty(item) ? false : (seen[item] = true);
    });
}

This approach maintains a hash table to quickly check for duplicate values, ensuring linear time complexity.

Sorting and Filtering

If the input array is sorted, it's possible to remove duplicates by sorting it and then filtering out consecutive equal elements:

function uniq(a) {
    return a.sort().filter(function(item, pos, ary) {
        return !pos || item != ary[pos - 1];
    });
}

Uniquing by Custom Criteria

To filter duplicates based on specific criteria, a callback function can be employed:

function uniqBy(a, key) {
    const seen = {};
    return a.filter(function(item) {
        const k = key(item);
        return seen.hasOwnProperty(k) ? false : (seen[k] = true);
    });
}

The key callback allows for custom comparisons and enables removing duplicates based on more complex logic.

Preserving the First or Last Occurrence

In certain scenarios, it may be desirable to preserve either the first or last occurrence of duplicate elements:

function uniqByKeepFirst(a, key) {
    const seen = new Set();
    return a.filter(item => {
        const k = key(item);
        return seen.has(k) ? false : seen.add(k);
    });
}

function uniqByKeepLast(a, key) {
    return [
        ...new Map(
            a.map(x => [key(x), x])
        ).values()
    ]
}

The uniqByKeepFirst function utilizes a Set to maintain unique keys, while uniqByKeepLast employs a Map to preserve the last encountered value associated with each key.

The above is the detailed content of How to Remove Duplicate Values from a JavaScript Array?. For more information, please follow other related articles on the PHP Chinese website!