js 合并数组(两种方式)

最新推荐文章于 2025-07-11 09:54:15 发布
最新推荐文章于 2025-07-11 09:54:15 发布
阅读量8.2k 收藏 3
点赞数 1
CC 4.0 BY-SA版权
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_40802058/article/details/82799321
本文探讨了在JavaScript中使用concat方法和ES6扩展运算符来连接数组的技巧。concat方法不会修改原始数组，而是返回一个新数组；扩展运算符则提供了一种简洁的数组拼接方式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

let arr1=[1,2,3];

let arr2=[4,5,6];

 

console.log(arr1.concat(arr2) )  //[1,2,3,4,5,6]      

concat() 方法用于连接两个或多个数组。

该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

arrayObject.concat(arrayX,arrayX,......,arrayX)

返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。

 

console.log([...arr1,...arr2])      //[1,2,3,4,5,6]

es6扩展运算符

无涯教程-Javascript - concat()函数
无涯教程
02-20 609
JavaScript array.concat()方法 将多个数组合成成一个新数据返回。
JS合并两个数组的3种方法详解
10-16
apply()方法提供了一种非常简洁的方式来合并数组，只需一行代码。它同样会修改原数组a，因此在需要保留原数组不变的情况下不适合使用。 总结以上三种方法： - concat()方法适用于数组元素较少、合并次数不多的场景...
js 中Array.concat()实现方法
coder_chenz的博客
08-14 5546
concat() 方法用于连接两个或多个数组。 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。arrayObject.concat(arrayX,arrayX,......,arrayX)返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。Arr
JavaScript 数组合并全攻略：7种高效方法详解
最新发布
2301_81137804的博客
07-11 1524
在日常 JavaScript 开发中，数组操作是最常见的任务之一，其中数组合并更是高频需求。本文将全面解析 JS 中合并数组的各种技巧，助你轻松应对不同场景！
concat() 方法用于连接两个或多个数组。
u013140948的博客
09-07 980
定义和用法 concat() 方法用于连接两个或多个数组。 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。 this.listdata = this.listdata.concat(res.list)
JavaScript-JS数组方法之Array.concat()
hnyanzijun1的博客
06-11 1401
Array.concat()方法创建并返回一个新数组，它的元素包括调用concat()的原始数组的元素和concat()的每个参数。如果这些数组中的任何一个自身是数组，则连接的是数组的元素，而非数组本身。但要注意，concat()不会递归扁平化数组的数组。concat()也不会修改调用的数组。下面有一些示例： var a = [1,2,3]; a.concat(4, 5); // 返回[1,2,3,4,5] a.concat([4,5]); // 返回[1,2,3,4,5]
Array.concat( )
u013571243的专栏
04-12 1635
Array.concat( ) 连接数组     可用性 JavaScript 1.2; JScript 3.0; ECMAScript v3 语法 array.concat(value, ...) 参数 value, ... 要增加到array中的值，可以是任意多个。 返回值 一个新数组，是 描述
JavaScript中合并数组的N种方法
12-12
我们将使用不同的方法结合/合并两个JS数组，以及讨论每个方法的优点/缺点。 让我们先考虑下面这情况： 代码如下: var a = [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]; var b = [ “foo”, “bar”, “baz”, “bam”, “bun”...
JavaScript合并两个数组并去除重复项的方法
10-24
在JavaScript中，合并两个数组并去除重复项是一个常见的任务，特别是在处理数据集合或者组合不同来源的数据时。这里我们将深入探讨几种不同的方法来实现这个功能。 首先，我们可以使用`concat()`方法来合并两个数组...
数组concat方法
cqlcqlcui123的博客
04-21 696
和[...]（扩展运算符）都是 JavaScript 中用于合并数组或创建新数组的方法，但它们在使用方式和功能上有一些区别。
JS基础 Array.concat()方法底层业务逻辑分析
qq_40877709的博客
07-14 980
方法的作用： 方法concat()将创建并返回一个新数组，这个数组是将所有参数都添加到array中生成的。它并不修改array。如果要进行concat()操作的参数是一个数组，那么添加的是数组中的元素，而不是数组。 方法的参数： 要增加到array中的值，可以是任意多个。 方法的返回值: 一个新数组。 底层实现业务逻辑: 1、先创建一个新的数组,然后把当前数组的值放到新数组里面 2、判断arguments长度是否为0,如果...
JavaScript concat() 方法－连接两个或多个数组
diaojilu3861的博客
08-31 339
一，定义和用法 concat() 方法用于连接两个或多个数组。 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。 语法 arrayObject.concat(arrayX,arrayX,......,arrayX) 参数描述 arrayX 必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。 返回值 返回一个新...
js 数组对象方法 concat() 连接两个或者多个数组
杰哥的博客
09-07 4694
concat 用于连接两个或者多个数组,该方法不会改变现有的数组，而会返回一个新的数组。 下面是三个数组 var arr1 = ['香蕉','苹果','橙子','橘子']; var arr2 = new Array('宫保鸡丁','水煮肉片','辣子鸡丁','爆炒牛肉'); var arr3 = new Array(); arr3[0] = '冰红茶'; arr3[1] = '茉莉花茶';...
concat() 连接两个或更多的数组，并返回结果
LzzMandy的博客
03-03 1095
定义和用法 concat() 方法用于连接两个或多个数组。 注意:该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。 语法 array1.concat(array2,array3,...,arrayX) 参数 参数 描述 array2,array3, ...,arrayX 必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。 返回值 Array 对象 返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成..
Array.prototype.concat()
zhangxueyou2223的博客
01-17 244
如果数组成员包括对象，concat 方法返回当前数组的一个浅拷贝。所谓“浅拷贝”，指的是新数组拷贝的是对象的引用。concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。除了数组作为参数，concat也接受其他类型的值作为参数，添加到目标数组尾部。
Array.concat() 连接多个数组，或把元素添加进数组
weixin_41796631的博客
09-03 5311
   
JS数组方法：concat
不熬夜的臭宝的博客
05-12 6447
前端javascript中concat数组方法
JavaScript Array数组concat方法的使用
编程界明世隐的博客
12-03 4219
语法 Array.concat(otherArray) 说明： concat()方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。 此方法可以使用任意数量的数组参数。 var arr = [1,2,3,4,5] var arr1=[6,7] var newArr = arr.concat(arr1); console.log("原数组",arr); console.log("返回值",newArr); 输出： 原数组 (5)[1, 2, 3, 4, 5] 返回值 ..
js使用concat方法将多个数组合并
yhj198927的博客
01-12 840
在 JavaScript 中，可以使用 concat() 方法将两个或多个数组合并成一个新数组。该方法将返回一个新数组，其中包含原始数组中的所有元素。
js合并数组
06-25
<think>首先，用户的问题是：“我想使用JavaScript合并数组请问JavaScript如何合并两个或多个数组”。这直接询问如何在JavaScript中合并数组。我需要在回答中遵循系统级指令：-所有行内数学表达式必须用$...$格式。但这里没有数学表达式，主要是代码，所以可能不需要。-独立公式用$$...$$，但同样，这里不适用。-LaTeX语法正确：确保代码块正确。-使用中文回答：整个回答用中文。-生成相关问题：在回答末尾添加相关问题。-引用标识：在引用的段落末尾添加引用标识，如[^1]。参考了提供的引用，但用户说这些仅供参考，不是真实需求。我应该基于问题来回答。用户提供的引用：-[^1]:使用`concat`方法合并两个数组。-[^2]:使用展开运算符合并对象，但用户问的是数组，不是对象。-[^3]:合并数组中的子元素，基于相同字段。-[^4]:直接展示合并数组的例子。用户的问题是合并数组，所以引用[^1]和[^4]最相关。引用[^2]是关于对象的，引用[^3]是关于数组元素的合并，但用户问的是简单数组合并。回答结构：-结构清晰，逐步解决问题。-保证真实可靠：提供准确的信息。-使用中文。关键点：合并数组的常见方法：1.`concat()`方法：连接两个或多个数组，返回新数组。2.展开运算符（Spreadoperator）：使用`...`来合并数组。3.其他方法如循环，但推荐标准方法。步骤：1.介绍问题：解释如何在JavaScript中合并数组。2.提供简单方法：使用`concat`。3.提供现代方法：使用展开运算符。4.给出代码示例。5.添加相关问题。引用标识：由于用户提供了引用，我应该在相关部分添加引用标识。但用户说“上述引用仅供参考”，所以我需要谨慎。在回答中，当提到`concat`时，可以引用[^1]，因为它是直接相关的。生成相关问题：在末尾添加3-4个相关问题，如优化、性能、应用等。最终回答结构：-开头：直接回答问题。-方法1：使用`concat()`，提供代码示例，引用[^1]。-方法2：使用展开运算符，提供代码示例。-其他方法：简要提到。-总结。-§§相关问题§§：列出相关问题。代码格式：用代码块，如示例中的Python代码。用户可见层：确保回答清晰、可靠。</think>### JavaScript 合并数组的方法 在 JavaScript 中，合并两个或多个数组是常见的操作。这可以通过多种方法实现，每种方法都有其适用场景。下面我将逐步介绍最常用和推荐的方式，确保代码简洁高效。所有方法都返回一个新数组，不会修改原数组，这符合函数式编程的最佳实践。 #### 1. **使用 `concat()` 方法（兼容性好，适合简单场景）** `concat()` 是 JavaScript 数组的内置方法，用于连接多个数组并返回一个新数组。它支持任意数量的参数（可以是数组或值），语法简单且兼容所有主流浏览器（包括旧版本）。 **代码示例：** ```javascript // 合并两个数组 const alpha = ['a', 'b', 'c']; const numeric = [1, 2, 3]; const combined = alpha.concat(numeric); console.log(combined); // 输出: ['a', 'b', 'c', 1, 2, 3] // 合并多个数组 const array1 = [10, 20]; const array2 = [30, 40]; const array3 = [50, 60]; const merged = array1.concat(array2, array3); console.log(merged); // 输出: [10, 20, 30, 40, 50, 60] ``` - **优点**：易于理解，兼容性强。 - **缺点**：如果合并大量大型数组，性能可能略低于其他方法（因为每次调用都创建新数组）。 - 参考：`concat()` 方法在合并数组时高效且直接[^1]。 #### 2. **使用展开运算符（`...`）（现代语法，简洁高效）** 展开运算符（Spread operator）是 ES6 引入的特性，用于将数组“展开”到新数组中。它更简洁，尤其适合合并多个数组或与其他元素混合时。 **代码示例：** ```javascript // 合并两个数组 const fruits = ['apple', 'banana']; const vegetables = ['carrot', 'potato']; const food = [...fruits, ...vegetables]; console.log(food); // 输出: ['apple', 'banana', 'carrot', 'potato'] // 合并多个数组并添加额外元素 const numbers = [1, 2]; const letters = ['a', 'b']; const symbols = ['#', '$']; const allItems = [...numbers, ...letters, ...symbols, 'end']; console.log(allItems); // 输出: [1, 2, 'a', 'b', '#', '$', 'end'] ``` - **优点**：语法简洁，性能较好（在现代 JavaScript 引擎中优化良好），支持动态合并。 - **缺点**：不兼容 IE11 等旧浏览器（需使用 Babel 等工具转译）。 - 参考：展开运算符在合并数组时提供更灵活的代码结构[^4]。 #### 3. **其他方法（针对特定场景）** - **使用 `Array.prototype.push.apply()`（合并到现有数组）**： 如果需要将多个数组合并到一个现有数组中（修改原数组），可以使用 `push.apply()`。 ```javascript const target = [100, 200]; const source = [300, 400]; Array.prototype.push.apply(target, source); console.log(target); // 输出: [100, 200, 300, 400]（原数组被修改） ``` - **注意**：此方法会改变原数组，不推荐在纯函数中使用。 - **使用循环（自定义合并逻辑）**： 如果数组元素需要基于条件合并（例如，根据字段去重），可结合 `reduce()` 或 `forEach()` 实现[^3]。 ```javascript const arr1 = [{ id: 1, value: 'x' }, { id: 2, value: 'y' }]; const arr2 = [{ id: 2, value: 'z' }, { id: 3, value: 'w' }]; // 合并并基于 id 去重 const mergedUnique = [...arr1, ...arr2].reduce((acc, obj) => { if (!acc.find(item => item.id === obj.id)) { acc.push(obj); } return acc; }, []); console.log(mergedUnique); // 输出: [{ id:1, value:'x' }, { id:2, value:'z' }, { id:3, value:'w' }] ``` #### 总结 - 对于简单合并，**优先使用 `concat()` 或展开运算符**，它们高效且易读。 - 如果目标环境支持 ES6，展开运算符是最佳选择；否则，`concat()` 更安全。 - 性能考虑：合并大型数组时，展开运算符通常更快（时间复杂度为 $O(n)$，其中 $n$ 是总元素数）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值