使用数组简化代码：重复代码转对象数组的正确语法求助

没问题！用对象数组来消除重复代码绝对是个聪明的做法，我给你举几个实际场景的例子，你一看就懂怎么写了～

假设你之前的代码是类似这样的（比如给不同按钮绑定事件，只有文本、样式、触发动作有细微差异）：

// 重复代码示例
const btn1 = document.getElementById('btn1');
btn1.textContent = '提交表单';
btn1.style.backgroundColor = '#2ecc71';
btn1.addEventListener('click', () => {
  console.log('提交表单');
});

const btn2 = document.getElementById('btn2');
btn2.textContent = '重置表单';
btn2.style.backgroundColor = '#e74c3c';
btn2.addEventListener('click', () => {
  console.log('重置表单');
});

const btn3 = document.getElementById('btn3');
btn3.textContent = '导出数据';
btn3.style.backgroundColor = '#3498db';
btn3.addEventListener('click', () => {
  console.log('导出数据');
});

核心思路就是把重复代码里的「可变差异」抽成对象数组，把「相同逻辑」写成通用处理函数，然后用循环批量执行：

// 第一步：把所有差异配置整理成对象数组
const buttonConfigs = [
  {
    id: 'btn1',
    text: '提交表单',
    bgColor: '#2ecc71',
    onClick: () => { console.log('提交表单'); }
  },
  {
    id: 'btn2',
    text: '重置表单',
    bgColor: '#e74c3c',
    onClick: () => { console.log('重置表单'); }
  },
  {
    id: 'btn3',
    text: '导出数据',
    bgColor: '#3498db',
    onClick: () => { console.log('导出数据'); }
  }
];

// 第二步：用循环批量执行通用逻辑
buttonConfigs.forEach(config => {
  const btn = document.getElementById(config.id);
  btn.textContent = config.text;
  btn.style.backgroundColor = config.bgColor;
  btn.addEventListener('click', config.onClick);
});

如果你的重复代码是表单字段验证，同样可以用这个思路简化：

原来的重复验证代码：

function validateName(name) {
  if (!name) return '姓名不能为空';
  if (name.length < 2) return '姓名不能少于2个字符';
  return '';
}

function validateEmail(email) {
  if (!email) return '邮箱不能为空';
  if (!/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(email)) return '邮箱格式不正确';
  return '';
}

简化后的写法：

// 验证规则配置数组
const validationRules = [
  {
    field: 'name',
    required: true,
    minLength: 2,
    errorMsg: {
      required: '姓名不能为空',
      minLength: '姓名不能少于2个字符'
    }
  },
  {
    field: 'email',
    required: true,
    pattern: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/,
    errorMsg: {
      required: '邮箱不能为空',
      pattern: '邮箱格式不正确'
    }
  }
];

// 通用验证函数
function validateField(fieldName, value) {
  const rule = validationRules.find(r => r.field === fieldName);
  if (!rule) return '';

  if (rule.required && !value) return rule.errorMsg.required;
  if (rule.minLength && value.length < rule.minLength) return rule.errorMsg.minLength;
  if (rule.pattern && !rule.pattern.test(value)) return rule.errorMsg.pattern;
  
  return '';
}

// 使用示例
console.log(validateField('name', '')); // 输出：姓名不能为空

简单来说，就是把重复代码里不一样的内容（比如ID、文本、规则、回调）都塞进对象数组，把一模一样的逻辑写成通用函数，循环遍历数组就能完成所有操作。以后要新增或修改内容，只需要在数组里加/改对象就行，再也不用复制粘贴一大串重复代码啦！

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