Original text: medium.com/dailyjs/how…

By Samantha Ming


const array = ['🐑'.1.2.'🐑'.'🐑'.3];

// 1: 'Set'
[...new Set(array)];

// 2: 'Filter'
array.filter((item, index) = > array.indexOf(item) === index);

// 3: 'Reduce'
array.reduce((unique, item) = >
    unique.includes(item) ? unique : [...unique, item], []);

// RESULT:
// ['🐑', 1, 2, 3];
Copy the code

1. Set

Let me first explain what a Set is:

Set is a new data object introduced in ES6. Because Set only allows you to store unique values. When you pass in an array, it will delete any duplicate values.

Okay, let’s go back to the code and break down what’s happening. Two things:

  • First, we create a new Set by passing an array. Because the Set allows only unique values, all duplicates will be removed.

  • Now that the duplicates have been removed, we’re going to use the extension operator… Convert it back to an array.

const array = ['🐑'.1.2.'🐑'.'🐑'.3];

// Step 1
const uniqueSet = new Set(array);
// Set {'🐑', 1, 2, 3}

// Step 2
const backToArray = [...uniqueSet];
// ['🐑', 1, 2, 3];
Copy the code

Convert a Set to an Array using array. from

Alternatively, you can convert a Set to an Array using array. from:

The array.from () method creates a new, shallow-copy Array instance from an array-like or iterable.

const array = ['🐑'.1.2.'🐑'.'🐑'.3];

Array.from(new Set(array));

// ['🐑', 1, 2, 3];
Copy the code

2. Filter

To understand this method, let’s look at two methods in action: indexOf and filter.

indexOf

The indexOf method returns the first indexOf the given element it finds in the array.

const array = ['🐑', 1, 2, '🐑'.'🐑', 3];

array.indexOf('🐑'); // 0 array.indexOf(1); // 1 array.indexOf(2); // 2 array.indexOf(3); / / 5Copy the code

filter

The filter method creates a new array containing elements that match the given filter criteria. In other words, if the element matches and returns true, it will be included in the filtered array. If it does not match or returns false, it will not be included.

const array = ['🐑'.1.2.'🐑'.'🐑'.3];

array.filter((item, index) = > {

    console.log(
        // a. Item
        item,
        // b. Index
        index,
        // c. indexOf
        array.indexOf(item),
        // d. Condition
        array.indexOf(item) === index,
    );

    return array.indexOf(item) === index
});

// ['🐑', 1, 2, 3];
Copy the code

Here is the output of console.log shown above. Where an index is not equal to an indexOf is a duplicate value. In these cases, the condition will be false and will not be included in the filtered array.

Item Index indexOf Condition
🐑 0 0 true
1 1 1 true
2 2 2 true
🐑 3 0 false
🐑 4 0 false
3 5 5 true

Retrieve duplicate values

We can also use the filter method to retrieve duplicate values from the array. We can do this by simply adjusting the conditions:

const array = ['🐑'.1.2.'🐑'.'🐑'.3];

array.filter((item, index) = >array.indexOf(item) ! == index);/ / / '🐑', '🐑'
Copy the code

Again, if we execute the code above and look at the output:

Item Index indexOf Condition
🐑 0 0 false
1 1 1 false
2 2 2 false
🐑 3 0 true
🐑 4 0 true
3 5 5 false

3. Reduce

The reduce method is used to reduce the elements of an array and combine them into a final array based on a Reducer function passed in.

In this case, our Reducer function checks if the final array contains the item. If not, the item is pushed into the final array. Otherwise, skip the element and return the final array as is (basically skip the element).

The Reducer function is always a little hard to understand, so let’s look at the output in each case:

const array = ['🐑'.1.2.'🐑'.'🐑'.3];

array.reduce((unique, item) = > {

    console.log(
        // a. Item
        item,
        // An Accumulator is an Accumulator.
        unique,
        // c. Condition (pushes the final array only if it is false)
        unique.includes(item),
        // d. Reducer function Result
        unique.includes(item) ? unique : [...unique, item],
    );

    return unique.includes(item) ? unique : [...unique, item]
}, []); // 👈 Accumulator is initially an empty array

// ['🐑', 1, 2, 3];
Copy the code

Here’s the output of console.log:

Item Accumulator (before Reducer function) Push in the accumulator? Accumulator (after the Reducer function)
🐑 [] Yes [‘🐑’]
1 [‘🐑’] Yes [‘ 🐑 ‘, 1)
2 [‘ 🐑 ‘, 1) Yes [‘ 🐑 ‘, 1, 2]
🐑 [‘ 🐑 ‘, 1, 2] No [‘ 🐑 ‘, 1, 2]
🐑 [‘ 🐑 ‘, 1, 2] No [‘ 🐑 ‘, 1, 2]
3 [‘ 🐑 ‘, 1, 2] Yes [‘ 🐑 ‘, 1, 2, 3]

reference

  • MDN Web Docs – Set
  • MDN Web Docs – Filter
  • MDN Web Docs – Reduce