概述：JavaScript中concat的作用与基本用法
在日常前端开发中，concat方法扮演着把多个数组合并成一个新数组的角色，不会修改原始数组，从而帮助保持数据的不可变性和可预测性。
它的工作原理是对传入的参数逐个处理，若参数是数组则把元素展开并拼接到结果中，若参数不是数组则直接作为一个单独的元素追加到末尾。
以下给出一个最简示例，展示如何把两个数组及若干值合并成一个新的数组，并对结果进行校验。
const a = [1, 2, 3];
const b = [4, 5];
const result = a.concat(b, 6, [7, 8]);
console.log(result); // [1,2,3,4,5,6,7,8]从性能和最佳实践来看，concat创建了一个新的数组，这意味着原始数组不会被污染，在需要不可变数据结构的场景尤为重要。
使用方式：concat与扩展运算符的对比
传统写法：Array.prototype.concat
最直接的合并方式是调用Array.prototype.concat，它接收一个或多个数组以及任意数量的值，返回一个新数组，不改变调用者本身。
下面展示一个基本的对比示例，使用concat将两个数组合并为一个新数组。
const a = [1, 2];
const b = [3, 4];
const c = a.concat(b); // [1, 2, 3, 4]与此相比，使用扩展运算符的等价写法在语义上更加直观，尤其在需要把多个来源的值“平铺”到一个新数组时。
const a = [1, 2];
const b = [3, 4];
const c = [...a, ...b]; // [1, 2, 3, 4]在不同场景下，concat与扩展运算符各有优势，选择时应结合可读性和兼容性来权衡。
何时选用concat，何时用展开运算符
当你需要把若干已知数组直接拼接成一个新数组时，concat的语义清晰且简洁，尤其在已经有数组列表的场景中。
当你需要把任意数量的来源“合并成一个序列”并且常常是在函数参数、对象字面量或循环中使用时，展开运算符通常更具可读性，并且与数组字面量结合更方便。
const a = [1, 2];
const b = [3, 4];
const c = a.concat(b, 5); // [1, 2, 3, 4, 5]
const d = [...a, ...b, 5]; // [1, 2, 3, 4, 5]需要注意的是，展开运算符在旧环境中可能不被支持，通常需要通过Babel等工具进行转译才能兼容较旧的浏览器。
为了在复杂场景下保持代码健壮，开发者应了解在不同环境下的兼容性要求，并在打包构建阶段进行相应处理。
实战场景：如何在实际项目中合并多份数组
场景一：从多个接口抓取的数据汇总
在需要把来自不同接口的数据汇总成一个列表的时候，concat和扩展运算符都可以使用，关键在于保持原始数据的不可变性以及实现简洁性。
下面展示一个简单的异步场景，先从两个接口获取数据，再将结果合并成一个数组用于渲染。
async function fetchAndMerge() {const [r1, r2] = await Promise.all([fetch('/api/users?page=1').then(res => res.json()),fetch('/api/users?page=2').then(res => res.json())]);const list1 = r1.users;const list2 = r2.users;const all = list1.concat(list2);return all;
}如果你更倾向于使用展开运算符，可以将合并改写为拆解并组装的形式，通常写起来更直观。
const all = [...list1, ...list2];在多源数据汇总场景中，reduce+concat的组合也常被用来处理任意数量的数组列表，保持代码的扩展性。
const lists = [list1, list2, list3];
const merged = lists.reduce((acc, cur) => acc.concat(cur), []); // [all items]场景二：处理分页数据的汇总
分页数据的汇总通常需要把多页的数据拼接成一个完整列表，concat提供一种简洁的做法来实现跨页聚合。
以下示例展示如何把多页数据拼接到一个统一数组中，兼容性更强的做法往往采用基于可变性较小的拼接方法，以确保不会意外修改中间缓存的页数据。
const p1 = [1,2,3];
const p2 = [4,5,6];
const p3 = [7,8,9];
const allPages = [].concat(p1, p2, p3); // [1,2,3,4,5,6,7,8,9]如果你在一个包含大量分页数据的场景中工作，使用reduce+concat可以逐步展开并拼接所有页的数据，保持逻辑清晰。
const pages = [p1, p2, p3];
const all = pages.reduce((acc, cur) => acc.concat(cur), []);