JS 新的 FormData 将未定义的值前置

Question

我正在使用 JS 和 FormData 从 html 表单中收集值，然后创建保存在 localStorage 中的字符串。但是我在第一个值前面加上“未定义”。

我的表格：

<form id="prd2">
<input type="hidden" name="product" value="et345">
<input type="hidden" name="name" value="Tshirt">
<select name="quantity"><option value="1">1</option><option value="2">2</option><option>etc</option></select><br>
<input type="hidden" name="img" value="img345">
<input type="hidden" name="optType" value="clothing">
<button id="btn2" class="addcart">Add to Cart</button>
</form>

我的 JS 获取值：

var additem;
var frm = document.getElementById('prd2');
var data = new FormData(frm);
for (var value of data.values()) {
  additem += value + '|';
}

我也试过设置var additem = '';

我期望 additem 的值为：

et345|Tshirt|2|img345|clothing|

但我最终得到的是：

undefinedet345|Tshirt|2|img345|clothing|

虽然我可以在存储之前从字符串中手动删除“undefined”，但我更愿意找出它被附加到开头的原因。

Answer 1

分配零长度字符串将解决此问题。

这样做：

var additem = "";

而不是这个：

var additem;

因为Javascript自然地给每个变量赋值undefined，所以当你用另一个字符串添加它时，它只会附加undefined。

例如：

var shouldBeUndefined; 
var shouldBeNullString = "";

console.log(shouldBeUndefined);
console.log(shouldBeNullString);

shouldBeUndefined += "concat";
shouldBeNullString += "concat";

console.log(shouldBeUndefined);
console.log(shouldBeNullString);

完整的工作代码：

var additem = "";
var frm = document.getElementById('prd2');
var data = new FormData(frm);
for (var value of data.values()) {
  additem += value + '|';
}

console.log(additem);

<form id="prd2">
<input type="hidden" name="product" value="et345">
<input type="hidden" name="name" value="Tshirt">
<select name="quantity"><option value="1">1</option><option value="2">2</option><option>etc</option></select><br>
<input type="hidden" name="img" value="img345">
<input type="hidden" name="optType" value="clothing">
<button id="btn2" type="submit" class="addcart">Add to Cart</button>
</form>

JS 新的 FormData 将未定义的值前置

JS new FormData prepending undefined to value

html

javascript

form-data