# FormData 对象

TIP

FormData 是浏览器window对象下面的一个构造函数。

功能：实现表单元素的序列化，减少表单数据的拼接。 :::

<form id="formBox">
  <p>姓名：<input type="text" name="username" value="小渔歌" /></p>
  <p>
    职位：<select name="job">
      <option value="1">前端研发工程师</option>
      <option value="2">java开发工程师</option>
      <option value="3">大数据工程师</option>
      <option value="4">算法工程师</option>
    </select>
  </p>
  <p>
    <textarea name="desc" cols="30" rows="10">
我是小渔歌，点击右上方“关注”，每天为你分享【前端技术知识】干货。</textarea
    >
  </p>
  <p><input type="button" id="btn" value="获取表单的值" /></p>
</form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 通过表单对 formData 进行初始化

let formData = new FormData(document.querySelector("#formBox"));

# 通过 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");

1
2
3
4
5
6
7
8
9

# 通过 append(key,value)在数据末尾追加数据

formData.append("interest", "篮球");
let interest = formData.get("interest");

1
2

formData.append("interest", "篮球");
formData.append("interest", "写作");
let interest = formData.get("interest");
let interestAll = formData.getAll("interest");
// 这里向键interest添加了两个不同值，如果用get只能获取第一个值，getAll则能获取说有的值。

1
2
3
4
5

# 通过 set(key, value)来设置修改数据

formData.set("interest", "技术学习");
interest = formData.get("interest");
interestAll = formData.getAll("interest");

1
2
3

可以看到他改变了 interest 的值，并且之前我们给 interest 添加的是两个值，现在少了一个，由此可见，这个 set 方法会重置多个值变成一个值。

# 通过 has(key)来判断是否存在对应的 key 值

let isUsername = formData.has("username");
let iswork = formData.has("work");

1
2

# 通过 delete(key)可以删除数据

isUsername = formData.has("username");
username = formData.get("username");

1
2

# forEach (value,key)=> 遍历 FormData 对象的键值

formData.forEach((value, key) => {
  console.log(value, key);
});

1
2
3

# values => 返回一个包含所有值的 iterator 对象。

for (let value of formData.values()) {
  console.log(value); // 返回所有 value
}

1
2
3

# keys => 返回一个包含所有键的 iterator 对象

for (let key of formData.keys()) {
  console.log(key);
}

1
2
3

# entries => 返回一个包含所有键值对的 iterator 对象

for (let obj of formData.entries()) {
            console.log(obj);
}
// 每一个都返回一个数组，第一个索引是键，第二个索引是值。

1
2
3
4