javascript - 使用 forEach 比较两个数组并根据条件添加不同的 html 元素

Question

我想用 forEach 比较两个数组。当两个数组有匹配的元素时，它会插入一个 html 元素，并且，如果没有匹配的元素，它会插入不同的 html 元素。

var array1 = [0, 1, 2, 3, 4];
    var array2 = [2, 4];
    
    array1.forEach(function(number1){
      array2.forEach(function(number2){
        if(number1 === number2){
          document.getElementById('numbers').innerHTML += '<span>' + number1 + '</span>'
        } else {
          document.getElementById('numbers').innerHTML += '<span class="inactive">' + number1 + '</span>'
        }
      });
    });

span {
  font-weight: bold;
  margin-left: 10px;
}

.inactive {
  font-weight: normal;
}

<div id='numbers'></div>

Answer 1

您可以使用 Array.includes() 而不是第二个 Array.forEach() 调用检查第二个数组中是否找到第一个数组中的项目:

const array1 = [0, 1, 2, 3, 4];
const array2 = [2, 4];

array1.forEach(function(number1){
  console.log(array2.includes(number1) ? 'yes' : 'no');
});

或者根据您的情况:

const array1 = [0, 1, 2, 3, 4];
const array2 = [2, 4];

const numbers = document.getElementById('numbers');

array1.forEach(function(number1){
  const inactive = !array2.includes(number1) ? 'class="inactive"' : '';
  numbers.innerHTML += `<span ${inactive}> ${number1} </span>`;
});

span:not(.inactive) {
  font-weight: bold;
}

<div id="numbers"></div>