JavaScript中向对象内数组添加数据的正确方法

本文详解如何在javascript中安全地将数组元素添加到对象属性中，重点解决“cannot read properties of undefined (reading 'push')”错误，涵盖对象初始化、数组赋值与合并策略，并提供可直接运行的代码示例。

在JavaScript中，将数组“推入”对象时出现 Cannot read properties of undefined (reading 'push') 错误，根本原因在于：你试图对一个未定义（undefined）或非数组类型的对象属性调用 .push() 方法。.push() 是数组原型上的方法，只能作用于 Array 实例——而普通对象（如 objPicked）本身不支持该方法，且若未显式初始化，其值为 undefined，访问 undefined.push() 必然报错。

✅ 正确做法：先初始化对象，再明确数组属性

首先，必须初始化 objPicked 为一个对象，并为其指定一个数组类型的属性（例如 players）：

var objPicked = {
  players: [] // 显式声明 players 为一个空数组
};

此时 objPicked.players 是合法数组，可安全使用 .push() 添加单个元素（如玩家对象）：

const player = { PlayerID: 3, Num: '--', First: 'John', Last: 'Smith', Position: 'QB' };
objPicked.players.push(player); // ✅ 正确：向数组追加一个对象

⚠️ 注意：arrPlayer 本身已是数组，勿误用 .push() 堆叠层级

在你的原始代码中，arrPlayer 是一个包含多个对象的数组（如 [{'PlayerID':3}, {'First':'John'}, ...]）。若你希望将整个 arrPlayer 的内容合并进 objPicked.players（即展平为一维数组），则不应使用 push()，否则会形成嵌套数组：

// ❌ 错误：这会让 objPicked.players 变成 [[{...}, {...}], ...] —— 二维数组
objPicked.players.push(arrPlayer);

// ✅ 正确方案一：使用 concat() 合并（返回新数组）
objPicked.players = objPicked.players.concat(arrPlayer);

// ✅ 正确方案二：直接赋值（覆盖原数组，适用于首次初始化）
objPicked.players = arrPlayer;

// ✅ 正确方案三：使用展开运算符（ES6+，推荐）
objPicked.players.push(...arrPlayer); // 将 arrPlayer 元素逐个展开后 push

? 完整可运行示例

$(document).ready(function() {
  // 1. 初始化数据数组（每个元素是玩家的一个字段对象 —— 注意：这种结构较非常规）
  const arrPlayer = [
    {'PlayerID': 3},
    {'Num': '--'},
    {'First': 'John'},
    {'Last': 'Smith'},
    {'Position': 'QB'}
  ];

  // 2. 正确初始化对象，含数组属性
  const objPicked = {
    players: []
  };

  // 3. 将 arrPlayer 所有元素展开并加入 players 数组
  objPicked.players.push(...arrPlayer);

  console.log(objPicked);
  // 输出：{ players: [{PlayerID:3}, {Num:'--'}, ..., {Position:'QB'}] }
});

? 最佳实践建议： 若表示“一个球员”，应使用单个对象（如 {PlayerID: 3, First: 'John', Last: 'Smith', Position: 'QB'}），而非多个单字段对象组成的数组； 若需管理多个球员，请使用 players: [player1, player2, ...] 结构，语义清晰且便于遍历操作； 始终确保目标属性已初始化为数组，再调用 .push()、.concat() 或展开运算符。

通过明确对象结构、区分“添加单个元素”与“合并整个数组”的语义，即可彻底避免 undefined.push() 类型错误，写出健壮、可维护的 JavaScript 数据操作逻辑。