Удаление дубликатов из массивов и строк в JavaScript

Рассмотрим два решения задачи: одно для удаления дубликатов из массивов, другое — для удаления дубликатов из строк (хотя они очень похожи).

На самом деле всё довольно просто, хотя если вы новичок в программировании, то, возможно, не знаете, как это сделать.

Удаление дубликатов из массивов

В программировании существует несколько способов достижения цели. Именно поэтому рассмотрим два способа удаления дубликатов из массива. В первом случае используем итеративный подход с помощью цикла for, а во втором — объект Set.

Итеративный подход

function removeDuplicates(arr) {
    const uniqueArr = [];

    for (let i = 0; i < arr.length; i++) {
        if (!uniqueArr.includes(arr[i])) {
            uniqueArr.push(arr[i]);
        }
    }
    return uniqueArr;
}

removeDuplicates([1, 1, 2, 3, 4, 5, 4, 1]); // [ 1, 2, 3, 4, 5 ]
removeDuplicates(['a', 'b', 'a', 'c', 'b']); // [ 'a', 'b', 'c' ]

В приведённом примере есть несколько моментов, на которые следует обратить внимание. Во-первых, мы объявляем пустой массив uniqueArr. Как можно догадаться, в этом массиве будут храниться уникальные значения, с которыми сталкивается код, перебирая исходный массив, arr.

Код пробегает по массиву arr, проверяя, if uniqueArr содержит значение или нет. Если нет, то push значение в uniqueArr.

Использование Set

Объект Set в JavaScript автоматически обеспечивает уникальность всех значений. Эту особенность можно использовать для удаления дубликатов из массива. Это невероятно просто и почти похоже на читерство, но это так.

function removeDuplicates(arr) {
    return [...new Set(arr)];
}

removeDuplicates([1, 2, 2, 3, 4, 4, 5]); // [ 1, 2, 3, 4, 5 ]

Использование метода filter

Другой способ удаления дубликатов — использование метода filter в сочетании с indexOf.

function removeDuplicates(arr) {
    return arr.filter((item, index) => arr.indexOf(item) === index);
}

removeDuplicates([1, 2, 2, 3, 4, 4, 5]); // [ 1, 2, 3, 4, 5 ]

Во-первых, метод filter создаёт поверхностную копию части массива, отфильтровывая его до элементов, прошедших проверку. indexOf возвращает первый индекс, по которому данный элемент встречается в массиве, или -1, если он отсутствует.

В качестве примера можно создать массив случайных фруктов:

const fruit = ['apple', 'banana', 'cherry'].

А если необходимо проверить индекс элемента, можно воспользоваться методом: fruit.indexOf('banana');, который вернёт 1, индекс banana.

Удаление дубликатов из строк

На самом деле большой разницы в этих решениях нет, есть лишь незначительные моменты, о которых следует знать. Мы почти исключили строки из статьи, но, вероятно, стоит обратить внимание на эти незначительные различия. Так что давайте их рассмотрим.

Итеративный подход

function removeDuplicates(str) {
    let result = '';
    for (let i = 0; i < str.length; i++) {
        if (!result.includes(str[i])) {
            result += str[i];
        }
    }
    return result;
}

removeDuplicates('javascript'); // javscript

Использование Set

function removeDuplicates(str) {
    return [...new Set(str)].join('');
}

removeDuplicates('javascript'); // javscript

Использование метода filter

function removeDuplicates(str) {
    return str.split('').filter((char, index) => str.indexOf(char) === index).join('');
}

removeDuplicates('javascript'); //javscript

Итак, как вы видите, в приведённых выше блоках кода нет особой разницы. Для работы со строками мы просто ввели метод split() и join(). В итеративном решении также нет метода push() в переменной пустой строки, поскольку это метод массива.

Заключение

Как уже говорилось во введении, об этом могут спросить на собеседовании, для оценки ваших знаний JavaScript. Мы рассмотрели три различных способа достижения одной и той же цели, и стоит быть в курсе всех этих способов. Например, если вы использовали метод filter, интервьюер может попросить придумать другое решение, не использующее метод filter.

Надеемся, вам понравилась эта статья. Напишите в комментариях, что думаете по этому поводу!

Комментарии