用 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

你有两个嵌套循环，这就是你得到 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. 等等……

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

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>`;
   }
});

Answer 2

您可以使用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 3

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)
}