Простой алгоритм пересечения массивов на JavaScript
Быстрый ответ
Пересечение двух массивов можно добиться всего одной строкой кода, применяя методы filter()
и includes()
. Это быстрый, актуальный и элегантный метод:
const intersection = array1.filter(value => array2.includes(value));
У нас filter()
играет главную роль, итерируя через каждый элемент массива array1
. А includes()
активно помогает, проверяя, содержит ли элемент массив array2
. В итоге получаем отлично отфильтрованный массив общих элементов!
Подробности происходящего за кулисами
Детально остановимся на основных актёрах нашего представления и рассмотрим альтернативы. Пройдемся по вопросам совместимости и оптимизации, а также обсудим нюансы работы с объектами.
Совместимость с браузерами и настройка производительности
Не все звезды исполняются одинаково хорошо в любых условиях. Если ES6 применяется неудачно, например метод includes
не поддерживается, можно воспользоваться методом indexOf
:
// подход живший ещё во времена ES5
const intersection = array1.filter(value => array2.indexOf(value) !== -1);
При работе с большими объемами данных использование Set
может оказать влияние на производительность array2
:
// Set — технология, впечатляющая своим мастерством
const setB = new Set(array2);
const intersection = array1.filter(value => setB.has(value));
Взаимодействие объектов в массивах
Проявления особенностей объектов в массивах:
Затруднения при сравнении:
includes()
иindexOf()
сравнивают объекты по ссылке, что иногда может вводить в заблуждение, поскольку фактическое содержимое объектов может быть идентичным.Применяется метод **`some()`** для сравнения содержимого объектов:JSСкопировать кодconst objectArray1 = [{ id: 1 }, { id: 2 }]; const objectArray2 = [{ id: 1 }, { id: 2 }]; const intersection = objectArray1.filter(obj => objectArray2.includes(obj)); // В результате получаем пустой массив []
JSСкопировать кодconst intersection = objectArray1.filter(obj1 => objectArray2.some(obj2 => obj1.id === obj2.id) );
Весь мир — сцена: альтернативы для поиска пересечений
Сортированные массивы: для сортированных массивов, которые исключают хаос и облегчают поиск нужных данных, применяется следующий код:
JSСкопировать кодfunction intersectSortedArrays(a, b) { let ai = 0, bi = 0; const intersection = []; while (ai < a.length && bi < b.length) { if (a[ai] < b[bi]) { ai++; } else if (a[ai] > b[bi]) { bi++; } else { intersection.push(a[ai]); ai++; bi++; } } return intersection; }
Устранение дубликатов:
Set
используется для устранения повторяющихся элементов в итоговом массиве.JSСкопировать кодconst intersection = [...new Set(array1)].filter(value => array2.includes(value));
Производительность под лучами прожекторов
Если вы не уверены, какой подход способствует лучшей производительности, сравните варианты на jsperf.com/array-intersection-comparison, чтобы ваш код выполнялся максимально эффективно!
Визуализация
Массив A: [🍎, 🍌, 🍇, 🥭] Массив B: [🍌, 🥭, 🍉]
Представим фильтры A и B, где A пропускает [🍎, 🍌, 🍇, 🥭], а B пропускает [🍌, 🥭, 🍉].
Их пересечение: точка, где фильтры пересекаются, это [🍌, 🥭].
Наступает время визуализации: Результат: [🍌, 🥭]
Завершение: баланс между эффективностью и простотой
В поисках равновесия между производительностью и простотой необходимо определить, что важнее для вашего скрипта. Важно уметь достичь понятного и удобного в использовании кода, учитывая при этом ограничения совместимости.
Таким образом, выбирайте то решение, будь то однострочный вариант или развёрнутый подход с сортировкой, которое наиболее подходит для решения ваших задач.
Полезные материалы
- Array.prototype.filter() – JavaScript | MDN — подробное руководство по функции filter.
- Array.prototype.includes() – JavaScript | MDN — описание использования метода
includes()
. - Самый простой код для пересечения массивов в javascript – Stack Overflow — обсуждение методов пересечения, проверенное сообществом.
- Вычисление пересечения двух массивов в JavaScript – Stack Overflow — еще одна полезная дискуссия на тему пересечений.
- Спецификация языка ECMAScript 2015 – ECMA-262 6-е издание — официальная спецификация ES6 для объектов Set.
- Нахождение объединения и пересечения двух несортированных массивов – GeeksforGeeks — гайд по работе с объединением и пересечением массивов.