javascript 数组的组合

1、前言

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

2、数组的组合

concat()方法

做用: concat()方法用于链接两个及以上的数组,而且该方法不会改变原来的数组
语法: array1.concat(array2,array3,…,arrayX) /array1.concat(1,2,3)
用法一:vue

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)

输出结果为:java

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

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

用法二:数组

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

输出结果为:svg

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

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

push(…items)

做用: 这是一种特殊的语法,能够将items跟另一个数组合并,相似于上面的concat()方法,但不一样的是,push(…items)会改变原数组
语法: array1.push(…array2)
用法:code

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

输出结果:xml

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

总结:在开发项目时,通常最方即是用这种方法,由于能够直接改变原数据。token

其余方法

其实还有别的数组组合的方法,例如用for循环就能够简单实现数组的组合了,这里就不作多讲解了。

3、结束语

这是我在开发vue.js项目实战第三天中遇到的一个小问题,本身经过查询资料已经解决了,但愿个人解决办法能对你们有所帮助。若是你们感兴趣,能够关注一波,天天跟你们分享一些问题和解决办法,你们也能够跟我分享一下大家的经验。

相关文章
相关标签/搜索