一、前言

今天在开发项目过程中，遇到了一个需求，先请求了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)

输出结果为：

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

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

用法二：

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

输出结果为:

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

总结：使用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)

输出结果：

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

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

其他方法

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

三、结束语

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

javascript 数组的组合相关推荐

创建零填充JavaScript数组的最有效方法？
在JavaScript中创建任意长度的零填充数组的最有效方法是什么? #1楼使用对象符号 var x = []; 零填充? 喜欢... var x = [0,0,0,0,0,0]; 充满" ...
javascript数组的属性、方法和清空-最全！！！(必看)
今天经理要我从新看一遍js,当我再看<精通js和jquery>这本书时,发现关于数组的这章节讲的很少,于是想自己总结一下数组的常用方法. 定义数组: var arr = new Array ...
17个实用的JavaScript数组和对象的方法
原文:Useful Javascript Array and Object Methods 作者:Robert Cooper 译者:Jim Xiao 前段时间,我收听了一个很棒的Syntax FM播客 ...
Javascript数组操作
使用JS也算有段时日,然对于数组的使用,总局限于很初级水平,且每每使用总要查下API,或者写个小Demo测试下才算放心,一来二去,浪费不少时间:思虑下,堪能如此继续之?当狠心深学下方是正道. 原文链接 ...
JavaScript 数组遍历方法的对比
前言 JavaScript 发展至今已经发展出多种数组的循环遍历的方法,不同的遍历方法运行起来那个比较快,不同循环方法使用在那些场景,下面将进行比较: 各种数组遍历的方法 for 语句代码: var ...
[JavaScript] JavaScript数组挖掘，不只是讲数组哟(2)
课程来源:后盾人上一篇的内容:[JavaScript] JavaScript数组挖掘,不只是讲数组哟数组引用类型分析,多维数组,用Array.of为数组创建细节,类型检测与转换,在一个数组后面加一 ...
这是如何更好地利用JavaScript数组的方法
by pacdiv 由pacdiv 这是如何更好地利用JavaScript数组的方法 (Here's how you can make better use of JavaScript arrays) ...
Javascript 数组
Javascript 数组 Javascript中的Array可以包含任意数据类型,并通过索引来访问每个元素. 要取得Array的长度,直接访问length属性: var arr = [1, 2, 3 ...
JavaScript 数组拼接打印_JavaScript 数组方法
JavaScript 数组方法 JS 数组 JS 数组排序 JavaScript 数组的力量隐藏在数组方法中. 把数组转换为字符串 JavaScript 方法 toString() 把数组转换为数组值 ...

javascript 数组的组合