如何用for循环迭代formData？

Question

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

 
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

是因为

entries()

方法返回一个带有

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);
            }