Как сравнить два массива в JS (JavaScript)

Насколько сложно и как сравнить два массива в js (JavaScript), чтобы понять, равны они или нет? Зачастую большинству новичков сразу приходит в голову наиболее лёгкий способ, как им кажется. В частности, они пытаются использовать либо свободное равенство (double equals) ==, либо строгое равенство (triple equals) ===. Но, к сожалению, в данном случае этот вариант не подойдёт.

let array1 = [11, 22, 33];
let array2 = [11, 22, 33];

console.log(array1 == array2); // false
console.log(array1 === array2); // false

Это происходит потому, что массивы в JavaScript имеют тип Object.

let arrayType = typeof(array1);
console.log(arrayType); // Object"

А объекты сравниваются не на основе их значений, а на основе ссылок переменных.

console.log(array1[0] == array1[0]); // true
console.log(array1[1] === array1[1]); // true

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

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

Как сравнить два массива в js путём преобразования в строки

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

Для этого подойдут два метода преобразования массива в строку:

• метод JSON.stringify();
• метод toString().

Оба эта метода разные, как можно заметить ниже.

let array = [11, 22, 33];
console.log(JSON.stringify(array)); // '[11,22,33]'
console.log(array.toString()); // '11,22,33'

Как использовать JSON.stringify()

Этот метод позволяет сериализовать каждый массив путём преобразования в строку JSON. Затем можно сравнить две подобные строки.

let array1 = [11, 22, 33];
let array2 = [11, 22, 33];

console.log(JSON.stringify(array1) === JSON.stringify(array2)); // true

Можно также создать повторно используемую функцию, которая поможет сравнивать любые два массива, которые мы будем передавать в неё.

const compareArrays = (a, b) => {
  return JSON.stringify(a) === JSON.stringify(b);
};

let array1 = [11, 22, 33];
let array2 = [21, 22, 23];
let array3 = [11, 22, 33];

console.log(compareArrays(array1, array2)); // false
console.log(compareArrays(array1, array3)); // true

Как использовать toString()

Подобно JSON.stringify(), этот метод преобразует любой тип данных в строку и может аналогичным образом преобразовать и объект.

let array1 = [11, 22, 33];
let array2 = [11, 22, 33];

console.log(array1.toString() === array2.toString()); // true

Используя этот способ, можно также написать повторно используемую функцию для сравнения любых двух передаваемых в неё массивов.

const compareArrays = (a, b) => {
  return a.toString() === b.toString();
};

let array1 = [11, 22, 33];
let array2 = [21, 22, 23];
let array3 = [11, 22, 33];

console.log(compareArrays(array1, array2)); // false
console.log(compareArrays(array1, array3)); // true

Наиболее предпочтительным из этих способов является метод JSON.stringify(), поскольку он только сериализует массив. В этом случае он по-прежнему принимает форму массива. А строковую форму принимает только для сравнения с другим массивом.

Как сравнить два массива в js через их значения

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

console.log(null === undefined); // false

При использовании методов JSON.Stringify() или toString() результат будет true, чего не должно быть.

let array1 = [11, null, 33];
let array2 = [11, undefined, 33];

console.log(JSON.stringify(array1) === JSON.stringify(array2)); // true
console.log(array1.toString() === array2.toString()); // true

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

Использование метода every

Метод every() обрабатывает каждый элемент массива. Это называется функцией обратного вызова. У него есть доступ к некоторым базовым параметрам, таким как элемент, индекс и другим, которые можно использовать внутри функции.

// Синтаксис
array.every((currentValue, index, arr)=> { ... })

Используя этот метод мы сначала проверим, сопоставимы ли длины двух массивов. Затем мы переберём один массив и, используя его индекс, сравним его элементы с элементами во втором массиве.

const compareArrays = (a, b) =>
  a.length === b.length &&
  a.every((element, index) => element === b[index]);

let array1 = [11, 22, 33];
let array2 = [21, 22, 23];
let array3 = [11, 22, 33];

console.log(compareArrays(array1, array2)); // false
console.log(compareArrays(array1, array3)); // true

И в случае наличия null и undefined среди элементов массива, он сможет обнаружить, что они не совпадают.

const compareArrays = (a, b) =>
  a.length === b.length && a.every((element, index) => element === b[index]);

let array1 = [11, null, 33];
let array2 = [21, 22, 23];
let array3 = [11, undefined, 33];

console.log(compareArrays(array1, array2)); // false
console.log(compareArrays(array1, array3)); // false

Как сравнить два массива в js циклом for

Метод every() имеет лучший синтаксис. Тем не менее, реализовать такой подход можно с помощью других методов итерации. Например, цикл for, forEach() или map() наряду с условием if. Новичкам в таких способах, возможно, даже будет проще разобраться.

const compareArrays = (a, b) => {
  if (a.length !== b.length) return false;
  else {
    // Comparing each element of your array
    for (var i = 0; i < a.length; i++) {
      if (a[i] !== b[i]) {
        return false;
      }
    }
    return true;
  }
};

let array1 = [21, null, 33];
let array2 = [21, 22, 23];
let array3 = [21, undefined, 33];
let array4 = [21, 22, 23];

console.log(compareArrays(array1, array2)); // false
console.log(compareArrays(array1, array3)); // false
console.log(compareArrays(array2, array4)); // true

В обоих приведённых выше методах сначала осуществляется проверка длины массива. Если длина обоих массивов не равна, это автоматически означает, что они не равны. Это приводит к получению результата false.

Если длина равна, то проводится проверка каждого элемента. В этом случае возвращается результат false, как только два элемента с одним и тем же индексом (index) в обоих массивах отличаются.

Читайте также: Метод replace в JavaScript.

Кроссбраузерность

Все методы, представленные в этой статье, имеют полную поддержку современными браузерами, в том числе JSON.stringify(), toString(), every(). Из них только второй не воспринимается Internet Explorer.