如何快速将表单字段值转换为指定格式的JSON对象？

当然有简便的办法啦！不用额外引入jQuery插件，几行代码就能搞定，甚至可以封装成一行调用的方式，完美解决你不想手动构建字段、又嫌弃serializeArray格式的问题。下面给你几个实用方案：

方案1：用reduce快速转换（无插件，核心逻辑一行） #

直接基于serializeArray返回的数组，用数组的reduce方法把它转换成你要的键值对对象：

// 定义转换函数
function formToJson(formSelector) {
  return $(formSelector).serializeArray().reduce((obj, item) => {
    obj[item.name] = item.value;
    return obj;
  }, {});
}

// 调用示例
var userData = formToJson("#newUserForm");
// 要转成JSON字符串的话直接套JSON.stringify
var userJson = JSON.stringify(userData);

如果只是临时用，甚至可以把逻辑压缩成一行：

var data = $("#newUserForm").serializeArray().reduce((obj, item) => (obj[item.name] = item.value, obj), {});

方案2：封装成jQuery插件（更符合jQuery使用习惯） #

要是你经常需要做这个转换，可以把逻辑封装成jQuery的扩展方法，之后调用起来更顺手：

// 扩展jQuery方法
$.fn.serializeObject = function() {
  return this.serializeArray().reduce((obj, item) => {
    obj[item.name] = item.value;
    return obj;
  }, {});
};

// 调用方式超简洁，一行搞定
var userData = $("#newUserForm").serializeObject();
var userJson = JSON.stringify($("#newUserForm").serializeObject());

方案3：处理同名字段（比如复选框组） #

如果你的表单里有多个同名字段（比如复选框），上面的方法会覆盖掉之前的值，改成下面这个版本就能把同名字段的值转成数组：

$.fn.serializeObject = function() {
  return this.serializeArray().reduce((obj, item) => {
    if (obj[item.name]) {
      // 如果键已存在，转为数组格式
      if (!Array.isArray(obj[item.name])) {
        obj[item.name] = [obj[item.name]];
      }
      obj[item.name].push(item.value);
    } else {
      obj[item.name] = item.value;
    }
    return obj;
  }, {});
};

这些方法都不需要额外引入外部插件，自己写的代码也很轻量，完全能应对字段数量多的场景，不用手动一个个拼接字段~

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