JavaScript | Уникальные значения элементов в массиве

Как отобрать элементы с уникальными значениями в массиве?

У нас есть массив из чисел:

var massiv = [1, 2, 3, 3, 4, 4, 4, 5, 6, 7, 10, 10, 10, 40, 65, 83, 83, 83, 109, 109, 432, 456]

Этот массив отсортирован по возрастанию элементов, чтобы было легче его воспринимать и видеть дубликаты значений.

Массив с повторяющимися значениями в элементах - JavaScript
Массив с повторяющимися значениями в элементах — JavaScript

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

Видео инструкция

В этом видео приводится пример создания набора уникальных элементов массива JavaScript. Ввод команд осуществляется в консоль браузера Google Chrome. Результат виден сразу.

Решение задачи

У «Глобального Объекта» JavaScript есть свойства-конструкторы Array и Set — массивы и наборы. Каждое из этих свойств является конструктором для создания экземпляров своего вида. Так, конструктор Array() создаёт экземпляры массивов, а конструктор Set() создаёт экземпляры наборов.

Для начала мы передадим наш массив в конструктор Набора. Новый набор мы можем создать только при помощи оператора new.

new Set(massiv)
Набор из Массива - JavaScript
Набор из Массива — JavaScript

В ответ получаем объект Набора. «Внутренний Слот» (Internal Slot) — [[Entries]]. Этот слот содержит массив в котором произошли нужные нам преобразования.

Объект-прототип Set - JavaScript
Объект-прототип Set — JavaScript

Теперь нам нужно достать из этого Набора (Set) массив с уникальными элементами. Для этого будем использовать свойство from() конструктора Array.

Array.from(new Set(massiv))

В ответ нам приходит массив с уникальными значениями элементов

Массив с уникальными значениями элементов - JavaScript
Массив с уникальными значениями элементов — JavaScript

 

Итог

Мы применили два конструктора и получили уникальные значения элементов в массиве. Мы избавились от дублей, тем самым укоротили длину массива. Это очень полезное решение, когда дело касается обхода каждого элемента массива (например, обхода URL адресов из массива).

Информационные ссылки

Стандарт ECMAScriptМассивыhttps://tc39.es/ecma262/#sec-array-objects

Стандарт ECMAScriptНаборыhttps://tc39.es/ecma262/#sec-set-objects

Объекты Наборы

Поделись записью