Wednesday, March 4, 2020

JavaScript example - Five different ways of removing duplicate elements in array

Sometimes, Array contains duplicate data, developer has to write a code to remove duplicates and return array with unique elements.
There are many ways we can remove duplicates from an array. In this blog post, You will learn 5 ways of duplicate items of array in javascript/Typescript.

  • using array filter and indexOf method
  • ES6 using set with spread expression
  • Jquery each and inArray method
  • forEach loop implementation
  • UnderscoreJS and lodash with uniq method
Given array of numbers
let array=[4,12,3,4,1,3]
output is [ 4, 12, 3, 1 ]

array filter and indexOf method example

  • Array filter provides filters the original array and returns array of elements
  • elements in array are iterated using filter method
  • filter() has a callback which accepts element and index position in an array
  • callback is called for each element
  • consider array element and check if each element index against array 
  • finally returned array of values without duplicates
here is an example
let uniqueArray = arrayNumbers.filter(function(element, index) {
    return arrayNumbers.indexOf(index) == index;
})
console.log(uniqueArray);

ES6 using set with spread expression

ES6 release of JavaScript introduced Set type and spread operator Set type stores data of any type. Set does not allow duplicate elements. Please see here .
Spread operator [...expression] allows the array to expand array of elements. Please see more about spread operator .

var uniqueArray = [ ...new Set(arrayNumbers) ];
console.log(uniqueArray)

Jquery each and inArray method

  • JQuery library has each and inArray method
  • Created empty uniqueArray to hold the unique elements
  • iterated the  array using each function and accepts array as first argument, second argument is callback
  • Callback is called for each element
  • Check each element present in uniqueArray using inArray() function
  • if not present in uniqueArray , add the element
var uniqueArray = [];
$.each(arrayNumbers, function(index, item){
    if($.inArray(item, uniqueArray) === -1) uniqueArray.push(item);
});
console.log(uniqueArray);

Using forEach loop.

 forEach in javascript provides iteration + callback for each element filter duplicates using indexOf method push unique elements to new array.
var uniqueArray = [];
arrayNumbers.forEach(function(element) {
     if(uniqueArray.indexOf(element) < 0) {
         uniqueArray.push(element);
     }
});
console.log(uniqueArray);

UnderscoreJS and lodash with uniq method

 With thirdparty libraries, It is very easy and simple, UnderscoreJS and Lodash provides uniq method. uniq function accets three arguments -
_.uniq(originalArray, [isAlreadySorted], [iterator]
OriginalArray - input array to remove duplicates.
isAlreadySorted - true - for already sorted array, which improves performances.
Iterator - custom logic for each element applied during iteration
console.log(_.uniq(arrayNumbers, false));

Related article


EmoticonEmoticon