JavaScript中如何创建空JSON并动态添加键及嵌套JSON对象？

你的代码运行不符合预期，是三个逻辑错误导致的：

• const myJSON = '{}'定义的是JSON格式字符串，不是可操作的JavaScript对象，字符串类型无法直接通过键名赋值修改属性
• 赋值顺序错误：你在执行JSON.parse()把JSON转成对象之前就尝试修改属性，操作对象完全不对
• 结构匹配错误：目标结构中first对应的值是数组，数组内才是存储键值对的对象，直接写myJSON['first']['1'] = 'test'既没有初始化数组层级，还操作了不可修改的字符串，会直接抛出类型错误

你可以按照「解析JSON为JS对象 -> 按层级赋值属性 -> 需要时转回JSON字符串」的流程实现，完整可运行代码如下：

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
// 空JSON字符串先解析为原生JS对象
const myJSON = '{}';
const myObj = JSON.parse(myJSON);

// 按目标结构赋值，两种写法都可以
// 写法1：直接整体赋值
myObj['first'] = [{'1': 'test'}];

// 写法2：分步动态添加，适合后续需要持续追加内容的场景
// myObj.first = [];
// const tempItem = {};
// tempItem['1'] = 'test';
// myObj.first.push(tempItem);

// 遍历验证结果
let text = "";
for (const x in myObj) {
  text += x + ", ";
}
document.getElementById("demo").innerHTML = text;

// 如果操作完成后需要转回JSON字符串传输/存储，执行这行即可
// const finalJSON = JSON.stringify(myObj);
</script>

</body>
</html>

• 不要混淆JSON字符串和JS对象：JSON是跨端数据交换用的字符串格式，本身不支持直接修改属性，必须先转成原生JS对象才能做增删改操作，操作完成后再序列化为JSON字符串
• 动态添加嵌套结构时，要从最外层开始逐层初始化对应类型的值，比如数组类型的键要先赋值[]，对象类型的键要先赋值{}，再往里层添加内容，避免出现访问undefined属性的报错

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