Продвинутые методы программирования на JavaScript: сравнение элементов двух массивов

Массивы (Arrays) являются неотъемлемой частью программирования. Поэтому нам, программистам и разработчикам, необходимо научиться эффективно с ними работать. В данном случае речь пойдет об умении быстро и легко выполнять операции, связанные со сравнением массивов. Знакомясь с различными подходами и решениями, осваивая продвинутые методы, мы совершенствуем свои навыки в области программирования.

Итак, как же сравнить два массива? Как определить в них общие, различные и симметрично различные элементы? В статье рассмотрим 2 метода решения этой задачи: сначала с использованием объектов Set, затем с применением функций высшего порядка.

Пересечение массивов (использование Set)

Чтобы найти intersection (пересечение) элементов двух массивов, проверим наличие каждого элемента первого массива во втором массиве. Элемент, который есть в обоих массивах, добавим в новый массив. Таким образом мы преобразуем оба массива в объекты Set. Затем с помощью метода has() проверим, есть ли каждый элемент массива nums1 в setNums2 Set Object.

let nums1 = [1, 2, 3, 4, 5]
let nums2 = [3, 4, 5, 6]

let setNums1 = new Set(nums1)
let setNums2 = new Set(nums2)

let intersections = nums1.filter((num) => 
setNums2.has(num))

console.log(intersections) // [ 3, 4, 5 ]

let setIntersections = new Set(intersections)

console.log(setIntersections) // Set { 3, 4, 5 }

Различие массивов (использование Set)

Теперь найдем в массиве nums1 элементы, которых нет в setNums2 Set Object. В данном примере 1 и 2  —  это элементы, удовлетворяющие этому критерию в массиве nums1.

let nums1 = [1, 2, 3, 4, 5]
let nums2 = [3, 4, 5, 6]

let setNums1 = new Set(nums1)
let setNums2 = new Set(nums2)

let differences = nums1.filter((num) => 
!setNums2.has(num))

console.log(differences) // [ 1, 2 ]

Симметричное различие массивов (использование Set)

Теперь найдем в массивах nums1 и nums2 уникальные элементы  —  те, которые не находятся в обоих массивах одновременно.

let nums1 = [1, 2, 3, 4, 5]
let nums2 = [3, 4, 5, 6]

let setNums1 = new Set(nums1)
let setNums2 = new Set(nums2)

let symmetrics = nums1
   .filter((num) => {
     return !setNums2.has(num)
 })
 .concat(
   nums2.filter((num) => {
     return !setNums1.has(num)
   })
 )

console.log(symmetrics) // [ 1, 2, 6 ]

Пересечение массивов (использование функций высшего порядка)

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

let arr1 = [“a”, “b”, “e”, “f”]
let arr2 = [“a”, “b”, “c”, “d”]

let intersection = arr1.filter((item) => 
arr2.includes(item))

console.log(intersection) // [ ‘a’, ‘b’ ]

Различие массивов (использование функций высшего порядка)

В отличие от описанной выше ситуации, теперь все должно быть в точности наоборот. Каждый элемент первого массива не должен находиться во втором массиве. В данном примере “e” и “f” являются элементами, находящимися только в массиве arr1.

let arr1 = [“a”, “b”, “e”, “f”]
let arr2 = [“a”, “b”, “c”, “d”]

let difference = arr1.filter((item) => 
!arr2.includes(item))

console.log(difference) // [ ‘e’, ‘f’ ]

Так же находим элементы, находящиеся только во втором массиве.

let arr1 = [‘a’, ‘b’, ‘e’, ‘f’]
let arr2 = [‘a’, ‘b’, ‘c’, ‘d’]

let difference = arr2.filter((item) => 
!arr1.includes(item))

console.log(difference) // [ ‘c’, ‘d’ ]

Симметричное различие массивов (использование функций высшего порядка)

Все элементы, кроме элементов пересечения массивов, являются симметрично различными элементами. В данном случае это элементы “e” и “f” из первого массива и “c” и “d” из второго массива. Чтобы добавить эти элементы в массив, воспользуемся методом concat.

let symetric = arr2
  .filter((item) => {
     return !arr1.includes(item)
 })
 .concat(
   arr1.filter((item) => {
     return !arr2.includes(item)
   })
 )

console.log(symetric) // [ ‘c’, ‘d’, ‘e’, ‘f’ ]

Заключение

Мы рассмотрели наиболее распространенные случаи использования объекта Set, а также уделили внимание методам filter, includes и concat. Надеюсь, статья была полезной для вас и вы успешно примените полученные знания на практике!

Читайте также:

• Как это использовать: объявление функции и функциональные выражения
• Как использовать ESLint, чтобы повысить качество кода JavaScript и TypeScript
• Как не лажать с JavaScript. Часть 4

Читайте нас в Telegram, VK и Дзен

---

Перевод статьи Cihan: Advanced JavaScript Tips and Tricks: How To Compare the Elements of Two Arrays