ECMAScript proposal for Deduplicating method of Array.
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:
# | Name | Downloads |
---|---|---|
1 | uniq | 5,546,070 |
7 | uniqby | 447,858 |
28 | uniqwith | 15,077 |
But [...new Set(array)]
in ECMAScript 6 isn't enough for Non-primitive values, and now, we may need a Array.prototype.uniqueBy()
.
While Array.prototype.uniqueBy()
invoked with:
-
no parameter, it'll work as
[...new Set(array)]
; -
one index-key parameter (
Number
,String
orSymbol
), it'll get values from each array element with the key, and then deduplicates the origin array based on these values; -
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
NaN
s are treated as the same
[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 }
// ]
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.
- Author: @TechQuery
- Champion: @Jack-Works