vue项目中向数组添加元素的3种方式

 更新时间:2023年10月17日 10:38:50   作者:努力学编程呀(๑•ี_เ•ี๑)  
这篇文章主要给大家介绍了关于vue项目中向数组添加元素的3种方式,在Vue中添加元素到数组非常简单,文中通过代码介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下

方法:

push()unshift()splice()

1、push()

含义: push() 结尾添加

 使用方式:数组.push(元素)

示例代码如下:
this.list.push(newList)  
//push()  在数组末端添加一条数据 
console.log(this.list)

2. unshift()

含义:unshift() 头部添加

使用方式:数组.unshift(元素) 

示例代码如下:
let newList = {
   id:'4'
   name1:'a4',
   name2:'b4',
 }
this.list.unshift(newList)  //unshift()在数组头部添加一条数据 
console.log(this.list)

3. splice()

含义: splice() 方法向/从数组指定位置添加/删除项目,然后返回被删除的项目。

使用方式:数组.splice(index,0,newList)

说明: 第一个参数为需要操作数据的下标,

第二个参数为操作添加/删除(0为添加,1为不操作,2为删除,3为删除多条数据),

第三个参数可选

示例代码如下:
   let newList = {
     id:time.id,
     name1:time.name1,
     name2:time.name2,
   }
   //第一个参数为需要操作数据的下标,第二个参数为操作添加/删除(0为添加,1为不操作,2为删除,3为删除多条数据),第三个参数可选
   this.list.splice(index,0,newList) 
   console.log(this.list)

分析图如下所示:

第一种情形:传递一个参数

第二种情形:传递两个参数

第三种情形:传递的参数为负值

slice()传递的参数还可以是负值。当参数中有一个负值时,则用数组长度加上该数来确定相应的位置。比如传递的值是-3,数组的length为6,此时slice(-3)对应的就是slice(3)。或者可以从数组的末尾开始计算起,最末尾的是-1。

分析图如下所示:

特别要注意的点:

传递的第二个参数也可以是负数,而且还可以正数和负数混合使用。

特别注意:slice()传递的两个参数时,第一个参数和第二个参数位置相同或者第一个参数在第二个参数之后时,得到的新数组是一个空值(负值也是类似,但负值与数值长度之和再作对比)。

简言之,结束位置小于或等于开始位置,将返回一个空数组。

分析图如下图所示:

4、concat() // 数组合并

//示例代码如下:
let arrA = [1,2,3]
let arrB = [4,5,6]
arrA.concat(arrB) // 输出 1,2,3,4,5,6
let arrC = [7,8,9]
arrA.concat(arrB,arrC) // 输出 1,2,3,4,5,6,7,8,9

concat()方法:

含义:我们可以将其理解为合并数组。

原理:基于当前数组中的所有项创建一个新数组,即,concat()先给当前数组创建一个副本,然后将接收到的参数添加到这个副本(数组)的末尾,最后返回一个新的数组。

第一种情形:传递一个参数或多个参数
var arr = [`1`,'2','3'];
console.log(arr);
结果输出:
 // ["1", "2", "3"]
var arr2 = arr.concat('4','5','6');
console.log(arr2);
结果输出
 // ["1", "2", "3", "4", "5",'6']
第二种情形:
 传递一个或多个数组
 示例代码如下:
 var arr = ["1","2",'3'];
console.log(arr);
结果输出
 // ["1", "2",'3']
var arr2 = arr.concat(10,["4","5",'6'],["7","8","9"]);
console.log(arr2);
输出结果
 // ["1", "2",'3',10, "4", "5", "6", "7", "8",'9']
第三种情形:
传递空值(也就是说没有传递参数)
示例代码如下:
var arr = [1,2,3];
console.log(arr); // [1, 2,3]
var arr2 = arr.concat();
console.log(arr2); // [1, 2,3]
总结:
此时它只是复制当前数组,并且返回一个副本。

总结: concat()方法是在数组的副本上进行操作并返回新构建的数组,并不会影响到原来的数组。

到此这篇关于vue项目中向数组添加元素的3种方式的文章就介绍到这了,更多相关vue向数组添加元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 使用vue-router切换页面时实现设置过渡动画

    使用vue-router切换页面时实现设置过渡动画

    今天小编就为大家分享一篇使用vue-router切换页面时实现设置过渡动画。具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 基于node+vue实现简单的WebSocket聊天功能

    基于node+vue实现简单的WebSocket聊天功能

    最近学习了一下websocket的即时通信,感觉非常的强大,这里我用node启动了一个服务进行websocket链接,然后再vue的view里面进行了链接,进行通信,废话不多说,直接上代码吧
    2020-02-02
  • 在Vue中使用CSS3实现内容无缝滚动的示例代码

    在Vue中使用CSS3实现内容无缝滚动的示例代码

    这篇文章主要介绍了在Vue中使用CSS3实现内容无缝滚动的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • Vue项目打包并部署nginx服务器的详细步骤

    Vue项目打包并部署nginx服务器的详细步骤

    vue项目开发好之后需要部署到服务器上进行外网访问,下面这篇文章主要给大家介绍了关于Vue项目打包并部署nginx服务器的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • Vue3除了keep-alive还有哪些实现页面缓存详解

    Vue3除了keep-alive还有哪些实现页面缓存详解

    Vue3中的keep-alive组件用于缓存页面,以便在切换页面时保留其状态,下面这篇文章主要给大家介绍了关于Vue3除了keep-alive还有哪些实现页面缓存的相关资料,需要的朋友可以参考下
    2024-04-04
  • vue三元运算之多重条件判断方式(多个枚举值转译)

    vue三元运算之多重条件判断方式(多个枚举值转译)

    这篇文章主要介绍了vue三元运算之多重条件判断方式(多个枚举值转译),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue 如何向集合的头部添加元素

    Vue 如何向集合的头部添加元素

    在 Vue 中,如果要向集合的头部添加元素,可以使用 JavaScript 的 unshift 方法或 Vue 的 $set 方法,本文给大家介绍Vue 向集合的头部添加元素的方法,感兴趣的朋友一起看看吧
    2023-12-12
  • 浅谈Vuejs中nextTick()异步更新队列源码解析

    浅谈Vuejs中nextTick()异步更新队列源码解析

    本篇文章主要介绍了浅谈Vuejs中nextTick()异步更新队列源码解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • 如何巧用Vue缓存函数浅析

    如何巧用Vue缓存函数浅析

    有时候不希望已经请求过的数据,再次请求重复执行刷新操作,我们就需要使用数据缓存,这篇文章主要给大家介绍了关于如何巧用Vue缓存函数的相关资料,需要的朋友可以参考下
    2021-09-09
  • Vue中常见混淆用法汇总

    Vue中常见混淆用法汇总

    本文主要介绍了在Vue中使用的一些常见混淆用法,包括new Vue()、export default {}、createApp()等,以及如何使用混淆器对代码进行加固,需要的可以参考下
    2023-12-12

最新评论