如何在数组变量中声明对象？解决TypeError类型错误问题

嘿，这个问题我太熟了！咱们先搞清楚为啥会报错，然后一步步解决它～

错误原因 #

你创建了一个空数组 let data = []，这时候数组里还没有任何元素，data[0] 的值是 undefined。你试图给一个不存在的对象（也就是undefined）的name属性赋值，JavaScript自然就会抛出 TypeError: Cannot set property 'name' of undefined 这个错误啦。

几种可行的解决方案 #

• 方案1：先初始化索引对应的对象，再赋值属性
  先给data[0]创建一个空对象，之后再给它的属性赋值：

  let data = [];
  data[0] = {}; // 先创建空对象
  data[0].name = "john";
  console.log(data); // 输出: [{ name: 'john' }]
  

• 方案2：数组声明时直接初始化对象
  如果一开始就知道要在数组里放这个对象，直接在数组字面量里定义更简洁：

  let data = [{ name: "john" }];
  console.log(data); // 输出: [{ name: 'john' }]
  

• 方案3：使用push方法动态添加对象
  适合后续需要往数组里追加对象的场景，不用手动指定索引：

  let data = [];
  data.push({ name: "john" });
  console.log(data); // 输出: [{ name: 'john' }]
  

  要是需要批量添加多个对象也很方便：

  let data = [];
  data.push({ name: "john" }, { name: "jane" });
  console.log(data); // 输出: [{ name: 'john' }, { name: 'jane' }]
  

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