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动态绑定v-model属性名方式

    vue动态绑定v-model属性名方式

    这篇文章主要介绍了vue动态绑定v-model属性名方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue关于this.$refs.tabs.refreshs()刷新组件方式

    vue关于this.$refs.tabs.refreshs()刷新组件方式

    这篇文章主要介绍了vue关于this.$refs.tabs.refreshs()刷新组件方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • Vue将将后端返回的list数据转化为树结构的实现

    Vue将将后端返回的list数据转化为树结构的实现

    本文主要介绍了Vue将将后端返回的list数据转化为树结构的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • Vue 2阅读理解之initRender与callHook组件详解

    Vue 2阅读理解之initRender与callHook组件详解

    这篇文章主要为大家介绍了Vue 2阅读理解之initRender与callHook组件详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • vite2.x实现按需加载ant-design-vue@next组件的方法

    vite2.x实现按需加载ant-design-vue@next组件的方法

    这篇文章主要介绍了vite2.x实现按需加载ant-design-vue@next组件的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • 详解如何在Vue中快速实现数据可视化大屏展示

    详解如何在Vue中快速实现数据可视化大屏展示

    在现代数据驱动的应用程序中,数据可视化大屏已经成为了非常重要的一环,通过对海量数据进行可视化展示,可以帮助用户更好地理解和分析数据,从而做出更加明智的决策,在Vue中进行数据可视化大屏展示也变得越来越流行,本文将介绍如何在Vue中快速实现数据可视化大屏展示
    2023-10-10
  • vue+ESLint 配置保存 自动格式化代码

    vue+ESLint 配置保存 自动格式化代码

    这篇文章主要介绍了vue+ESLint 配置保存 自动格式化代码的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • 一文详解vue生命周期在uniapp中的用法

    一文详解vue生命周期在uniapp中的用法

    在uniapp中,vue的生命周期的用法基本都得以保留,但是对于特殊的需求以及特殊的情况,uniapp还引入了一些特有的生命周期钩子,本文给大家详细介绍了vue生命周期在uniapp中的用法,感兴趣的朋友可以参考下
    2024-01-01
  • vue与django(drf)实现文件上传下载功能全过程

    vue与django(drf)实现文件上传下载功能全过程

    最近简单的学习了django和drf上传文件(主要是图片),做一个记录,下面这篇文章主要给大家介绍了关于vue与django(drf)实现文件上传下载功能的相关资料,需要的朋友可以参考下
    2023-02-02
  • 使用Bootrap和Vue实现仿百度搜索功能

    使用Bootrap和Vue实现仿百度搜索功能

    这篇文章主要介绍了使用Bootrap和Vue实现仿百度搜索功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-10-10

最新评论