Простой алгоритм пересечения массивов на 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() сравнивают объекты по ссылке, что иногда может вводить в заблуждение, поскольку фактическое содержимое объектов может быть идентичным.

  JS

  Скопировать код

    const objectArray1 = [{ id: 1 }, { id: 2 }];
    const objectArray2 = [{ id: 1 }, { id: 2 }];
    const intersection = objectArray1.filter(obj => objectArray2.includes(obj)); 
    // В результате получаем пустой массив []

  Запустить код
  Применяется метод **`some()`** для сравнения содержимого объектов:
  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 пропускает [🍌, 🥭, 🍉].

Их пересечение: точка, где фильтры пересекаются, это [🍌, 🥭].

Наступает время визуализации: Результат: [🍌, 🥭]

Завершение: баланс между эффективностью и простотой

В поисках равновесия между производительностью и простотой необходимо определить, что важнее для вашего скрипта. Важно уметь достичь понятного и удобного в использовании кода, учитывая при этом ограничения совместимости.

Таким образом, выбирайте то решение, будь то однострочный вариант или развёрнутый подход с сортировкой, которое наиболее подходит для решения ваших задач.

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

1. Array.prototype.filter() – JavaScript | MDN — подробное руководство по функции filter.
2. Array.prototype.includes() – JavaScript | MDN — описание использования метода includes().
3. Самый простой код для пересечения массивов в javascript – Stack Overflow — обсуждение методов пересечения, проверенное сообществом.
4. Вычисление пересечения двух массивов в JavaScript – Stack Overflow — еще одна полезная дискуссия на тему пересечений.
5. Спецификация языка ECMAScript 2015 – ECMA-262 6-е издание — официальная спецификация ES6 для объектов Set.
6. Нахождение объединения и пересечения двух несортированных массивов – GeeksforGeeks — гайд по работе с объединением и пересечением массивов.