Home

array-unique

2 min read

Graph View

Stage 1
Classification: API Change
Human Validated: KW
Title: Array.prototype.unique()
Authors: TechQuery
Champions: Jack Works
Last Presented: July 2020
Stage Upgrades:
Stage 1: 2020-07-26
Stage 2: NA
Stage 2.7: NA
Stage 3: NA
Stage 4: NA
Last Commit: 2022-03-14
Topics: arrays others
Keywords: array deduplication unique
GitHub Link: https://github.com/tc39/proposal-array-unique
GitHub Note Link: https://github.com/tc39/notes/blob/HEAD/meetings/2020-07/july-22.md#arrayprototypeunique-proposal-for-stage-1

Proposal Description:

Array deduplication proposal

ECMAScript proposal for Deduplicating method of Array.

Proposal Stage-1 CI & CD

NPM

Motivation

Deduplication is one of the most common requirements in Data processing, especially in large Web Apps nowadays.

In Lodash, *uniq* methods are also very popular:

#NameDownloads
1uniq5,546,070
7uniqby447,858
28uniqwith15,077

But [...new Set(array)] in ECMAScript 6 isn’t enough for Non-primitive values, and now, we may need a Array.prototype.uniqueBy().

Core features

While Array.prototype.uniqueBy() invoked with:

  1. no parameter, it’ll work as [...new Set(array)];

  2. one index-key parameter (Number, String or Symbol), it’ll get values from each array element with the key, and then deduplicates the origin array based on these values;

  3. one function parameter, it’ll call this function for each array element, and then deduplicates the origin array based on these returned values.

Notice:

  • the Returned value is a new array, no mutation happens in the original array
  • Empty/nullish items are treated as nullish values
  • 0 & -0 are treated as the same
  • All NaNs are treated as the same

Typical cases

[1, 2, 3, 3, 2, 1].uniqueBy();  // [1, 2, 3]
 
const data = [
    { id: 1, uid: 10000 },
    { id: 2, uid: 10000 },
    { id: 3, uid: 10001 }
];
 
data.uniqueBy('uid');
// [
//     { id: 1, uid: 10000 },
//     { id: 3, uid: 10001 }
// ]
 
data.uniqueBy(({ id, uid }) => `${id}-${uid}`);
// [
//     { id: 1, uid: 10000 },
//     { id: 2, uid: 10000 },
//     { id: 3, uid: 10001 }
// ]

Polyfill

A polyfill is available in the core-js library. You can find it in the ECMAScript proposals section.

A simple polyfill from the proposal repo write in TypeScript.

Proposer

Graph View