将对象按键分配至数组时出现大量null值问题求助

问题根源 #

JavaScript的数组是专为连续数字索引设计的有序集合，当你用非连续的数字（比如你的id）作为下标给数组赋值时，数组会自动扩展长度，并把从当前数组末尾到目标下标之间的所有空位填充为undefined。而JSON.stringify处理这些空位时，会将它们转为null，这就是你看到大量null的原因。

比如你用id=1给空数组赋值，数组长度会被拉到2，索引0的位置是空位，序列化后就会输出[null, {"data":"some_data"}]。如果你的id是更大的数字（比如20），就会出现20个null。

解决方案 #

最适合你的场景是用普通对象代替数组，因为你实际是在做键值对存储（id作为键，对象作为值），对象天然支持非连续的键名，不会产生多余空位：

// 把数组换成普通对象
let dataMap = {};
let myObj = $(`#${id}`).data(`myObj`);
// 直接赋值，无需初始化判断
dataMap[id] = myObj;

console.log(JSON.stringify(dataMap));
// 输出示例：{"1":{"data":"some_data"}}，没有多余null

如果你确实需要用数组（比如id是从0开始的连续数字），那要确保id和数组的索引严格对应，比如id从0开始递增，或者用push方法添加元素，但这种情况只适用于id连续的场景，通用性不如对象。

验证你的复现代码 #

用对象替换数组后，你的复现代码运行结果会完全符合预期，不会出现null：

let id = 1;
let dataMap = {};
let myObj = $(`#${id}`).data(`myObj`);
console.log(JSON.stringify(myObj));

dataMap[id] = myObj;
console.log(JSON.stringify(dataMap)); // 输出 {"1":{"data":"some_data"}}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div id="1" data-my-obj='{"data":"some_data"}'></div>

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