ES6 如何将表单数据转成 JSON 格式
前端开发中，我们经常需要将表单数据转成 JSON 格式，以便于提交到服务器端进行处理和存储。ES6 提供了一种非常方便的方式将表单数据转成 JSON 格式。本文将介绍如何使用 ES6 将表单数据转成 JSON 格式，并提供一些实用的示例代码。
使用 FormData 对象收集表单数据
在介绍 ES6 如何将表单数据转成 JSON 格式之前，我们需要先了解一下 FormData 对象。FormData 对象可以方便地收集表单数据，并且支持文件上传。使用 FormData 对象可以避免手动收集表单数据，减少手写代码量并提高开发效率。
FormData 对象的基本用法如下：
// 创建 FormData 对象
var formData = new FormData();
// 添加表单数据
formData.append('name', '张三');
formData.append('age', 20);
// 发送表单数据
ajax.send(formData);上述代码中，我们创建了一个 FormData 对象，并向其添加了两个表单数据项：name 和 age。然后，我们通过 AJAX 发送表单数据。
使用 Array.from 将 FormData 对象转成数组
FormData 对象在收集表单数据时存储的是键值对，不方便直接转成 JSON 格式。因此，我们需要先将 FormData 对象转成数组。
ES6 中，我们可以使用 Array.from 将 FormData 对象转成数组。Array.from 方法会将类数组对象或可迭代对象（如 Set 和 Map）转成数组。FormData 对象实现了迭代器接口（即具有 next 方法的对象），因此可作为 Array.from 的参数之一。
我们使用 Array.from 可以方便地将 FormData 对象转成数组，如下所示：
// 创建 FormData 对象
var formData = new FormData();
// 添加表单数据
formData.append('name', '张三');
formData.append('age', 20);
// 转成数组
var data = Array.from(formData);
console.log(data);上述代码中，我们将 FormData 对象转成数组，并输出数组 data 的值。执行上述代码，我们会发现 data 数组中存储的是若干个数组，每个小数组表示一个键值对。
使用 reduce 方法将数组转成 JSON 格式
接下来，我们需要将上一步转成的数组 data 转成 JSON 格式。可以使用数组的 reduce 方法来完成转换操作。
reduce 方法是数组的一个成员方法，用于迭代数组的所有元素，并执行累加器函数。它的形式如下：
array.reduce(callback[, initialValue])
其中，callback 是累加器函数，initialValue 是初始值（可选）。累加器函数接收四个参数：accumulator（累加器），currentValue（当前值），currentIndex（当前索引），array（原数组）。
我们可以使用 reduce 方法将数组 data 转成 JSON 格式，如下所示：
-- -------------------- ---- ------- -- -- -------- -- --- -------- - --- ----------- -- ------ ----------------------- ------ ---------------------- ---- -- ---- --- ---- - --------------------- -- -- ---- -- --- ---------- - ------------------------- ------ ------------ - -------- ------ ---- -- ---- ------------------------
上述代码中，我们将累加器函数设为一个匿名函数。在累加器函数中，我们将当前项（即一个小数组）的第一个元素作为键，第二个元素作为值，添加到累加器对象（即初始值）中。最后，累加器对象即为我们期望输出的 JSON 对象。
示例代码
下面提供一些实用的示例代码，供大家参考：
将表单数据转成 JSON 字符串
-- -------------------- ---- ------- -- ------ --- ---- - ------------------------------- -- -- -------- -- --- -------- - --- --------------- -- ---- --- ---- - --------------------- -- -- ---- -- --- ---------- - ------------------------- ------ ------------ - -------- ------ ---- -- ---- -- -- ---- --- --- ---------- - --------------------------- ------------------------
上述代码中，我们使用 querySelector 方法获取了一个表单元素，然后将其传给 FormData 构造函数创建了一个 FormData 对象，采用 reduce 方法将其转成 JSON 对象。最后，我们使用 JSON.stringify 方法将 JSON 对象转成 JSON 字符串并输出其值。
将表单数据并携带文件信息转成 JSON 数据
-- -------------------- ---- ------- -- ------ --- ---- - ------------------------------- -- -- -------- -- --- -------- - --- --------------- -- ---- ------------------------- ----------------------------------------------------- -- ---- --- ---- - --------------------- -- -- ---- -- --- ---------- - ------------------------- ------ ------------ - -------- ------ ---- -- ---- ------------------------
上述代码中，我们在前面示例代码的基础上，添加了一个文件信息上传。我们使用 querySelector 方法获取一个 input 元素，类型为 file。然后使用 FormData.append 方法将该文件添加到 FormData 对象中，并将其转成 JSON 对象。
总结
在本文中，我们介绍了 ES6 如何将表单数据转成 JSON 格式。我们使用 FormData 对象收集表单数据，Array.from 方法将其转成数组，然后使用 reduce 方法将数组转成 JSON 对象。这种方法不仅可以方便地收集表单数据，而且代码量相对较少，提高了开发效率。同时，我们还提供了一些实用的示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648b984048841e98949e798b