We have an object with multiple arrays inside it, and we need to remove duplicates between these arrays.
const obj = {
arr1: ['a', 'b', 'c' ],
arr2: ['a','b', 'd', 'e', 'f' ],
}
First of all, we have to get the two arrays and merge their items with the Array.prototype.concat() method. As the documentation says, we can use this function on arrays only, not on objects!
We use this trick: we call an empty array
[]and then we apply theconcat()method to it
const allItems = [].concat(obj.arr1, obj.arr2)
that will return
console.log(allItems) // (8) ["a", "b", "c", "a", "b", "d", "e", "f"]
Remove duplicates from an array
Method 1: filter()
Let's filter our array with all items inside, just to be without duplicates.
Array.prototype.filter() method use this condition: "for every item I loop through, I will check if the current index (pos) is the same as the indexOf(item), and it this condition is true I will return the item.".
Array.prototype.indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present, so the filter condition is satisfied only for the first time the item pass the loop because loop index and indexOf are the same.
To be more clear let's make a table of the loop:
| Item | Loop index | indexOf* | Condition | Saved into unique array |
|---|---|---|---|---|
| 'a' | 0 | 0 | ok, 0 == 0 so this will return true
|
yes |
| 'b' | 1 | 1 | ok, 1 == 1 so this will return true
|
yes |
| 'c' | 2 | 2 | ok, 2 == 2 so this will return true
|
yes |
| 'a' | 3 | 0 | whoa, 3 != 0 so this will return false
|
nope! |
| 'b' | 4 | 1 | whoa, 4 != 1 so this will return false
|
nope! |
| 'd' | 5 | 5 | ok, 5 == 5 so this will return true
|
yes |
| 'e' | 6 | 6 | ok, 6 == 6 so this will return true
|
yes |
| 'f' | 7 | 7 | ok, 7 == 7 so this will return true
|
yes |
*indexOf = first position the item is present
const unique = allItems.filter((item, pos) => allItems.indexOf(item) === pos)
console.log(unique) // (6) ["a", "b", "c", "d", "e", "f"]
Method 2: Set()
Set() is an object lets you store unique values of any type.
- create a new
Set()to return the unique values - spread
...its items inside theSetobject - wrap all in square brackets to return an array
[object]
const unique = [...new Set(allItems)]
or we can use this syntax (I prefer this one! It seems more clear to me that we are manipulating something that will become an array using the Array.from() method)
- create a new
Set()to return the unique values - convert the Set object to an array using
Array.from()
const unique = Array.from(new Set(allItems))
and the result is exactly the same as above using filter().
console.log(unique) // (6) ["a", "b", "c", "d", "e", "f"]
To sum up
/* ==========================================================================
OBJECT ARRAYS, REMOVE DUPLICATES
========================================================================== */
const obj = {
arr1: ['a', 'b', 'c' ],
arr2: ['a','b', 'd', 'e', 'f' ],
}
const allItems = [].concat(obj.arr1, obj.arr2)
// using filter()
const unique_filter = allItems.filter((item, pos) => allItems.indexOf(item) === pos)
// using Set()
const unique_set1 = [...new Set(allItems)]
const unique_set2 = Array.from(new Set(allItems))
console.log(allItems) // (8) ["a", "b", "c", "a", "b", "d", "e", "f"]
console.log(unique_filter) // (6) ["a", "b", "c", "d", "e", "f"]
console.log(unique_set1) // (6) ["a", "b", "c", "d", "e", "f"]
console.log(unique_set2) // (6) ["a", "b", "c", "d", "e", "f"]
📚 More info
Top comments (0)