本文教你如何用 javascript 动态渲染问卷题目及可变数量的选项，摆脱硬编码 `
在构建网页问卷时，若每个问题的选项数量不固定（例如有的题有 2 个选项，有的有 5 个），继续沿用 first/second/third/fourth 这类解构赋值方式不仅冗余，还会导致扩展性差、易出错。正确做法是将选项视为一个数组，并通过循环动态生成 HTML 列表项。
以下是推荐的实现方式（已修正原答案中的逻辑错误）：
// ✅ 正确示例：遍历 questions[count].options（而非 .question！） const options = questions[count].options; // 假设 options 是字符串数组，如 ['是', '否'] 或 ['A', 'B', 'C', 'D', 'E'] let html = `Q${count + 1}. ${questions[count].question}
- `;
for (let option of options) {
html += `
- ${escapeHtml(option)} `; } html += '
⚠️ 注意：原答案中误写为 questions[count].question（应为 .options），这是常见笔误，请务必核对数据结构。典型问卷数据格式如下：
const questions = [
{
question: "您是否满意当前服务？",
options: ["非常满意", "满意", "一般", "不满意"]
},
{
question: "请选择您的年龄段",
options: ["18岁以下", "18–25岁", "26–35岁", "36–45岁", "46岁以上"]
}
];? 安全提示：为防止 XSS 攻击，建议对用户输入的选项内容做 HTML 转义（如使用 escapeHtml() 函数）：
立即学习“Java免费学习笔记（深入）”；
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&")
.replace(//g, "youjiankuohaophpcn")
.replace(/"/g, """)
.replace(/'/g, "'");
}✅ 优势总结：
- ✅ 完全适配任意长度的 options 数组；
- ✅ 无需修改模板代码即可增减选项；
- ✅ 易于与事件委托结合，统一处理选项点击逻辑；
- ✅ 语义清晰，符合现代 JavaScript 编程习惯。
从此，你的问卷系统真正具备了“一题多态”的灵活性——无论选项是 2 个还是 20 个，HTML 都能自动生成、安全可靠。
