当前位置：首页 > JavaScript

js表格实现拼接

2026-03-01 12:48:30JavaScript

使用数组的 `concat` 方法

通过 concat 方法可以将多个数组合并成一个新数组，原数组不会被修改。

const table1 = ['A1', 'B1', 'C1'];
const table2 = ['A2', 'B2', 'C2'];
const mergedTable = table1.concat(table2);
console.log(mergedTable); // ['A1', 'B1', 'C1', 'A2', 'B2', 'C2']

使用扩展运算符 `...`

ES6 的扩展运算符可以更简洁地拼接数组。

const table1 = ['A1', 'B1', 'C1'];
const table2 = ['A2', 'B2', 'C2'];
const mergedTable = [...table1, ...table2];
console.log(mergedTable); // ['A1', 'B1', 'C1', 'A2', 'B2', 'C2']

使用 `Array.prototype.push` 结合循环

如果需要动态拼接多个表格数据，可以使用循环结合 push 方法。

const tables = [
  ['A1', 'B1', 'C1'],
  ['A2', 'B2', 'C2'],
  ['A3', 'B3', 'C3']
];
let mergedTable = [];
for (const table of tables) {
  mergedTable.push(...table);
}
console.log(mergedTable); // ['A1', 'B1', 'C1', 'A2', 'B2', 'C2', 'A3', 'B3', 'C3']

使用 `Array.prototype.reduce`

reduce 方法可以逐步合并多个数组。

const tables = [
  ['A1', 'B1', 'C1'],
  ['A2', 'B2', 'C2'],
  ['A3', 'B3', 'C3']
];
const mergedTable = tables.reduce((acc, table) => [...acc, ...table], []);
console.log(mergedTable); // ['A1', 'B1', 'C1', 'A2', 'B2', 'C2', 'A3', 'B3', 'C3']

拼接对象数组（表格行数据）

如果表格数据是对象数组（如表格的每一行），可以使用类似方法合并。

js表格实现拼接

const table1 = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const table2 = [{ id: 3, name: 'Charlie' }, { id: 4, name: 'Dana' }];
const mergedTable = [...table1, ...table2];
console.log(mergedTable);
// [
//   { id: 1, name: 'Alice' },
//   { id: 2, name: 'Bob' },
//   { id: 3, name: 'Charlie' },
//   { id: 4, name: 'Dana' }
// ]