JavaScript数组赋值特定索引后输出为空的原因及对象实现方案

为什么数组输出为空？ #

这其实是JavaScript数组的特性搞的鬼！你用pnr作为数组索引的时候，如果这个数字很大（比如远大于0，且不是连续的小整数），JavaScript会把它当成稀疏数组来处理。举个例子，如果pnr是1000，那数组会从0到1000创建1001个位置，但前1000个位置都是空的（empty）。大多数浏览器的控制台为了简化显示，遇到这种大部分位置都是空的稀疏数组，就会直接打印[]，但实际上你的数据已经存在数组里了——不信你试试直接打印postdataarray[pnr]，肯定能拿到你存的formdata。

而当你把pnr改成100的时候，控制台会显示出数组里从0到100的位置（哪怕前面大部分是空的），所以你能看到对应的内容。本质上不是数组没存进去，只是控制台的显示方式让你误以为是空的。

如何实现你要的对象格式？ #

你的实际需求是创建一个带指定键的对象，而不是数组——数组本来就不是干这个活的！直接用普通对象来实现就好，代码改起来很简单：

var postdata = {};
$.each($('#form').serializeArray(), function() {
    postdata[this.name] = this.value;
});
// 直接创建一个空对象，而不是数组
var postdataObj = {};
var pnr = parseInt($("#field").val().replace("-",""));
// 把pnr作为对象的键，赋值对应的formdata
postdataObj[pnr] = { formdata: postdata };
console.log(postdataObj);

这样输出的结果就完全符合你要的格式：{"100":{formdata: {field1:value1, field2:value2,...}}}。这里要注意，JavaScript对象的键本质上都是字符串，哪怕你用数字作为键，最终也会被转换成字符串，但这不影响你正常访问它。

另外，如果你用ES6+的语法，还可以写得更简洁一点：

const postdata = Object.fromEntries($('#form').serializeArray().map(item => [item.name, item.value]));
const pnr = parseInt($("#field").val().replace("-",""));
const postdataObj = { [pnr]: { formdata: postdata } };
console.log(postdataObj);

用Object.fromEntries可以更高效地把serializeArray返回的数组转换成对象，比$.each更简洁。

内容的提问来源于stack exchange，提问作者Kevin Lindmark