There are multiple ways to filter out duplicates from an array and return only the unique values.
1οΈβ£ Using Set π₯
What is Set?
Set is a new data object introduced in ES6. A Set is a collection of unique values.
Here,
- The array is converted toΒ
Set
Β and all the duplicate elements are automatically removed. - The spread syntaxΒ
...
Β is used to include all the elements of theΒSet
Β to a new array.
const arr = ["πΌ", "π΄", "πΉ", "π΅", "π", "πΉ", "π΄"];
const filteredArr = [...new Set(arr)];
console.log(filteredArr); //["πΌ", "π΄", "πΉ", "π΅", "π"]
Convert Set to an Array using Array.from
You can also use Array.from
to convert a Set
into an array:
const arr = ["πΌ", "π΄", "πΉ", "π΅", "π", "πΉ", "π΄"];
const filteredArr = Array.from(new Set(arr));
console.log(filteredArr); //["πΌ", "π΄", "πΉ", "π΅", "π"]
2οΈβ£ Using filter πΈ
If the element passes and returns true, it will be included in the filtered array and any element that fails or return false, it will be NOT be in the filtered array.
const arr = ["πΌ", "π΄", "πΉ", "π΅", "π", "πΉ", "π΄"];
const filteredArr = arr.filter((item, index) => {
return arr.indexOf(item) === index;
})
console.log(filteredArr); //["πΌ", "π΄", "πΉ", "π΅", "π"]
3οΈβ£ Using forEach Method π
Using forEach
, you can iterate over the elements in the array and push into the new array if it doesnβt exist in the array.
const arr = ["πΌ", "π΄", "πΉ", "π΅", "π", "πΉ", "π΄"];
const filteredArr = (arr) => {
let uniqueVal = [];
arr.forEach(el => {
if(!uniqueVal.includes(el)) {
uniqueVal.push(el);
}
})
return uniqueVal;
}
console.log(filteredArr(arr)); //["πΌ", "π΄", "πΉ", "π΅", "π"]
4οΈβ£ Using Reduce Method π
The reduce
method is used to reduce the elements of the array and combine them into a final array based on some reducer function that you pass.
const arr = ["πΌ", "π΄", "πΉ", "π΅", "π", "πΉ", "π΄"];
const filteredArr = arr.reduce((acc, curr) => {
return acc.includes(curr) ? acc : [...acc, curr];
}, [])
console.log(filteredArr(arr)); //["πΌ", "π΄", "πΉ", "π΅", "π"]
5οΈβ£ Unique Method to the Array Prototype π
In Javascript the array prototype constructor allows you to add new properties and methods to the Array object.
const arr = ["πΌ", "π΄", "πΉ", "π΅", "π", "πΉ", "π΄"];
Array.prototype.filteredArr = function (){
let arr = [];
for(let i = 0; i < this.length; i++) {
let current = this[i];
if(arr.indexOf(current) < 0 ) arr.push(current);
}
return arr;
}
console.log(arr.filteredArr()); //["πΌ", "π΄", "πΉ", "π΅", "π"]
Reference π§
π Twitter | π©π»βπ» suprabha.me | π Instagram |
Top comments (5)
Nice comment
nice reply
nice
Good stuff!
If you're not planning on doing re-assignment, you can keep arrays (and objects overall
const
):Thank you. I was looking for this.