ПРИХОДИТЕ УЧИТЬСЯ НОВОЙ ПРОФЕССИИ ЛЕТОМ СО СКИДКОЙ ДО 70%Забронировать скидку
logo

Сравнение массивов объектов в JavaScript: поиск различий

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию
В конце подарим скидку до 55% на обучение
Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

Быстрый ответ

В поисках уникальных объектов в диапазоне двух массивов, мы сосредоточимся на ключевых свойствах, таких как id. Для достижения результата используем filter и some:

JS
Скопировать код
const diff = (a1, a2, key) => a1.filter(o1 => !a2.some(o2 => o1[key] === o2[key]));

// Пример применения:
const arr1 = [{ id: 1 }, { id: 2 }];
const arr2 = [{ id: 2 }, { id: 3 }];

console.log(diff(arr1, arr2, 'id')); // [{ id: 1 }] – Результат рядом.

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

Если объекты отличаются сложностью, то есть имеют множество свойств, потребуется функция глубокого сравнения. Обратите внимание на пример:

JS
Скопировать код
function deepDiff(a1, a2, comparer) {
  return a1.filter(o1 => !a2.some(o2 => comparer(o1, o2)));
}

// Функция сравнения, точно определяющая равенство объектов по всем их свойствам
const comparer = (obj1, obj2) => {
  return Object.keys(obj1).every(key => obj1[key] === obj2[key]);
};

// Практический пример использования:
const arr1 = [{ id: 1, value: 'Apple' }, { id: 2, value: 'Orange' }];
const arr2 = [{ id: 2, value: 'Orange' }, { id: 3, value: 'Peach' }];

console.log(deepDiff(arr1, arr2, comparer)); // [{ id: 1, value: 'Apple' }] – Цель достигнута!

Визуализация

Представьте две корзины с фруктами 🧺. Каждый фрукт — это сущность в виде объекта.

Markdown
Скопировать код
Корзина (🧺🍎): [🍏, 🍎, 🍊]
Вторая корзина (🧺🍐): [🍎, 🍐, 🍊]

Задача — обнаружить уникальные фрукты (объекты) в каждой корзине.

Markdown
Скопировать код
Уникальные фрукты в первой корзине (🧺🍎 – 🧺🍐): [🍏]
Уникальные фрукты во второй корзине (🧺🍐 – 🧺🍎): [🍐]

Схожим образом мы определяем разницу между двуми массивами объектов в JavaScript.

Расширьте свой набор инструментов – Альтернативные решения

Для работы с большим объёмом данных или в случае ограничения по времени, рекомендуется использовать более эффективные методы:

JS
Скопировать код
function efficientDiff(a1, a2, key) {
  const set = new Set(a2.map(item => item[key]));
  return a1.filter(item => !set.has(item[key]));
}

Отыскание утраченных артефактов – Симметричная разность

Чтобы найти элементы, которые присутствуют только в одном из массивов, примените комбинацию diff(a1, a2, key) и diff(a2, a1, key). Так можно вычислить симметричную разность.

JS
Скопировать код
const symDiff = (a1, a2, key) =>
  [...diff(a1, a2, key), ...diff(a2, a1, key)];

Мощные помощники под рукой – Использование библиотек

Для решения более крупномасштабных и сложных задач придёт к стати библиотека lodash:

JS
Скопировать код
// Вступаем в работу с lodash
const _ = require('lodash');

// Разрешаем задачу нахождения разницы (DIFF)
const diff = _.differenceWith(arr1, arr2, _.isEqual);

console.log(diff); // Волшебство lodash с функцией _.isEqual для объектов.

Глубины сложности – Работа с вложенными объектами

Развивая тему работы с сложными структурами и вложенными объектами, обратите внимание на функцию глубокого сравнения. Возможно придется модифицировать вашу функцию сравнения:

JS
Скопировать код
// Функция глубокого сравнения – инструмент для опытных
const deepEqual = (obj1, obj2) => {
  // Отличается она рекурсивным алгоритмом сопоставления свойств объектов
  // Будьте внимательны: могущественный, но сложный инструмент.
};

Полезные материалы

  1. Array.prototype.filter() – JavaScript | MDN
  2. Array.prototype.map() – JavaScript | MDN
  3. Array.prototype.reduce() – JavaScript | MDN
  4. Операции с множествами в JavaScript – 30 секунд кода
  5. Документация Lodash
  6. Объекты – JavaScript.Info