Во время работы на днях у меня была небольшая проблема, и я узнал о чем -то, что я нашел довольно полезным, поэтому я подумал: «Эх, какого черта, почему бы не создать пост по этому поводу?
Моя команда интегрировала Wysiwyg (Кстати … это, очевидно, означает, что вы видите, это то, что вы получаете, три года в этой отрасли Я только сейчас узнал об этом) в бэкэнд нашего приложения React для создания сообщений. Эти посты имеют два столбца, которые могут вернуть либо Markdown , кнопки или активы (изображения и видео). Эти данные возвращаются из нашего Graphql API как массив двух предметов, что -то вроде этого
Array [Object {type: “text”}, Object {type: “Asset”}]
Теперь эти два бита данных будут обернуты в компонент с макетом с двумя столбцами и на основе его типа (например: Текст , актив или кнопка ) мы отображаем другой компонент.
Так… в чем проблема?
В нашем Wysiwig Редактор, любой текст, записанный в нашем первом столбце, который переполняет максимальную длину слова, текст охватывает наш второй столбец, что дает наши данные обратно {type: "text"} поле. Ну, если вы вообще знакомы с React, чтобы вернуть отметка Мы используем DangustySetInnerHtml Опоре на нашем элементе и передайте наши данные об отметках.
Итак, если мы используем Array.filter () Метод, чтобы отобразить соответствующий составная часть , если Массив Содержит два объекта с типом текста, я в конечном итоге сделаю отметки дважды … очевидно, не желается.
Так что, как будто удалить дубликаты из своего массива, чувак?
Поэтому мне нужно удалить любые дубликаты из массива моих сообщений, что достаточно просто, чтобы сделать. Мы могли бы сначала использовать Множество. Map () За наши сообщения массивы, чтобы получить тип каждого поста, а затем используйте Array.filter () Метод для сравнения предыдущего элемента с текущим элементом, предоставив нам новый массив, который мы могли бы затем проверить с исходным массивом, чтобы убедиться, что у нас есть наш предполагаемый результат.
let.map ({post} => post); let.filter ((type, i) => types.indexof (type)));
Здесь нет ничего плохого с этим кодом. Об этом довольно просто, мы не делаем никакой мутации данных, и мы не допускаем побочных эффектов от нашей карты. Тем не менее, есть еще более простой способ вернуть уникальный список объектов (ну, на самом деле любое примитив) в JavaScript … Установить объект.
Что такое объект SET?
Установить это объект, который может хранить любой тип примитива JavaScript (подумайте логические, , Строки , Числа Здесь), но он будет хранить только уникальный Примитивы. Чего ждать??? Это потрясающе! Да , мой коллега -разработчик, Да Анкет
Вместо того, чтобы использовать метод фильтра, все, что нам нужно сделать, это пройти наше Posttypes массив в Установить объект и оберните его в массив.
Пусть фильтедпосты = [… новый набор (posttypes)];
и Бей! целый новый массив с удаленными дубликатами. Но это не все люди! Установить Объект также поставляется с некоторыми удобными методами, а также, как add () и Включает () добавить или найти объекты в вашем наборе.
Я рекомендую взглянуть на Mozilla Set Документация во всех прохладных методах, которые вы имеете в вашем распоряжении с Установить Анкет
Оригинал: “https://dev.to/keevcodes/the-javascript-set-object-2f75”