FormData对象，知道吗？它可以让你在表单数据处理上事半功倍？

　　我是小渔歌，点击右上方＂关注＂，每天为你分享【前端技术知识】干货。
　　FormData是浏览器window对象下面的一个构造函数。
　　功能：实现表单元素的序列化，减少表单数据的拼接。
　　先贴上dom结构，下面再一一讲解。
　　dom结构
　　图例
　　表单图示通过表单对formData进行初始化let formData = new FormData(document.querySelector(＂#formBox＂));
　　控制台输出结果
　　可以看到这个formData下面有很多操作方法。通过get(key)与getAll(key)来获取相对应的值let username = formData.get(＂username＂) let job = formData.get(＂job＂) let desc = formData.get(＂desc＂)
　　控制台打印
　　let username = formData.getAll(＂username＂) let job = formData.getAll(＂job＂) let desc = formData.getAll(＂desc＂)
　　控制台打印
　　由此可见，getAll返回的是一个数组，get返回的是一个字符串。
　　注意：getAll获取的是具有相同name（key）属性表单元素的值，所以返回的是一个数组。2、通过append(key,value)在数据末尾追加数据formData.append(＂interest＂, ＂篮球＂) let interest = formData.get(＂interest＂)
　　控制台输出
　　formData.append(＂interest＂, ＂篮球＂) formData.append(＂interest＂, ＂写作＂) let interest = formData.get(＂interest＂) let interestAll = formData.getAll(＂interest＂)
　　控制台输出
　　这里向键interest添加了两个不同值，如果用get只能获取第一个值，getAll则能获取说有的值。
　　到这里应该很清楚get与getAll的区别了吧。3、通过set(key, value)来设置修改数据formData.set(＂interest＂, ＂技术学习＂) interest = formData.get(＂interest＂) interestAll = formData.getAll(＂interest＂)
　　这里我们改变2中的interest，看下控制台输出结果。
　　可以看到他改变了interest的值，并且之前我们给interest添加的是两个值，现在少了一个，由此可见，这个set方法会重置多个值变成一个值。4、通过has(key)来判断是否存在对应的key值let isUsername = formData.has(＂username＂) let iswork = formData.has(＂work＂)
　　控制台输出
　　username存在所以输出了true，work不存在所以是false。通过delete(key)可以删除数据isUsername = formData.has(＂username＂) username = formData.get(＂username＂)
　　控制台输出
　　使用delete方法删除username后，再用has方法检测到，这个username已经不存在了，并且用get方法也获取不到了。forEach (value,key)=> 遍历FormData 对象的键值formData.forEach((value, key) => {             console.log(value, key) })
　　控制台输出
　　values => 返回一个包含所有值的iterator对象。 for (let value of formData.values()) {             console.log(value); // 返回所有 value }
　　控制台输出
　　keys => 返回一个包含所有键的iterator对象for (let key of formData.keys()) {             console.log(key); }
　　控制台输出
　　entries => 返回一个包含所有键值对的iterator对象for (let obj of formData.entries()) {             console.log(obj); }
　　控制台输出
　　如上图这个每一个都返回一个数组，第一个索引是键，第二个索引是值。
　　还有一个点需要注意的地方，就是如果一个key有多个值，他不会在数组第三个索引出现，数组的长度永远是2。
　　如下图所示，如果3 没有重置interest的值，他还是两个，则控制台输出
　　异步数据提交，使用formData是不是非常nice，[中国赞]。
　　思考：formData也可以定义一个空的对象，实现自定义表单提交。
　　往期精彩内容
　　CSS实现拖拽功能，你是认真的吗？
　　能用CSS实现的效果，就尽量把Javascript踢开吧？
　　在JavaScript中call与apply的实际应用你知道多少？
　　小渔歌，90后前端研发工程师，热爱生活，一个在劳动中不断学习的人，愿我们共同进步，点关注不迷路[中国赞][作揖]。