学习笔记:FormData对象的作用及用法

702 阅读2分钟

在这里插入图片描述

项目遇到了,总不能一直都不了解,那不如自己总结加深一下印象

FormData 的主要方法

  1. has => 返回一个布尔值,表明 FormData 对象是否包含某些键
  2. get => 返回在 FormData对象中与给定键关联的第一个值
  3. getAll => 返回一个包含FormData 对象中与给定键关联的所有值的数组
  4. append => 向FormData 中添加新的属性值,如果FormData 对应的属性值存在则覆盖原值,否则新增一项属性值。
  5. set => 与 append() 的区别是,如果指定的键已经存在,set() 会使用新值覆盖已有的值,而 append() 会把新值添加到已有值集合的后面。
  6. delete => 从FormData对象里面删除一个键值对
  7. keys => 返回一个包含所有键的iterator对象
  8. values => 返回一个包含所有值的iterator对象。
  9. forEach => 遍历FormData 对象
  10. entries => 返回一个包含所有键值对的iterator对象

FormData 的用法

//构造函数实例
const formdata = new FormData();

//  通过 append()/set() 添加数据 

// 需要添加的数据已存在,则添加到后面。通过getAll获取时返回一个数组
formdata.append("user",'Tsing Yi One')
formdata.append("user",'Tsing Yi Two')
formdata.append("user",'Tsing Yi Three')

// 需要添加的数据已存在,则用新的数据覆盖旧的
formdata.set("Charactor","Amorous") 

// 通过get(key)/getAll(key)来获取对应的value,

// 拿到 name 为 user 的第一个value值
let getValue = formdata.get("user")  
// 拿到 name 为 user 的全部value值,返回一个数组
let getAllValue = formdata.getAll("user")  


//  通过 delete() 删除
// 接收一个参数,表示你要删除的 key 值的名字,如果有多个相同 key 值,会一并删除
formdata.delete("user")  

//  通过 has() 判断 FormData() 对象是否含有该 key 
formdata.has("user"); // 返回一个 Boolean 值

//  通过 keys() 遍历 FormData 对象中所有的 key。
for(let key of formdata.keys()){
    console.log(key);  // 返回所有key
}

// 通过 values() 遍历 FormData 对象中所有的 value。
for(let value of formdata.values()){
   console.log(value);  // 返回所有 value
}

// 通过 entries() 遍历 FormData 对象中所有的 key 和 value。
for(let pair of formdata.entries()){
    console.log(pair);
/*
    ['user', 'Tsing Yi One']
    ['user', 'Tsing Yi Two']
    ['user', 'Tsing Yi Three']
*/
}