vue数组中的变更方法和替换方法

变更方法:

Vue 能够侦听响应式数组的变更方法,并在它们被调用时触发相关的更新。这些变更方法包括:

  • push():在数组末尾添加一个或者多个元素,返回新的长度。
var arr = [1, 2, 3, 4, 5]; // 定义一个数组
arr.push(6); // 在数组末尾添加6
console.log(arr); // [1, 2, 3, 4, 5, 6]
  • pop():在数组末尾删除一个元素,返回被删除的元素。
var last = arr.pop(); // 在数组末尾删除一个元素
console.log(last); // 6
console.log(arr); // [1, 2, 3, 4, 5]
  • shift():在数组开头删除一个元素,返回被删除的元素。
var first = arr.shift(); // 在数组开头删除一个元素
console.log(first); // 1
console.log(arr); // [2, 3, 4, 5]
  • unshift():在数组开头添加一个或多个元素,返回新的长度。
arr.unshift(0); // 在数组开头添加0
console.log(arr); // [0, 2, 3, 4, 5]
  • splice():在数组中添加或删除任意个元素,返回被删除的元素组成的数组。af6e4da83c364668bba1958f94487247.png
    • index: 必须的,表示要操作的位置,可以是正数或负数,如果是负数,表示从数组末尾开始计算。
    • howmany: 可选的,表示要删除的元素个数,可以是0或正数,如果是0,表示不删除任何元素。
    • item1, …, itemX: 可选的,表示要添加到数组的新元素,可以是任意类型和个数
var arr = [1, 2, 3, 4, 5]; // 定义一个数组
arr.splice(2, 1); // 在索引为2的位置删除一个元素
console.log(arr); // [1, 2, 4, 5]
arr.splice(1, 0, 6, 7); // 在索引为1的位置添加两个元素
console.log(arr); // [1, 6, 7, 2, 4, 5]
arr.splice(-2, 2, 8); // 在倒数第二个位置删除两个元素,并替换为一个元素
console.log(arr); // [1, 6, 7, 2, 8]
  • sort():对数组中的元素进行排序,返回排序后的数组。
arr.sort(); // 对数组进行排序
console.log(arr); // [0, 1, 2, 3, 4, 5]
  • reverse():对数组进行元素反转,返回反转后的数组。
arr.reverse(); // 反转数组顺序
console.log(arr); // [5, 4, 3, 2, 1, 0]

替换方法:

变更方法,顾名思义,就是会对调用它们的原数组进行变更。相对地,也有一些不可方法,例如flter(),concat()和slice(),这些都不会更改原数组,而总是返回一个新数组。当遇到的是非变更方法时,我们需要将旧的数组替换为新的.

  • filter(): 创建一个新的数组,包含原数组中满足条件的元素。
var arr = [1, 2, 3, 4, 5]; // 定义一个数组

var newArr = arr.filter(function(item) {
  return item > 3; // 返回大于3的元素
});

console.log(newArr); // [4, 5]
console.log(arr); // [1, 2, 3, 4, 5] 原数组不变
  • concat(): 创建一个新的数组,连接原数组和其他数组或值。
newArr = arr.concat(6, 7); // 连接原数组和6,7
console.log(newArr); // [1, 2, 3, 4, 5, 6, 7]
console.log(arr); // [1, 2, 3, 4, 5] 原数组不变

newArr2 = arr.concat([9,9,9]);// 连接原数组和数组[9,9,9]
console.log(newArr2); // [1, 2, 3, 4, 5, 9, 9, 9]
  • slice(): 创建一个新的数组,截取原数组中的一部分元素。
newArr = arr.slice(1, 3); // 截取原数组索引为[1,3)的元素
console.log(newArr); // [2, 3]
console.log(arr); // [1, 2, 3, 4, 5] 原数组不变

当使用这些方法时,可以用新数组替换旧数组,例如:

    arr = newArr;    // 将新数组赋值给旧数组

这样就完成了Vue替换一个新的数组的操作。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/106176.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

python sqlalchemy(ORM)- 02 表关系

文章目录 创建连接事务和DBAPIORM 操作表关系ORM表示 1v1ORM表示 1vm 创建连接 sqlalchemy应用必须创建一个engine,用于连接数据库; from sqlalchemy import create_engine # 创建engine, 懒连接,在ORM中由Session管理 engine create_engi…

第二证券:AIGC概念活跃,焦点科技、三维通信涨停,万兴科技大涨

AIGC概念24日盘中走势生动,到发稿,万兴科技、三态股份涨超10%,焦点科技、三维通讯、我国科传等涨停,中文在线涨超9%,果麦文明、新国都涨约7%。 消息面上,各大电商途径于10月18-24日先后发动“双11”大促或…

国产CAN总线收发芯片DP1042 兼容替换TJA1042

说明 1 简述 DP1042是一款应用于 CAN 协议控制器和物理总线之间的接口芯片,可应用于卡车、公交、小汽车、工业控制等领域,支持 5Mbps CAN FD 灵活数据速率,具有在总线与 CAN 协议控制器之间进行差分信号传输的能力,完全兼容“ISO…

C指针 --- 进阶

目录 1. 字符指针 1.1. 一般使用 1.2. 另一种使用 2. 指针数组 3. 数组指针 3.1. 数组指针 3.2. 数组名和&数组名 3.3. 数组指针的用处 1. 传递一个数组 2. 传递数组首元素的地址 3. 数组指针处理一维数组 4. 数组指针处理二维数组 4. 数组传参和指针传参 4.1…

全连接层是什么,有什么作用?

大家好啊,我是董董灿。 如果你是搞AI算法的同学,相信你在很多地方都见过全连接层。 无论是处理图片的卷积神经网络(CNN),还是处理文本的自然语言处理(NLP)网络,在网络的结尾做分类…

2023.10.26-SQL测试题

employee表: department表: job表: location表: 题目及答案: -- (1).查询工资大于一万的员工的姓名(first_name与last_name用“.”进行连接)和工资-- select CONCAT(first_name,.,last_name) as 姓名 ,salary -…

Vue(uniapp)父组件方法和子组件方法执行优先顺序

涉及到的知识点:watch监控:先看问题,父组件从后端通过$ajax获取数据,在将父组件将值传输给子组件,使用子组件使用created钩子函数获取数据,按自己的想法应该是父组件先获取后端数据,在传入给子组…

引入个性化标签的协同过滤推荐算法研究_邢瑜航

第3章 引入个性化标签的I-CF推荐算法 3.2.2 相似性度量方法 3.2.3 改进后的算法步骤与流程

Python:一个函数可以被多个装饰器装饰

理解: 规律: 一个函数可以被多个装饰器装饰. wrapper1 wrapper2 def target():print(我是目标)规则和规律 wrapper1 wrapper2 TARGET wrapper2 wrapper1def wrapper1(fn): # fn: wrapper2.innerdef inner(*args, **kwargs):print("这里是wrapper1 …

【RabbitMQ 实战】12 镜像队列

一、镜像队列的概念 RabbitMQ的镜像队列是将消息副本存储在一组节点上,以提高可用性和可靠性。镜像队列将队列中的消息复制到一个或多个其他节点上,并使这些节点上的队列保持同步。当一个节点失败时,其他节点上的队列不受影响,因…

【网络协议】聊聊TCP的三挥四握

上一篇我们说了网络其实是不稳定的,TCP和UDP其实是两个不同的对立者,所以TCP为了保证数据在网络中传输的可靠性,从丢包、乱序、重传、拥塞等场景有自己的一套打法。 TCP格式 源端口和目标端口是不可缺少的,用以区分到达发送给拿…

【每日一题】掷骰子等于目标和的方法数

文章目录 Tag题目来源题目解读解题思路方法一:动态规划 写在最后 Tag 【动态规划】【数组】 题目来源 1155. 掷骰子等于目标和的方法数 题目解读 你手里有 n 个一样的骰子,每个骰子都有 k 个面,分别标号 1 到 n。给定三个整数 n&#xff0…

java异常处理

异常处理分为三类: 检查性异常 用户错误或问题引起的异常,这是程序员无法预见的。例如要打开一个不存在文件时,一个异常就发生了,这些异常在编译时不能被简单地忽略。 运行时异常 运行时异常是可能被程序员避免的异常&#xf…

2023深耕kotlin,谈谈前景

为什么学习kotlin? Kotlin 早就已经是 Google 官方推荐的开发语言了,而且 Android 新的 Compose 框架只支持 Kotlin ,在 Google 那里,Android开发中 Java 其实已经被淘汰了。Java 和 Kotlin 虽然都属于高级语言,但是 …

LeetCode--2.两数相加

文章目录 1 题目描述2 解题思路2.1 代码实现 1 题目描述 给你两个 非空 的链表, 表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的, 并且每个节点只能存储 一位 数字 请你将两个数相加, 并以相同形式返回一个表示和的链表 你可以假设除了数字 0 之外, 这两个数都…

redis archive github

https://github.com/redis/redis/releases/tag/7.2.2https://github.com/redis/redis/releases/tag/7.2.2

虹科分享 | 买车无忧?AR带来全新体验!

文章来源:虹科数字化与AR 阅读原文:https://mp.weixin.qq.com/s/XsUFCTsiI4bkEMBHcGUT7w 新能源汽车的蓬勃发展,推动着汽车行业加速进行数字化变革。据数据显示,全球新能源汽车销售额持续上升,预计到2025年&#xff0…

VTK OrientationMarker 方向 三维坐标系 相机坐标轴 自定义坐标轴

本文 以 Python 语言开发 我们在做三维软件开发时,经常会用到相机坐标轴,来指示当前空间位置; 坐标轴效果: 相机方向坐标轴 Cube 正方体坐标轴 自定义坐标轴: Code: Axes def main():colors vtkNamedC…

Git总结

Git介绍 一、Git常用命令 添加、提交 git add 将文件从工作区添加到暂存区&#xff0c;表示git开始追踪文件&#xff0c;如果不想让git追踪了&#xff0c;可以使用 git rm --cached <file> 取消文件追踪&#xff0c;仅仅只代表追踪取消&#xff0c;工作区文件还是照…

折磨的Ts

先看下官网 这里的withDefault是给props设置默认值的 由于props传入了个函数在设置默认值的时候不知道怎么设置了 解决办法&#xff1a;直接不设置了。也不写了。