最直接且推荐的方式是使用扩展运算符（…）或concat()方法。1. 扩展运算符能将多个数组展开并合并为一个新数组，语法简洁且支持插入非数组元素，同时保持原数组不变；2. concat()方法可连接两个或多个数组并返回新数组，还能直接接收非数组参数将其作为元素添加。两者均不修改原数组，符合不可变性原则，而push()或循环拼接会改变原数组且代码冗长，不推荐使用。
JavaScript拼接多个数组，最直接、最推荐的方式通常是使用扩展运算符（spread operator
...
）或者数组自带的
concat()
方法。它们都能优雅地将多个数组的内容合并成一个全新的数组，而不会改变原有的数组。
解决方案
在JavaScript中，要将多个数组拼接起来，我们主要依赖两种方式，它们各有其特点，但目的都是为了生成一个包含所有元素的新数组。
1. 扩展运算符（Spread Operator
...
）
立即学习“Java免费学习笔记（深入）”；
我个人最喜欢用这种方式，因为它写起来非常简洁，读起来也一目了然。扩展运算符可以将一个可迭代对象（比如数组）展开成独立的元素。当我们把它用在数组字面量内部时，就能实现数组的拼接。
const array1 = [1, 2];const array2 = [3, 4];const array3 = [5, 6];// 拼接多个数组const combinedArray = [...array1, ...array2, ...array3];console.log(combinedArray); // 输出: [1, 2, 3, 4, 5, 6]// 也可以在拼接的同时加入新元素const anotherCombined = [0, ...array1, 99, ...array2, 100, ...array3];console.log(anotherCombined); // 输出: [0, 1, 2, 99, 3, 4, 100, 5, 6]
这种方式的优点在于它创建了一个全新的数组，保持了原始数组的不可变性（immutability），这在现代前端开发，尤其是在使用React、Vue等框架时，是一个非常好的实践。它也允许你在拼接过程中自由插入其他元素。
2.
Array.prototype.concat()
方法
concat()
方法是数组的一个原生方法，它的作用就是连接两个或更多的数组。这个方法同样不会改变现有的数组，而是返回一个新数组。
const arrayA = ['a', 'b'];const arrayB = ['c', 'd'];const arrayC = ['e', 'f'];// 拼接多个数组const resultArr = arrayA.concat(arrayB, arrayC);console.log(resultArr); // 输出: ["a", "b", "c", "d", "e", "f"]// concat 也可以接受非数组参数，它们会被直接添加到新数组中const mixedResult = arrayA.concat(arrayB, 'g', arrayC, 123);console.log(mixedResult); // 输出: ["a", "b", "c", "d", "g", "e", "f", 123]
concat()
方法非常直观，特别是当你有一个基础数组，然后想把其他数组或零散的元素追加到它后面时。它能接受任意数量的参数，每个参数可以是数组，也可以是单个值。
为什么不推荐使用
push()
或
for
循环来拼接数组？
这个问题其实挺有意思的，因为它触及了编程中“效率”和“代码风格”的权衡。虽然理论上你可以用
push()
结合
for
循环，甚至更“高级”一点的
Array.prototype.push.apply()
来拼接数组，但我个人以及很多同行，通常不推荐在大多数场景下这样做。
先说
for
循环加
push()
：
const arrA = [1, 2];const arrB = [3, 4];const finalArr = [...arrA]; // 先复制一份 arrAfor (let i = 0; i < arrB.length; i++) { finalArr.push(arrB[i]);}console.log(finalArr); // 输出: [1, 2, 3, 4]
这种方式的问题在于它太“命令式”了，代码量相对大，不够简洁。更关键的是，它通常会涉及到对某个数组的“原地修改”（mutation），比如如果你直接
arrA.push(arrB[i])
，那么
arrA
本身就被改变了。在大型应用中，这种副作用（side effect）会让代码变得难以追踪和维护，尤其是在异步操作或者多个模块共享数据时，很容易出现意想不到的bug。我总是倾向于写“纯函数”，即不修改输入参数的函数，这样代码的可预测性会大大提高。
再来看
Array.prototype.push.apply()
：
const arrX = [1, 2];const arrY = [3, 4];Array.prototype.push.apply(arrX, arrY); // 将 arrY 的元素逐个推入 arrXconsole.log(arrX); // 输出: [1, 2, 3, 4]// 注意：arrX 被修改了！
这种方式虽然简洁，但它最大的缺点是会直接修改第一个数组 (
arrX
在这个例子中)。同样是副作用的问题。此外，
apply
方法在处理非常大的数组时，可能会因为函数调用栈的限制而报错（“Maximum call stack size exceeded”），虽然这在日常开发中不常见，但总归是一个潜在的风险。
所以，总的来说，
concat()
和扩展运算符更符合现代JavaScript的编程范式：它们是声明式的，更易读，而且最重要的是，它们创建新数组，保持了原始数据的不可变性。这让我们的代码更健壮，更易于理解和调试。
拼接大量数组时，性能会有差异吗？
这确实是个值得思考的问题，尤其是在处理大数据量或者对性能有极致要求的场景下。不过，对于我们日常绝大多数的Web开发任务来说，
concat()
和扩展运算符在性能上的差异几乎可以忽略不计。
从底层实现来看，两者都需要遍历所有待拼接的数组元素，并将它们复制到一个新的内存空间。这意味着它们的时间复杂度大致是相同的，都与所有待拼接数组的总长度成正比。
扩展运算符
...
: 它的实现通常会涉及到引擎内部的一些优化，比如JIT编译器可能会对这种模式进行高度优化。在很多现代JavaScript引擎中，它的性能表现非常出色，甚至在某些情况下可能比
concat()
略快，因为它可能避免了一些函数调用的开销。
Array.prototype.concat()
: 这是一个非常成熟的原生方法，也经过了高度优化。它的性能通常非常稳定可靠。
那么，什么时候性能差异会变得明显呢？通常是当你处理极其庞大的数组（比如每个数组有数十万甚至数百万个元素），或者需要拼接成百上千个数组时，你才可能需要考虑微观层面的性能差异。在这些极端情况下，不同的JavaScript引擎（V8, SpiderMonkey等）和它们的版本可能会有不同的表现。
但说句实话，在大部分业务场景下，如果你的数组拼接成了性能瓶颈，那么问题可能不在于你选择了
concat
还是
...
，而在于你的数据结构设计或者算法本身是不是存在更深层次的效率问题。例如，是不是有办法在数据生成阶段就避免多次拼接，或者有没有其他更适合处理大数据流的方案（比如使用迭代器、生成器，或者更底层的数据结构）。
我的建议是：优先选择代码的可读性和维护性。 扩展运算符通常在这方面表现更优，因为它看起来更“自然”，更符合我们对数组合并的直观理解。只有在通过性能分析工具（如浏览器开发者工具的Performance面板）确认数组拼接确实是瓶颈时，再去考虑优化它的具体实现方式。过早的性能优化，往往会牺牲代码的清晰度，而带来的收益却微乎其微。
拼接数组时，如何处理非数组元素或空数组？
在实际开发中，我们拼接的数组可能不是那么“干净”，里面可能混杂着空数组、
null
、
undefined
，甚至是一些非数组的原始值。理解
concat()
和扩展运算符如何处理这些情况，能帮助我们写出更健壮的代码。
1. 处理空数组
无论是
concat()
还是扩展运算符，它们处理空数组都非常优雅，并不会引入任何问题。
const arr1 = [1, 2];const emptyArr = [];const arr3 = [3, 4];// 使用 concat()const resultConcat = arr1.concat(emptyArr, arr3);console.log(resultConcat); // 输出: [1, 2, 3, 4]// 使用扩展运算符const resultSpread = [...arr1, ...emptyArr, ...arr3];console.log(resultSpread); // 输出: [1, 2, 3, 4]
它们都只是简单地跳过空数组，就像它们不存在一样，最终结果中不会有任何多余的元素。这非常符合我们的预期。
2. 处理非数组元素（如数字、字符串、对象等）
这里
concat()
和扩展运算符的行为就有所不同了，理解这个差异很重要。
concat()
方法： 如果
concat()
的参数不是数组，它会直接将这些非数组参数作为单个元素添加到新数组的末尾。
const baseArr = [1, 2];const nonArrayResult = baseArr.concat(3, 'hello', { key: 'value' }, [4, 5]);console.log(nonArrayResult);// 输出: [1, 2, 3, "hello", { key: "value" }, 4, 5]
这种行为在某些场景下非常方便，比如你想在一个数组后面追加几个零散的值。
扩展运算符
...
： 扩展运算符只能用于可迭代对象（Iterable），比如数组、字符串、Set、Map等。如果你尝试直接扩展一个非可迭代对象（如数字、布尔值、
null
或
undefined
），它会抛出
TypeError
。
const arrA = [1, 2];// 错误示例：直接扩展一个数字会报错// const errorSpread = [...arrA, ...3]; // TypeError: 3 is not iterable// 但你可以将非数组元素直接放在数组字面量中const correctSpread = [...arrA, 3, 'hello', { key: 'value' }];console.log(correctSpread);// 输出: [1, 2, 3, "hello", { key: "value" }]
所以，如果你想在用扩展运算符拼接数组时加入非数组元素，你需要把这些非数组元素直接写在新的数组字面量里，而不是尝试去扩展它们。
3. 处理
null
或
undefined
concat()
方法：
concat()
会将
null
和
undefined
视为普通的单个值，并将其添加到新数组中。
const arrWithNull = [1, 2].concat(null, [3, undefined]);console.log(arrWithNull); // 输出: [1, 2, null, 3, undefined]
扩展运算符
...
： 尝试直接扩展
null
或
undefined
会抛出
TypeError
，因为它们不是可迭代的。
// const errorNullSpread = [...null]; // TypeError: null is not iterable// const errorUndefinedSpread = [...undefined]; // TypeError: undefined is not iterable// 但如果它们是数组的一部分，那没问题const arrWithNullInIt = [1, null, 2];const arrWithUndefinedInIt = [3, undefined, 4];const validSpread = [...arrWithNullInIt, ...arrWithUndefinedInIt];console.log(validSpread); // 输出: [1, null, 2, 3, undefined, 4]
总结来说，
concat()
在处理混合类型的参数时更为“宽容”，它会尽可能地将所有参数都添加到结果数组中。而扩展运算符则更“严格”，它只接受可迭代对象进行扩展，非可迭代对象必须作为普通元素直接写入数组字面量。了解这些细微的差别，可以帮助我们避免一些运行时错误，并根据具体需求选择最合适的拼接方法。
以上就是javascript怎么拼接多个数组的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/112245.html
微信扫一扫 
支付宝扫一扫 
