js表格实现拼接
使用数组的 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']拼接对象数组（表格行数据）
如果表格数据是对象数组（如表格的每一行），可以使用类似方法合并。
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' }
// ]注意事项
- 如果拼接的数组包含引用类型（如对象），合并后的数组会共享原数组的引用，修改其中一个可能影响另一个。
- 对于大型数组，扩展运算符和
concat可能比循环push稍慢，但在大多数场景下差异可以忽略。
