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动态生成表格的行和列

    Vue动态生成表格的行和列

    这篇文章主要为大家详细介绍了Vue动态生成表格的行和列,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • vue框架render方法如何替换template

    vue框架render方法如何替换template

    这篇文章主要介绍了vue框架render方法如何替换template,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue项目中实现图片预览的公用组件功能

    vue项目中实现图片预览的公用组件功能

    小编接到查看影像的功能需求,根据需求,多个组件需要用到查看影像的功能,所以考虑做一个公用组件,通过组件传值的方法将查看影像文件的入参传过去。下面小编通过实例代码给大家分享vue项目中实现图片预览的公用组件功能,需要的朋友参考下吧
    2018-10-10
  • Vue组件之极简的地址选择器的实现

    Vue组件之极简的地址选择器的实现

    这篇文章主要介绍了Vue组件之极简的地址选择器的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 一文学会什么是vue.nextTick()

    一文学会什么是vue.nextTick()

    这篇文章主要介绍了一文学会什么是vue.nextTick(),下面文章围绕主题的相关资料展开详细内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-04-04
  • 基于Vue的商品主图放大镜方案详解

    基于Vue的商品主图放大镜方案详解

    这篇文章主要介绍了基于 Vue 的商品主图放大镜方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • vue3使用echarts绘制折线图的代码示例

    vue3使用echarts绘制折线图的代码示例

    这篇文章主要为大家学习介绍了Vue3如何使用echarts实现绘制折线图,文中有详细的示例代码供大家参考,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-07-07
  • Vue3利用自定义ref实现防抖功能

    Vue3利用自定义ref实现防抖功能

    在Vue3中,ref提供了访问组件内DOM元素和子组件实例的方法,防抖是一种限制函数调用频率的方法,即在一定时间内多次触发同一个函数,只执行最后一次触发的函数,本文将给大家介绍了Vue3如何利用自定义ref实现防抖,需要的朋友可以参考下
    2024-05-05
  • uniapp实现webview页面关闭功能的代码示例

    uniapp实现webview页面关闭功能的代码示例

    uniapp用web-view打开一个网页,网页中点击跳转到下一层级的网页,一层层深入,点击返回键或者页面上方返回按钮只能一层层往回退,下面这篇文章主要给大家介绍了关于uniapp实现webview页面关闭功能的相关资料,需要的朋友可以参考下
    2024-03-03
  • vue 指令版富文本溢出省略截取示例详解

    vue 指令版富文本溢出省略截取示例详解

    这篇文章主要为大家介绍了vue 指令版富文本溢出省略截取示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09

最新评论