比较两个数组与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>

Answer 2

let arrayToHtml = array1.filter(el=>{
    el.includes(array2);
})
arrayToHtml.forEach(val=>{
    addHtml(tag,text);
})

function addHtml(tag, text){
    let newEl = document.body.creatElement(tag);
    newEl.textContent(text);
    document.body.appendChild(newEl)
}

Answer 3

您有两个嵌套循环，这就是为什么得到0 0 1 1 2 2 3 3 4 4的原因。

一步一步走：

1. number1 = 0
2. number2 = 2
3. 如果条件不正确
4. 类不活动时输出为0
5. number1 = 0
6. number2 = 4
7. 如果条件不正确
8. 类不活动时输出为0
9. number1 = 1
10. number2 = 2
11. 如果条件不正确
12. 输出为1且未激活类
13. 等...

您绝对应该考虑定义一个数字变量，这样您就只能获得一次该元素：

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

使用includes和template literals将使您的代码更加优雅：

array1.forEach(function(number1){
   if (array2.includes(number1)) {
       numbers.innerHTML += `<span> ${number1} </span>`;
   } else {
       numbers.innerHTML += `<span class="inactive"> ${number1} </span>`;
   }
});