JavaScript如何向现有对象动态新增子对象并解决相关TypeError报错

报错根因 #

你收到的Uncaught TypeError: Cannot create property 'vorname' on string 'kunde_2'错误原因非常明确：你定义的neuer_kunde是一个存储键名的字符串，不是可挂载属性的对象，直接给字符串加vorname这类自定义属性当然会报错。

你的整体实现思路是正确的，只是搞混了JS对象动态属性的操作规则：如果要用变量作为对象的键名，必须使用方括号语法对象[变量名]来操作对应属性，不能直接用点操作符操作存储键名的变量。

实现逻辑说明 #

你调整后的代码已经解决了核心问题，新增的kunden[neuer_kunde] = {}这行代码，就是先在客户存储对象kunden上，用动态生成的kunde_xx字符串作为键，挂载一个空的客户对象，之后再给这个空对象赋值各个属性，逻辑完全正确。

如果想要代码封装性更好，也可以把计数器和新增方法都整合到kunden对象内部，避免全局变量污染，参考写法如下：

const kunden = {
  // 把计数器放到对象内部，避免全局污染
  count_kunde: 1,
  kunde_1: {
    vorname: "Bengt",   
    nachname: "Flecks",
    straße: "Scheffelstraße",
    hausnummer: 33,
    plz: 10367,
    ort: "Berlin"
  },
  erstellen() {
    this.count_kunde += 1
    const neuerKundeKey = `kunde_${this.count_kunde}`
    // 先挂载空对象
    this[neuerKundeKey] = {}
    // 赋值属性
    this[neuerKundeKey].vorname = prompt("Vorname:")
    this[neuerKundeKey].nachname = prompt("Nachname")
    this[neuerKundeKey].straße = prompt("Straße")
    this[neuerKundeKey].hausnummer = prompt("Hausnummer")
    this[neuerKundeKey].plz = prompt("Plz")
    this[neuerKundeKey].ort = prompt("Ort")
  }
}

// 调用方法新增客户
kunden.erstellen()

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