Как в Javascript получить массив уникальных значений (unique array)?

15.08.2018 / oberset

Каждый разработчик рано или поздно сталкивался с необходимостью получения массива уникальных значений (unique array). У объекта Array в Javascript отсутствует стандартный метод, который бы вернул уникальный массив, поэтому приходиться искать обходные пути. К счастью, подобная задача имеет несколько стандартных решений и отфильтровать массив, оставив в нем только уникальные неповторяющиеся значения не составит труда. Рассмотрим три наиболее простых варианта.

Функция uniq из библиотеки Lodash

Если есть возможность подключить библиотеку Lodash и нет желания самому реализовывать фильтрацию массива, можно воспользоваться библиотечной функцией uniq. Эта функция принимает исходный массив в качестве аргумента и возвращает отфильтрованный массив с уникальными значениями. Пример использования: // Lodash подключена и доступна через переменную _ _.uniq(['one', two', 'one', 'three']); // ['one', two', 'three'] Кроме uniq в Lodash множество полезных функций, которые вам обязательно пригодятся!

Использование объекта Set

В ES6 для решения подобной задачи можно применить объект Set, который хранит набор уникальных значений. Нужно создать объект Set, передав ему в качестве значений элементы исходного массива, а после этого преобразовать значения объекта обратно в массив. Вот пример, как это можно сделать: const uniqueArray = (array) => Array.from(new Set(array)); uniqueArray([1,2,3,1,3,4]); // [ 1, 2, 3, 4 ]

В этом примере мы также использовали статический метод from класса Array, который умеет преобразовывать массивоподобный(array-like) объект или итератор в массив. Этот вариант решения занимает 1 строчку кода.

Собственная реализация функции unique

Этот вариант подойдет для тех, кто не ищет легких путей. Алгоритм решения задачи следующий: нужно для каждого элемента массива проверить, нет ли в массиве другого элемента, значение которого равно текущему. Используя метод filter можно значительно сократить код: const uniqueArray = (array) => array.filter((item, i, passedArray) => passedArray.indexOf(item) === i); uniqueArray([1,2,2,2,2,1,2,1,2]); // [ 1, 2 ]

Есть также масса более громоздких и примитивных способов реализации uniqueArray через циклы, но останавливаться на них не имеет смысла. Всегда лучше выбрать более короткое и простое решение.

Примеры использования Array reduce в Javascript

Метод reduce(callback, initialValue) возвращает результат функции callback, которая применяется к каждому элементу массива.

Для чего нужна функция debounce и как она работает

Функция debounce возвращает обертку, которая откладывает вызов исходной функции на определенное время. Пример собственной реализации функции debounce.

Как получить локальный IP-адрес пользователя на Javascript

Пример получения локального IP-адреса клиентской машины на Javascript с помощью HTML5 RTCPeerConnection API.

Комментарии (0)

Зарегистрируйтесь или авторизуйтесь, чтобы оставлять комментарии.