本文讲解如何通过对象映射实现动态调色板名称到实际数组的查找，解决 `foreach` 在传入字符串而非数组时崩溃的问题，并提供可复用的 rgb 位深转换函数。
在将高位深颜色值（如 RGB-16，即每个通道取值范围为 0–65535）转换为标准 RGB-8（0–255）时，核心公式是：Math.round(value / 257) —— 因为 $65535 \div 255 = 257$，该除法能等比例缩放并四舍五入到最接近的 8 位整数。
但原代码存在一个关键逻辑错误：convert('system41') 传入的是字符串字面量，而函数体内直接对 palette.forEach(...) 调用，相当于对 'system41' 这个字符串执行 forEach，导致运行时报错 TypeError: palette.forEach is not a function。
✅ 正确做法是：将调色板数组统一存入一个对象中，以字符串为键、数组为值，再通过方括号语法 palettes[palette] 动态获取对应数组：
const palettes = {
system41: [
[65535, 65535, 65535],
[64512, 62333, 1327],
[65535, 25738, 652]
],
system7: [
[65535, 65535, 52428],
[65535, 52428, 39321],
[52428, 39321, 26214]
]
};
function convert(paletteName) {
const targetPalette = palettes[paletteName];
if (!targetPalette) {
console.warn(`⚠️ 调色板 "${paletteName}" 未定义`);
return;
}
targetPalette.forEach((rgb16) => {
const rgb8 = rgb16.map(v => Math.round(v / 257));
document.querySelector(`#${paletteName}`).textContent += rgb8.join(', ') + '\n';
});
}
// 安全调用
convert('system41');
convert('system7');? 注意事项：
- 使用 textContent 替代 innerHTML += ... 更安全（避免 HTML 注入风险，且纯文本更新性能更优）；
- 增加了存在性校验，防止传入无效调色板名导致静默失败；
- 若需清空原有内容，可在循环前添加 document.querySelector(#${paletteName}).textContent = ''；
- 所有 DOM 元素（如
和
）需确保在脚本执行前已存在于 HTML 中。
该模式不仅适用于颜色转换，更是 JavaScript 中「参数驱动数据访问」的经典实践：用字符串控制行为，用对象组织数据，兼顾灵活性与可维护性。
