如何将依赖jQuery serializeArray方法的表单处理代码改写为原生JavaScript

没问题，我帮你把这段jQuery代码转成原生JavaScript，先拆解下原代码的核心功能：它会把表单转换为包含字段名和值的对象数组，接着遍历每个字段，检查对应名称的Cookie是否有有效值，如果有的话，就给表单内对应的输入框赋值，并且触发change事件。

下面是两种原生JavaScript的实现方式：

方式一：模拟jQuery serializeArray的逻辑 #

先实现一个和serializeArray功能一致的原生函数，再执行后续逻辑，这样逻辑和原代码更贴近：

// 模拟jQuery serializeArray，生成{name: 字段名, value: 字段值}的对象数组
function serializeArray(form) {
  return Array.from(new FormData(form)).map(([name, value]) => ({ name, value }));
}

// 获取目标表单（替换成你的表单选择器，比如document.getElementById('your-form')）
const form = document.querySelector('form');

// 执行原代码的核心逻辑
serializeArray(form).forEach(item => {
  const cookieVal = Cookies.get(item.name);
  if (cookieVal && cookieVal !== '') {
    // 在表单内查找对应name的输入框，和jQuery的e.find逻辑一致
    const input = form.querySelector(`input[name="${item.name}"]`);
    if (input) {
      input.value = cookieVal;
      // 原生触发change事件，对应jQuery的.change()
      input.dispatchEvent(new Event('change'));
    }
  }
});

方式二：更简洁的直接遍历（推荐） #

因为原代码里其实只用到了字段的name属性，没必要生成完整的对象数组，可以直接遍历FormData的条目，省略模拟serializeArray的步骤：

// 获取目标表单
const form = document.querySelector('form');
const formData = new FormData(form);

// 遍历表单所有字段的name
for (const [name] of formData.entries()) {
  const cookieVal = Cookies.get(name);
  if (cookieVal && cookieVal !== '') {
    const input = form.querySelector(`input[name="${name}"]`);
    if (input) {
      input.value = cookieVal;
      input.dispatchEvent(new Event('change'));
    }
  }
}

关键细节说明 #

• 原生用FormData来获取表单的所有字段，这是处理表单数据的标准API，比手动遍历表单元素更可靠
• 查找输入框时用form.querySelector，限定在当前表单内查找，和jQuery的e.find行为一致，避免全局查找的冗余
• 原生触发change事件需要手动创建Event对象并调用dispatchEvent，这和jQuery的.change()方法内部实现逻辑一致
• 增加了input存在性判断，避免找不到元素时出现报错

备注：内容来源于stack exchange，提问作者Justin