如何用for循环迭代formData？

Question

很简单，我想用js迭代formData
迭代位于此处的 formData 对象的示例。
to iterate formData in msdn
我根据示例代码创建我的迭代方式。

 
function show()
{
    var formData = new FormData( document.querySelector("#myForm") );
    for(var pair in formData.entries())
    {
        console.log(pair[0]);
        console.log(pair[1]);
    }
} 
ob = document.getElementById("submit");
ob.addEventListener("click",show);

 
<form id="myForm">
<input type="text" name="name">
<input type="text" name="addr">
<input type="button" value="submit" id="submit">
</form>

要在第一个输入中键入 test1，在第二个输入中键入 test2，然后单击 submit 按钮。

chorme 控制台的预期输出

name
test1
addr
test2

chrome控制台的实际输出。

n
e

如何修复我的代码以使用 for 循环迭代 formData？

Answer 1

您看到 n、e 因为 entires() 方法 returns 是一个具有 next 方法的可迭代对象，并且您正在遍历该对象带有 for/in 循环，用于迭代对象的属性（键）。由于您为表单数据 (2) 循环了正确的次数，因此 for/in 循环在该对象中以字符串形式遍历键的名称 (next) 两次。

console.log(new FormData().entries());

而是使用文档中显示的 for/of 循环，它将使用从 entries() 方法调用返回的迭代器对象进行迭代。

function show(){
    console.clear();

    var formData = new FormData(document.querySelector("#myForm"));
    
    for(var pair of formData.entries()){
        console.log(pair[0], pair[1]);
    }
    
    event.preventDefault();    
} 
document.getElementById("submit").addEventListener("click", show);

<form id="myForm">
<input type="text" name="name">
<input type="text" name="addr">
<input type="button" value="submit" id="submit">
</form>

Answer 2

const formData = new FormData();
    formData.append('screen', false);
    formData.append('animation', false);

for (let [key, val] of formData.entries()) {
                console.log(key, val);
            }

如何用for循环迭代formData？

How to iterate the formData with for loop?

javascript

form-data