一、前言

今天在开发项目过程中，遇到了一个需求，先请求了30个数据，放在一个列表中，并渲染展示出来，然后又请求了另外的30个数据，放在一个列表中，想在前一个数据的后面继续展示，即将第二次请求的来的数据列表跟第一次请求的数据列表做一个合并，需要用到数据的合并，接下来给大家介绍一下javascript中数据合并的几个方法

二、数组的组合

concat()方法

作用： concat()方法用于连接两个及以上的数组，并且该方法不会改变原来的数组
语法： array1.concat(array2,array3,…,arrayX) /array1.concat(1,2,3)
用法一：

let array1 = [100,200]
const array2 = [5,6,7,8]
const array3 = [10,11,12,13,14]
//因为concat()方法不会改变原数组，所以这里会返回一个新的数组，定义给我们的newarray
const newarray1 = array1.concat(array2) 
const newarray2 = array1.concat(array2,array3)
console.log(newarray1, newarray2)
//验证原数组array1是否有改变
console.log(array1)

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
 

输出结果为：

newarray1:[100,200,5,6,7,8]
newarray2:[100,200,5,6,7,8,10,11,12,13,14]
array1: [100,200]

  

 

  
1
  
2
  
3
 

总结：使用concat()方法时，如果传入的参数是数组，那会将它们逐一遍历，将数组中每个元素按顺序添加到被合并数组的末尾，最终返回一个新的数组，原数组不变。

用法二：

let array1 = [100,200]
const newarray3 = array1.concat(56,79,84)
console.log(newarray3)

  

 

  
1
  
2
  
3
 

输出结果为:

newarray3:[100,200,56,79,84]

  

 

  
1
 

总结：使用concat()方法时，如果传入参数是数字，那么就会将每个数字按顺序添加到被合并数组的末尾。

push(…items)

作用： 这是一种特殊的语法，可以将items跟另外一个数组合并，类似于上面的concat()方法，但不同的是，push(…items)会改变原数组
语法： array1.push(…array2)
用法：

let array1 = [100,200]
const array2 = [5,8,9,10]
array1.push(...array2)
//因为该方法会改变原数组，所以这里直接打印array1
console.log(array1)

  

 

  
1
  
2
  
3
  
4
  
5
 

输出结果：

array1: [100,200,5,8,9,10]

  

 

  
1
 

总结：在开发项目时，一般最方便是用这种方法，因为可以直接改变原数据。

其他方法

其实还有别的数组组合的方法，例如用for循环就可以简单实现数组的组合了，这里就不做多讲解了。

三、结束语

这是我在开发vue.js项目实战第三天中遇到的一个小问题，自己通过查询资料已经解决了，希望我的解决办法能对大家有所帮助。如果大家感兴趣，可以关注一波，每天跟大家分享一些问题和解决办法，大家也可以跟我分享一下你们的经验。

文章来源: lpyexplore.blog.csdn.net，作者：「零一」，版权归原作者所有，如需转载，请联系作者。

原文链接：lpyexplore.blog.csdn.net/article/details/105889722