1. 入门：认识 JavaScript 数组 concat 的基本特性
1.1 concat 的基本含义
本教程名为 JavaScript数组concat方法使用教程：从入门到实战，完整掌握数组拼接技巧，以下将围绕该主题展开。concat 方法用于拼接两个或多个数组/值，返回一个新数组，并且不会修改原始数组，这使得数据处理时更容易追踪变动。
一个简短的描述：concat 接收任意数量的参数，如果参数是数组则会将其元素逐一拼接到结果数组中，最终返回一个全新的数组。
const a = [1, 2, 3];
const b = [4, 5];
const c = a.concat(b); // [1, 2, 3, 4, 5]
console.log(a); // [1, 2, 3]
console.log(b); // [4, 5]
此外，传入非数组值时，concat 会把该值作为单独元素拼接，例如 a.concat(6) 的结果是 [1,2,3,6]，这在数据拼接中非常实用。
2. 实战技巧：处理混合数据与多维数组
2.1 拍平一层的技巧与注意点
在实际项目中，常常需要把混合结构的数组拍平到同一级别。通过将一个数组展开为若干参数传给 concat，可以实现“一层拍平”的效果，但需要注意 concat 自身不进行深度拍平，它只对传入的参数执行一层拼接。
另一种常见场景是把多个数组合并成一个大数组，直接把若干数组作为参数传给 concat，可以一次性完成拼接并返回新数组。
const arr = [1, [2, 3], 4];
const flatOne = [].concat(...arr);
console.log(flatOne); // [1, 2, 3, 4]
为了把多个数据源拼成一个扁平数组，可以将各源数组作为参数传给 concat，从而实现整合而不修改原始数据。
const a = [1, 2];
const b = [3, 4];
const c = [5, 6];
const res = a.concat(b, c, 7, [8]);
console.log(res); // [1, 2, 3, 4, 5, 6, 7, [8]]
3. 进阶技巧：与可变参数和函数式编程结合
3.1 使用 concat 拼接任意数量的数组
在现实项目中，往往需要把来自不同数据源的数组合并成一个扁平的数组。concat 可以接受任意数量的参数，无论是数组还是单个值，都会被拼接到结果数组中，返回的新数组不污染原数组。
为了更灵活地应用，常与 reduce 搭配使用，将多个来源的数据统一拼接成最终数组，从而实现从入门到实战的完整拼接流程。
function mergeAll(...sources) {
return sources.reduce((acc, item) => acc.concat(item), []);
}
console.log(mergeAll([1,2], [3,4], 5, [6])); // [1, 2, 3, 4, 5, [6]]
4. 与其他拼接方法对比：concat、spread 与 push
4.1 与展开运算符的对比
两种常用的拼接方式都能得到新数组，区别在于语法简洁性、性能以及对原数组的影响。concat 会返回一个新数组且不修改原始数组，而展开运算符（spread）也会生成新数组，通常写法更简洁直观。
let a = [1, 2];
let b = [3, 4];
// concat
let c = a.concat(b); // [1,2,3,4]
console.log(a); // [1,2]
console.log(b); // [3,4]
// spread
let d = [...a, ...b]; // [1,2,3,4]
console.log(d);
另外，push 结合 spread 也能实现拼接，但会直接修改原数组，通常在不可变性要求高的场景不推荐使用。下面给出对照示例以便理解差异：
let arr = [1, 2];
let more = [3, 4];
// 使用 push 的方式需要修改原数组
arr.push(...more);
console.log(arr); // [1, 2, 3, 4]
5. 实战案例：在前端数据处理中的应用
5.1 合并来自不同 API 的数据
在前端应用中，常需要把来自不同接口的数组数据拼接成统一的数据列表。concat 的不可变拼接特性，使得数据在组件间传递和状态管理中更易于追踪与测试。
下面给出一个常见场景的简要示例，展示如何把两组用户数据合并成一个列表：concating 操作保持原始数组不变，生成的新数组包含所有元素。
const usersFromApiA = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}];
const usersFromApiB = [{id: 3, name: 'Carol'}];
const allUsers = usersFromApiA.concat(usersFromApiB);
console.log(allUsers);
// [{id:1, name:'Alice'}, {id:2, name:'Bob'}, {id:3, name:'Carol'}]
在需要将不同来源的值混合在一个列表中的场景，也可以把非数组的值作为元素拼接，例如将事件 ID、状态标志等作为单独元素加入最终数组。
