Сравнение двух разных массивов JS

138
22 августа 2019, 15:00

Есть два массива которые нужно сравнить.

var arr1 = document.querySelectorAll('#items p'); //Первый массив 
var arr2 = [1,2,3,4,5] //Второй массив
<ul id="items"> 
  <li><p>1</p></li> 
  <li><p>2</p></li> 
  <li><p>3</p></li> 
  <li><p>4</p></li> 
  <li><p>5</p></li> 
</ul>

Нужно проверить совпадают ли значения параграфов с массивом, не получается вытащить значение p, поэтому не могу сравнить.

Одинаковые значения ввел для примера, значения подставляются все время разные.

Answer 1

Пример с полным соответствием:

var arr1 = document.querySelectorAll('#items p'); //Первый массив 
var arr2 = [1, 2, 3, 4, 5] //Второй массив 
 
if (arr1.length === arr2.length) { 
  for (var i = 0; i < arr1.length; i++) { 
    if (+arr1[i].textContent === arr2[i]) { 
      console.log('Значение ' + arr1[i].textContent + ' в массиве arr1 равно значению ' + arr2[i].toString() + ' в массиве arr2') 
    } else if (+arr1[i].textContent !== arr2[i]) { 
      console.log('Значение ' + arr1[i].textContent + ' в массиве arr1 не равно значению ' + arr2[i].toString() + ' в массиве arr2'); 
    } 
  } 
}
<ul id="items"> 
  <li> 
    <p>1</p> 
  </li> 
  <li> 
    <p>2</p> 
  </li> 
  <li> 
    <p>3</p> 
  </li> 
  <li> 
    <p>4</p> 
  </li> 
  <li> 
    <p>5</p> 
  </li> 
</ul>

Пример с несоответствием элементов:

var arr1 = document.querySelectorAll('#items p'); //Первый массив 
var arr2 = [1, 2, 3, 4, 5] //Второй массив 
 
if (arr1.length === arr2.length) { 
  for (var i = 0; i < arr1.length; i++) { 
    if (+arr1[i].textContent === arr2[i]) { 
      console.log('Значение ' + arr1[i].textContent + ' в массиве arr1 равно значению ' + arr2[i].toString() + ' в массиве arr2') 
    } else if (+arr1[i].textContent !== arr2[i]) { 
      console.log('Значение ' + arr1[i].textContent + ' в массиве arr1 не равно значению ' + arr2[i].toString() + ' в массиве arr2'); 
    } 
  } 
}
<ul id="items"> 
  <li> 
    <p>1</p> 
  </li> 
  <li> 
    <p>3</p> 
  </li> 
  <li> 
    <p>4</p> 
  </li> 
  <li> 
    <p>4</p> 
  </li> 
  <li> 
    <p>5</p> 
  </li> 
</ul>

P.S. Так же можно сделать проверку на типы

Answer 2

function check(ps, vals) { 
  if (ps.length !== vals.length) { 
    return false; 
  } 
   
  for (var q=0; q<vals.length; ++q) { 
    if (ps[q].textContent != vals[q]) { 
      return false; 
    } 
  } 
   
  return true; 
} 
 
console.log(check( 
  document.querySelectorAll('#items p'), 
  [1,2,3,4,5] 
));
<ul id="items"> 
  <li><p>1</p></li> 
  <li><p>2</p></li> 
  <li><p>3</p></li> 
  <li><p>4</p></li> 
  <li><p>5</p></li> 
</ul>

READ ALSO
Как объяснить функции что за переменная?

Как объяснить функции что за переменная?

Как объяснить функции какое значение мы передали?

116
Заливка слоя-маски

Заливка слоя-маски

Предыстория

128
Как запустить скрипт ещё раз?

Как запустить скрипт ещё раз?

У меня есть вот такой скрипт

102