Сравнение массивов объектов в JavaScript: поиск различий
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
В поисках уникальных объектов в диапазоне двух массивов, мы сосредоточимся на ключевых свойствах, таких как id
. Для достижения результата используем filter
и some
:
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 }] – Результат рядом.
Сложный метод глубокого сравнения
Если объекты отличаются сложностью, то есть имеют множество свойств, потребуется функция глубокого сравнения. Обратите внимание на пример:
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' }] – Цель достигнута!
Визуализация
Представьте две корзины с фруктами 🧺. Каждый фрукт — это сущность в виде объекта.
Корзина (🧺🍎): [🍏, 🍎, 🍊]
Вторая корзина (🧺🍐): [🍎, 🍐, 🍊]
Задача — обнаружить уникальные фрукты (объекты) в каждой корзине.
Уникальные фрукты в первой корзине (🧺🍎 – 🧺🍐): [🍏]
Уникальные фрукты во второй корзине (🧺🍐 – 🧺🍎): [🍐]
Схожим образом мы определяем разницу между двуми массивами объектов в JavaScript.
Расширьте свой набор инструментов – Альтернативные решения
Для работы с большим объёмом данных или в случае ограничения по времени, рекомендуется использовать более эффективные методы:
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)
. Так можно вычислить симметричную разность.
const symDiff = (a1, a2, key) =>
[...diff(a1, a2, key), ...diff(a2, a1, key)];
Мощные помощники под рукой – Использование библиотек
Для решения более крупномасштабных и сложных задач придёт к стати библиотека lodash:
// Вступаем в работу с lodash
const _ = require('lodash');
// Разрешаем задачу нахождения разницы (DIFF)
const diff = _.differenceWith(arr1, arr2, _.isEqual);
console.log(diff); // Волшебство lodash с функцией _.isEqual для объектов.
Глубины сложности – Работа с вложенными объектами
Развивая тему работы с сложными структурами и вложенными объектами, обратите внимание на функцию глубокого сравнения. Возможно придется модифицировать вашу функцию сравнения:
// Функция глубокого сравнения – инструмент для опытных
const deepEqual = (obj1, obj2) => {
// Отличается она рекурсивным алгоритмом сопоставления свойств объектов
// Будьте внимательны: могущественный, но сложный инструмент.
};