如何在JavaScript中使用类append函数创建嵌套数组避免元素平铺

JavaScript 原生的 Array.prototype.push() 方法本身不会拆解传入的数组参数，你遇到的平铺问题，是代码中误用了展开运算符或者 concat 方法导致的。

正确实现方式 #

方法1：单条数据添加 #

直接将存储单个运动员信息的数组作为参数传入 push 即可，不需要额外嵌套一层数组：

const output = [];
const one = ['Jim', '12/05/1970', '85kg'];
const two = ['Bill', '08/04/1972', '65kg'];
const three = ['Anthony', '23/02/1971', '80kg'];

output.push(one);
output.push(two);
output.push(three);

// 输出结果：[ ['Jim', '12/05/1970', '85kg'], ['Bill', '08/04/1972', '65kg'], ['Anthony', '23/02/1971', '80kg'] ]
console.log(output);

方法2：批量添加多条数据 #

如果需要一次性添加多个运动员数据，直接将多个子数组作为参数传入 push 即可：

const output = [];
const one = ['Jim', '12/05/1970', '85kg'];
const two = ['Bill', '08/04/1972', '65kg'];
const three = ['Anthony', '23/02/1971', '80kg'];

output.push(one, two, three);
console.log(output);

方法3：静态数据直接初始化 #

如果所有运动员数据提前确定，可直接声明嵌套结构的数组，无需后续操作：

const output = [
  ['Jim', '12/05/1970', '85kg'],
  ['Bill', '08/04/1972', '65kg'],
  ['Anthony', '23/02/1971', '80kg']
];

常见错误原因排查 #

你遇到的数组被平铺的问题，通常是以下两种错误写法导致的：

1. 误用 concat 方法：concat 会自动展开传入的数组参数，导致数据平铺

   // 错误示例
   output = output.concat(one);
   

2. 误用展开运算符：将子数组的元素逐个传入 push，导致平铺

   // 错误示例
   output.push(...one);
   

另外你示例中写的 output.push([one]) 会生成三层嵌套的数组结构，不符合预期，无需额外套一层[]。

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