Javascript: как сравнить два массива объектов и удалить одинаковые значения?

У меня есть два массива:
Это основной массив (я печатаю его в html, но пользователь может удалять объекты):

checkboxes = [
{name: "boxes", color: "red"},
{name: "boxes", color: "orange"},
{name: "tree", color: "green"}
{name: "tree", color: "red"}
{name: "tree", color: "yellow"}
]

А это массив с элементами, которые нужно удалить в checkboxes[]:

finalArray = [
{name: "tree", color: "green"}
{name: "tree", color: "red"}
{name: "tree", color: "yellow"}
]

Результат после удаления одинаковых объектов из этого массива должен быть:

checkboxes = [
{name: "boxes", color: "red"},
{name: "boxes", color: "orange"}
]

Итак, я получаю массив (finalArray[]) с объектами для удаления в флажках[].
Все одинаковые объекты должны быть удалены.
Я пробовал:
.filter и .map, но я не получил прогресса.

Спасибо.

Подобные объекты нужно сравнивать с вашим собственным кодом, который работает в соответствии с вашими потребностями, что означает «равный». Обычно в JavaScript два разных объекта никогда не будут == друг к другу, независимо от того, что они содержат.

Pointy 17.05.2022 04:12

В finalArray есть объекты, которые нужно удалить из флажков []. Это как условие. Если я получаю этот массив, мне нужно сделать так, чтобы флажки имели только разные объекты.

Gonzalo 17.05.2022 04:27

Дело в том, что каждый объект не равен любому другому объекту. {a: 1} не равен другому {a: 1} объекту.

Pointy 17.05.2022 04:33
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
3
3
41
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

попробуйте использовать фильтр и проверьте, существует ли этот элемент в finalArray, используя найти внутри.

var checkboxes = [
  { name: "boxes", color: "red" },
  { name: "boxes", color: "orange" },
  { name: "tree", color: "green" },
  { name: "tree", color: "red" },
  { name: "tree", color: "yellow" },
];

var finalArray = [
  { name: "tree", color: "green" },
  { name: "tree", color: "red" },
  { name: "tree", color: "yellow" },
];

checkboxes = checkboxes.filter(element => !finalArray.find(e => e.name === element.name && e.color === element.color));
Ответ принят как подходящий

let checkboxes = [
  {name: "boxes", color: "red"},
  {name: "boxes", color: "orange"},
  {name: "tree", color: "green"},
  {name: "tree", color: "red"},
  {name: "tree", color: "yellow"}
]
let finalArray = [
  {name: "tree", color: "green"},
  {name: "tree", color: "red"},
  {name: "tree", color: "yellow"}
]
checkboxes = checkboxes.filter(ele => !finalArray.some(finalEle => JSON.stringify(finalEle) === JSON.stringify(ele)))
console.log(checkboxes)

В этом случае мощь работает, но использование JSON.stringify() ненадежно.

Pointy 17.05.2022 04:34

да, в другом случае лучший ответ - проверенное свойство объекта

Xupitan 17.05.2022 04:37

почему ненадежно использовать JSON.stringify? может быть, мне нужно было бы иметь идентификатор для деревьев и ящиков?

Gonzalo 17.05.2022 04:44
JSON.stringify({color: "red", name: "boxes"}) и JSON.stringify({name: "boxes", color: "red"})
Xupitan 17.05.2022 04:47

Порядок появления свойств в выводе .stringify() не гарантируется. Как я уже сказал, мощь работает, но может и не работать, даже если объекты кажутся равными. Кроме того, если объекты имеют значения свойств, которые не могут быть частью JSON, это также не сработает. В общем, это не очень хороший способ сделать что-то.

Pointy 17.05.2022 05:01

Другие вопросы по теме