Как удалить повторяющиеся элементы массива в JavaScript?
2 года назад·3 мин. на чтение
5 простых способов удаления дубликатов элементов в массиве JavaScript.
Введение
Массивы являются одной из наиболее часто используемых структур данных в JavaScript. Часто массив может содержать дубликаты элементов, которые необходимо удалить для эффективной обработки данных. В этом блоге мы рассмотрим пять способов удаления дубликатов элементов в массиве с помощью JavaScript, ранжированных от наиболее эффективных до наименее эффективных.1. Использование объекта Set
Объект Set
является наиболее эффективным способом удаления дубликатов из массива в JavaScript. Это коллекция уникальных значений, что означает, что она автоматически удаляет дубликаты. Используя spread оператор, мы можем преобразовать объект Set
обратно в массив, в результате чего получается массив, содержащий только уникальные значения. Вот пример:
В этом примере мы сначала определяем массив с повторяющимися значениями. Затем мы создаем новый объектconst arr = [1, 1, 2, 2, 3, 4, 4, 5]; const uniqueArr = [...new Set(arr)]; console.log(uniqueArr); // [1, 2, 3, 4, 5]
Set
с помощью оператора spread (...
). Наконец, мы снова преобразуем объект Set
обратно в массив с помощью оператора spread. Результирующий массив содержит только уникальные значения.
2. Использование метода .filter
Метод .filter
является вторым наиболее эффективным способом удаления дубликатов из массива в JavaScript. Он создает новый массив, который включает только элементы, отвечающие определенному условию, в данном случае элемент появляется в массиве только один раз. Вот пример:
В этом примере мы используем методconst arr = [1, 1, 2, 2, 3, 4, 4, 5]; const uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index); console.log(uniqueArr); // [1, 2, 3, 4, 5]
.filter
для создания нового массива uniqueArr
, который включает только элементы, удовлетворяющие условию внутри функции. Условие проверяет, равен ли индекс текущего элемента индексу его первого появления в массиве. Если это так, это означает, что элемент не является дубликатом и может быть включен в новый массив.
3. Использование метода .reduce
Метод .reduce
немного менее эффективен, чем метод .filter
. Он позволяет свести массив к одному значению, применив функцию к каждому элементу массива. В этом случае мы можем использовать .reduce
для создания нового массива, включающего только уникальные значения. Вот пример:
В этом примере мы используем методconst arr = [1, 1, 2, 2, 3, 4, 4, 5]; const uniqueArr = arr.reduce((acc, curr) => { if (!acc.includes(curr)) { acc.push(curr); } return acc; }, []); console.log(uniqueArr); // [1, 2, 3, 4, 5]
.reduce
для итерации по каждому элементу массива и применяем функцию, которая проверяет, находится ли текущий элемент уже в массиве аккумулятора (acc
). Если это не так, мы добавляем его в массив аккумулятора. Метод .reduce
возвращает конечное значение массива аккумулятора, который является массивом, содержащим только уникальные значения.
4. Использование метода .forEach
Метод .forEach
менее эффективен, чем предыдущие методы, но он по-прежнему является жизнеспособным вариантом. Он позволяет перебирать каждый элемент массива и применять к нему функцию. В этом случае мы можем использовать .forEach
для создания нового массива, содержащего только уникальные значения.
Вот пример:
В этом примере мы используем методconst arr = [1, 1, 2, 2, 3, 4, 4, 5]; const uniqueArr = []; arr.forEach((item) => { if (!uniqueArr.includes(item)) { uniqueArr.push(item); } }); console.log(uniqueArr); // [1, 2, 3, 4, 5]
.forEach
для итерации по каждому элементу массива и применения функции, которая проверяет, находится ли уже текущий элемент в массиве uniqueArr
. Если это не так, мы добавляем его в массив uniqueArr
. Результирующий массив содержит только уникальные значения.
5. Использование цикла for
Использование цикла for
является наименее эффективным способом удаления дубликатов из массива. Он требует больше кода и вычислительной мощности, и он не такой лаконичный, как другие методы. Вот пример:
В этом примере мы используем циклconst arr = [1, 1, 2, 2, 3, 4, 4, 5]; const uniqueArr = []; for (let i = 0; i < arr.length; i++) { if (!uniqueArr.includes(arr[i])) { uniqueArr.push(arr[i]); } } console.log(uniqueArr); // [1, 2, 3, 4, 5]
for
для итерации по каждому элементу массива. Проверяем, есть ли текущий элемент в массиве uniqueArr
. Если это не так, мы добавляем его в массив uniqueArr
. Результирующий массив содержит только уникальные значения.
Итоги
Удаление дубликатов из массива является распространенной задачей в JavaScript. В этой статье мы рассмотрели пять различных способов выполнения этой задачи с помощью JavaScript. Каждый метод имеет свои преимущества и недостатки, поэтому вам решать, какой метод наилучшим образом соответствует вашим потребностям. Независимо от того, используется ли объектSet
, метод .filter
, метод .reduce
, метод .forEach
или цикл for
, можно легко удалить дубликаты из массива и более эффективно обрабатывать данные.Как создать массив, заполненный числами в JavaScript
2 года назад·1 мин. на чтение
Иногда нужно создать массив заполненный числами в JavaScript или создать массив от 1 до определённого числа. В этой статье содержится короткий ответ для быстрого решения.
Короткое решение
Для получения массива чисел от 0 до N, можно воспользоваться методом массиваfrom
.
Array.from({ length: 10 }, (_, i) => i) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
Более универсальный способ в виде функции
length
- длина массива. fn
- функция для кастомизации элемента. Т.к. числа по умолчанию начинаются с нуля, мы можем передать i => i + 1
и получить массив от 1 до N, как в примере ниже.
Использованиеconst getNumbers = (length, fn = i => i) => { return Array.from({ length }, (_, i) => fn(i)) }
console.log(getNumbers(10, i => i + 1)) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] console.log(getNumbers(10)) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
Реверсированный массив
Здесь в функцию передается не простоlength
, а length - 1
. Это делается для того, чтобы сохранить соглашение, что индексы начинаются с 0
. См. пример ниже.
Использованиеconst getNumbersReversed = (length, fn = i => i ) => { return Array.from({ length }, (_, i) => fn(length - 1 - i)) }
console.log(getNumbersReversed(10, i => i + 1)) // [10, 9, 8, 7, 6, 5, 4, 3, 2, 1] console.log(getNumbersReversed(10)) // [9, 8, 7, 6, 5, 4, 3, 2, 1, 0]