Как оставить в массиве только уникальные значения js

Аватар пользователя Ivan Gagarinov
Ivan Gagarinov
01 ноября 2021

Чтобы получить из массива уникальные значения, можно воспользоваться простым алгоритмом:

  1. Инициируем простой массив, в который будем складывать результат
  2. Проходимся по исходному массиву и на каждой итерации проверяем, если в результате еще нет текущего элемента, то добавляем его в результат.

Для реализации можно использовать либо цикл, либо встроенные методы для перебора массива, например reduce:

const items = ['item1', 'item2', 'item1', 'item3', 'item2', 'item4'];
const result = items.reduce((acc, item) => {
  if (acc.includes(item)) {
    return acc; // если значение уже есть, то просто возвращаем аккумулятор
  }
  return [...acc, item]; // добавляем к аккумулятору и возвращаем новый аккумулятор
}, []);
console.log(result); // => ['item1', 'item2', 'item3', 'item4']
6 0
Аватар пользователя Виктория Аблаева
Виктория Аблаева
21 октября 2022

Чтобы оставить в массиве только уникальные значения, воспользуемся таким лайфхаком:

const names = ['Karina', 'Ilona', 'Petr', 'Maks', 'Ilona', 'Maks'];
const uniqueNames = new Set(names); // создаём коллекцию уникальных значений
console.log(Array.from(uniqueNames)); // => [ 'Karina', 'Ilona', 'Petr', 'Maks' ]
// преобразуем в массив

Документация:

Set

5 0
Аватар пользователя diablero
diablero
16 февраля 2023

По сути как первое решение, но чуть усовершенствованное. Работает на ВСЕХ типах, включая объекты и функции (но кроме null/false/undefined)

const options = [
    'Раз',
    2,
    3,
    true,
    (a, b) => a + b,
    4,
    'Раз',
    56,
    { a: 1, b: 0 },
    3,
    2,
    (a, b) => a + b,
    'Раз',
    { a: 1, b: 0 },
    1,
    false,
    false,
    true,
    (a, b) => a + b,
];


const getUniqueOptions = (options) => {
    return options.reduce(
        (res, cur) =>
            res.find((find) => JSON.stringify(find) === JSON.stringify(cur))
                ? res
                : [...res, cur],
        []
    ).sort((a, b) => a - b); // и сортировочка для красоты :)
};

console.log(getUniqueOptions(options)); // ['Раз', 2, 3, true, ƒ, 4, 56, {…}, 1, false, false]
3 0
Аватар пользователя Кирилл Маркеев
Кирилл Маркеев
05 ноября 2022

Чтобы оставить в массиве только уникальные значения, можно воспользоваться методами filter() и indexOf():

const array = [1, 2, 1, 2, 3, 4, 5, 2, 4, 1, 1, 6];

const getUnique = (arr) => {
  return arr.filter((el, ind) => ind === arr.indexOf(el));
};

console.log(getUnique(array)); // => [ 1, 2, 3, 4, 5, 6 ]

Принцип работы заключается в том, что мы сравниваем индекс текущего элемента массива (ind) с индексом первого вхождения этого элемента в массив (arr.indexOf(el)). И если они не равны, то это означает, что вхождение данного элемента в массив является не первым, то есть элемент ранее уже встречался в массиве.

4 1
Аватар пользователя Виталий Меншиков
Виталий Меншиков
15 февраля 2023
console.log(Array.from(new Set([1, 2, 1, 2, 3, 4, 5, 2, 4, 1, 1, 6]))) 
// [ 1, 2, 3, 4, 5, 6 ]
0 1
Основы Frontend за 14 дней
  • 72 урока в онлайн-тренажере
  • 4 живых вебинара и масскодинг
  • Помощь наставника на весь период обучения

Есть что добавить? Зарегистрируйтесь

или войдите в аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Курсы по программированию в Хекслете

Backend-разработка

Разработка серверной части сайтов и веб-приложений

Frontend-разработка

Разработка внешнего интерфейса сайтов и веб-приложений и верстка

Создание сайтов

Разработка сайтов и веб-приложений на JS, Python, Java, PHP и Ruby on Rails

Тестирование

Ручное тестирование и автоматизированное тестирование на JS, Python, Java и PHP

Аналитика данных

Сбор, анализ и интерпретация данных на Python

Интенсивные курсы

Интенсивное обучение для продолжающих

DevOps

Автоматизация настройки локального окружения и серверов, развертывания и деплоя

Веб-разработка

Разработка, верстка и деплой сайтов и веб-приложений, трудоустройство для разработчиков

Математика для программистов

Обучение разделам математики, которые будут полезны при изучении программирования

JavaScript

Разработка сайтов и веб-приложений и автоматизированное тестирование на JS

Python

Веб-разработка, автоматическое тестирование и аналитика данных на Python

Java

Веб-разработка и автоматическое тестирование на Java

PHP

Веб-разработка и автоматическое тестирование на PHP

Ruby

Разработка сайтов и веб-приложений на Ruby on Rails

Go

Курсы по веб-разработке на языке Go

HTML

Современная верстка с помощью HTML и CSS

SQL

Проектирование базы данных, выполнение SQL-запросов и изучение реляционных СУБД

Git

Система управления версиями Git, регулярные выражения и основы командой строки