如何在JavaScript中筛选数组内的奇偶数字并分别渲染至HTML不同段落？

嘿，我来帮你搞定这个问题～先看看你代码里的几个小问题：

• forEach用法错误：forEach需要传入一个回调函数引用，但你写的numbers.forEach(sort())是直接调用了sort函数，而不是把它传给forEach。而且sort函数里没有接收当前遍历的元素，反而用了未定义的变量e，这会导致numbers[e]是undefined，判断自然出错。
• innerHTML覆盖问题：就算你修复了遍历逻辑，直接给innerHTML赋值的话，每次都会覆盖之前的内容，最后只会显示最后一个符合条件的数字，而不是所有的。

下面给你两种简单可行的解决方案：

方法一：用filter筛选数组（推荐） #

filter方法可以直接帮你筛选出符合条件的元素，返回一个新数组，之后我们把数组转成字符串插入到HTML里就好：

// 定义数字数组
const numbers = [1,2,3,4,5,6,7,8,9,10];

// 筛选偶数和奇数
const evenNumbers = numbers.filter(num => num % 2 === 0);
const oddNumbers = numbers.filter(num => num % 2 !== 0);

// 把结果插入到对应的段落中
document.querySelector("#even").innerHTML = `偶数：${evenNumbers.join(', ')}`;
document.querySelector("#odd").innerHTML = `奇数：${oddNumbers.join(', ')}`;

解释： #

• filter(num => num % 2 === 0)会遍历数组，把所有能被2整除的元素收集到evenNumbers数组里；
• join(', ')把数组元素转成逗号分隔的字符串，这样就能一次性显示所有数字啦；
• 最后把拼接好的字符串赋值给对应段落的innerHTML，就能看到所有奇偶数字了。

方法二：用forEach遍历累加内容 #

如果你更习惯用forEach，可以先初始化两个字符串，遍历的时候把符合条件的数字追加进去，最后再插入到HTML：

const numbers = [1,2,3,4,5,6,7,8,9,10];
// 初始化存储文本的变量
let evenText = '偶数：';
let oddText = '奇数：';

// 遍历每个数字
numbers.forEach(num => {
  if (num % 2 === 0) {
    evenText += `${num}, `;
  } else {
    oddText += `${num}, `;
  }
});

// 去掉最后多余的逗号和空格
evenText = evenText.slice(0, -2);
oddText = oddText.slice(0, -2);

// 插入到HTML中
document.querySelector("#even").innerHTML = evenText;
document.querySelector("#odd").innerHTML = oddText;

解释： #

• 遍历每个数字时，把它追加到对应的文本字符串里；
• 最后用slice(0, -2)去掉末尾多余的, ，避免显示不美观；
• 再把处理好的文本赋值给段落的innerHTML。

这样两种方法都能完美实现你的需求，把所有偶数和奇数分别显示到对应的HTML段落里～

内容的提问来源于stack exchange，提问作者user17009178