如何用多层for循环简化颜色统计代码中的重复if判断？

需求说明 #

扫描表格单元格的innerHTML内容，统计各类颜色出现的次数并在表格下方展示结果，希望用多层for循环替代代码里重复的if判断逻辑，实现遍历所有颜色数组与6个单元格的统计操作。

优化前的问题代码 #

const red = ['red', 'carmine', 'crimson', 'scarlet'];
const yellow = ['butter', 'golden', 'corn', 'fire'];
const blue = ['cobalt', 'navy', 'teal', 'cerulean'];
const green = ['dark', 'mint', 'kelly', 'hunter'];
const black = ['ebony', 'charcoal', 'ink', 'metal'];

const b1 = document.getElementById('b1');
const b2 = document.getElementById('b2');
const b3 = document.getElementById('b3');
const b4 = document.getElementById('b4');
const b5 = document.getElementById('b5');
const b6 = document.getElementById('b6');
const count = document.getElementById('count');

var redCount = 0;
var yellowCount = 0;
var blueCount = 0;
var greenCount = 0;
var blackCount = 0;

var box1 = 'scarlet';
var box2 = 'ebony';
var box3 = 'cerulean';
var box4 = 'ink';
var box5 = 'navy';
var box6 = 'charcoal';

b1.innerHTML += box1;
b2.innerHTML += box2;
b3.innerHTML += box3;
b4.innerHTML += box4;
b5.innerHTML += box5;
b6.innerHTML += box6;

// 重复的if判断逻辑（省略box4至box6的代码）
if (red.includes(box1) == true) {
  redCount++;
} else if (yellow.includes(box1) == true) {
  yellowCount++;
} else if (blue.includes(box1) == true) {
  blueCount++;
} else if (green.includes(box1) == true) {
  greenCount++;
} else if (black.includes(box1) == true) {
  blackCount++;
}

// ... 此处省略box2、box3及box4-box6的重复判断代码

count.innerHTML += redCount + " " + yellowCount + " " + blueCount + " " + greenCount + " " + blackCount;

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  color: black;
  background-color: white;
  font-size: large;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140, 140, 140);
}

th, td {
  border: 1px solid rgb(160, 160, 160);
}

<table>
  <tbody>
    <tr>
      <td id="b1"></td>
      <td id="b3"></td>
      <td id="b5"></td>
    </tr>
    <tr>
      <td id="b2"></td>
      <td id="b4"></td>
      <td id="b6"></td>
    </tr>
  </tbody>
</table>
<p id="count"></p>

优化后的代码（用多层循环实现） #

核心改动是把颜色分类和计数整合为可遍历的结构，同时把单元格内容统一存入数组，通过两层循环完成统计：

// 整合颜色分类与对应计数，方便循环遍历
const colorCategories = [
  { name: 'red', values: ['red', 'carmine', 'crimson', 'scarlet'], count: 0 },
  { name: 'yellow', values: ['butter', 'golden', 'corn', 'fire'], count: 0 },
  { name: 'blue', values: ['cobalt', 'navy', 'teal', 'cerulean'], count: 0 },
  { name: 'green', values: ['dark', 'mint', 'kelly', 'hunter'], count: 0 },
  { name: 'black', values: ['ebony', 'charcoal', 'ink', 'metal'], count: 0 }
];

// 获取所有单元格元素
const cells = [
  document.getElementById('b1'),
  document.getElementById('b2'),
  document.getElementById('b3'),
  document.getElementById('b4'),
  document.getElementById('b5'),
  document.getElementById('b6')
];
const countElement = document.getElementById('count');

// 单元格对应的颜色值
const cellColors = ['scarlet', 'ebony', 'cerulean', 'ink', 'navy', 'charcoal'];

// 填充单元格内容
cells.forEach((cell, index) => {
  cell.innerHTML += cellColors[index];
});

// 两层循环统计：外层遍历每个单元格颜色，内层遍历每个颜色分类
cellColors.forEach(color => {
  colorCategories.forEach(category => {
    if (category.values.includes(color)) {
      category.count++;
    }
  });
});

// 拼接统计结果并展示
const result = colorCategories.map(category => category.count).join(' ');
countElement.innerHTML += result;

优化说明 #

1. 结构整合：把零散的颜色数组和计数变量整合成colorCategories数组对象，每个对象包含颜色名称、对应值列表和计数，便于统一遍历。
2. 统一遍历单元格：把所有单元格元素和对应颜色值分别存入数组，避免重复获取DOM元素和变量声明。
3. 多层循环替代重复if：外层循环遍历每个单元格的颜色值，内层循环遍历每个颜色分类，匹配成功则对应计数+1，彻底消除重复的if判断逻辑。
4. 结果生成更简洁：通过map方法提取所有计数并拼接成字符串，替代原有的手动拼接方式。

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