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
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
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.info(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

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