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

news2024/9/21 16:24:43

变更方法:

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():在数组中添加或删除任意个元素,返回被删除的元素组成的数组。
    • 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替换一个新的数组的操作。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2023年CSP-S赛后总结

目录 T1 题目描述 输入格式 输出格式 T2 题目描述 输入格式 输出格式 题目描述 输入格式 输出格式 题意翻译 T3 题目背景 题目描述 输入格式 输出格式 T4 题目描述 输入格式 输出格式 总结 T1 题目描述 小 Y 有一把五个拨圈的密码锁。如图所示&#xff0…

C++环境配置【学习笔记(一)】

文章目录 1、安装 VS Code 插件2、VS Code SSH远程连接Ubuntu主机3、编写py程序及 debug4、编写C程序5、C程序的 debug6、附录:vs code 中变量解释 C开发工具:Visual Studio Code 下载地址: 地址 其中本文将介绍使用 VS Code ssh 远程连接 a…

自建田间作物场景杂草检测数据,基于YOLOv5[n/s/m/l/x]全系列参数模型开发构建杂草检测识别分析系统

在前文中我们已经开发实践了杂草相关检测,感兴趣可以自行移步阅读即可: 《自建数据集,基于YOLOv7开发构建农田场景下杂草检测识别系统》 《激光除草距离我们实际的农业生活还有多远,结合近期所见所感基于yolov8开发构建田间作物…

WebDAV之π-Disk派盘 +Polaris Office

推荐一款可以实现在Windows桌面PC,Mac,Android设备和iOS设备上同步的移动办公软件,还支持通过WebDAV添加葫芦儿派盘。Polaris Office是一款功能全面的办公自动化套件,软件集成了Word、Excel、幻灯片(PPT)、ODT等文档格式,并且可以完美兼容任何Microsoft Office,PDF,TXT或…

快速幂算法(数论)

1. 递归快速幂: pow(2,8)2^4 * 2^4 (2^2 * 2^2) * (.....) pow(2,7) 2^6*2 (2^3 * 2^3)*2 (......) 负数也是同样原理 2. 非递归快速幂: 将次方转为2进制:进行计算 以7的10次方为例: 每次计算a累乘 eg.第二位对应--->p…

Elasticsearch安装IK分词器

ik分词包 参考博客、参考博客 将下载好的zip包解压,生成一个ik文件夹 将ik文件夹移动到ES安装目录下的plugins文件夹下(每台ES节点都要执行相同的操作) 重启ES集群 坑

电力巡检/电力抢修行业解决方案:AI+视频技术助力解决巡检监管难题

一、行业背景 随着国民经济的蓬勃发展,工业用电和居民用电需求迅速增加,电厂、变电站、输电线路高负荷运转,一旦某个节点发生故障,对生产、生活造成巨大的影响。目前电力行业生产现场人员、设备较多,而生产监督员有限…

Jenkins入门级安装部署

前言 Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件项目可以进行持续集成。通常,项目中常用Jenkins作为编译打包项目的工具&#xff0…

Mysql JDBC反序列化漏洞

参考文章:梅子酒の笔记本 https://www.mi1k7ea.com/2021/04/23/MySQL-JDBC%E5%8F%8D%E5%BA%8F%E5%88%97%E5%8C%96%E6%BC%8F%E6%B4%9E/ 小白看得懂的MySQL JDBC 反序列化漏洞分析 - 先知社区 MySQL JDBC反序列化漏洞 [ Mi1k7ea ] MySQL JDBC 客户端反序列化漏洞分…

双11商品售价不再出错!金鱼电器:价格自动监控,全年节省人天365

价格已成为双11吸引消费者的“杀手锏”,很多人“趴”在网上想“捡便宜”。但对商家而言,在设置价格的同时,还需要对活动价格自检以防出现“羊毛产品”,对竞品价格监控以防销量下滑,对乱价经销商留证以防品牌形象受损……

应用案例|基于高精度三维机器视觉的检测汽车座椅应用

Part.1 项目背景 检测汽车座椅是一个复杂的应用场景,需要综合运用多种技术和算法来实现。在这个场景中,通过使用3D视觉技术来感知汽车座椅的位置、形状和特征,使用摄像头或激光扫描仪等设备来获取汽车座椅的三维信息。然后利用这些信息来准确…

Systemd服务内存占用高的处理

参考文章 ### https://blog.csdn.net/weixin_44821644/article/details/121095406## https://blog.csdn.net/c123m/article/details/124301104 现象 检查 操作系统是4C8G,systemd的内存使用率比较高。操作系统日志没看到异常。很多服务通过systemd托管 ## 检查有…

基于springboot实现乐校园二手书交易管理系统【项目源码+论文说明】计算机毕业设计

基于springboot实现乐校园二手书交易管理系统演示 摘要 在Internet高速发展的今天,我们生活的各个领域都涉及到计算机的应用,其中包括乐校园二手书交易管理系统的网络应用,在外国二手书交易管理系统已经是很普遍的方式,不过国内的…

用C++写个简单的程序表白老妈

后天就是老妈的生日了&#xff0c;我打算写一个简单的程序表白老妈子&#xff0c;来肉麻一下她。在实现的过程中&#xff0c;有不少我没学过的知识&#xff0c;这些知识我都会予以补充。 创建图形窗口 创建图形窗口要包头文件&#xff1a; #include<easyx.h> 这是简单…

WordPress主题模板 大前端D8 5.1版本完整开源版源码简洁大气多功能配置

源码测评&#xff1a;该模板官方已更新至5.2&#xff0c;但是这个5.1也是非常好用的&#xff0c;经测试所有页面均完好&#xff0c;推荐下载使用。 模板简介&#xff1a; 大前端D8 主题是一款非常牛逼的WordPress博客主题,响应式,功能齐全,支持手机,电脑,平板,非常适合做博客站…

vue项目,程序控制台不报错,但是也没有达到预期

敲代码时&#xff0c;有时控制台不报错&#xff0c;但是也不如预期那样展示 1&#xff0c;需要打断点&#xff0c;有可能是某个对象没有值&#xff0c;比如axios.js&#xff0c;如图所示&#xff1a; error里面不一定有msg&#xff0c;所以直接《error.msg.indexOf(cancelCach…

动手学深度学习—批量规范化(代码详解)

批量规范化 1. 训练深层网络2. 批量规范化层2.1 全连接层2.2 卷积层 3. 从零实现批量规范化层4. 使用批量规范化层的 LeNet 批量规范化&#xff08;batch normalization&#xff09;&#xff0c;可持续加速深层网络的收敛速度。 1. 训练深层网络 数据预处理的方式通常会对最终结…

Stable Diffusion AI绘图

提示词&#xff1a; masterpiece, best quality, 1girl, (anime), (manga), (2D), half body, perfect eyes, both eyes are the same, Global illumination, soft light, dream light, digital painting, extremely detailed CGI anime, hd, 2k, 4k background 反向提示词&…

微机原理:汇编指令集——调用传送指令、算术运算指令、转移类指令(详解)

文章目录 一、通用传送类指令1、数据传送指令2、堆栈操作指令 二、算术运算指令1、总图2、加减运算指令2.1 例子2.2 INC/DEC指令 3、比较指令 三、转移类指令1、无条件转移2、有条件转移2.1 无符号数条件转移指令2.2 有符号数条件转移指令2.3 例题一2.4 循环控制指令&#xff0…

【golang】Go中的切片slice和操作笔记,垃圾回收机制,重组 reslice ,复制和追加,内存结构

切片 文章目录 切片将切片传递给函数make() 创建一个切片new() 和 make()的区别多维切片bytes包for-range切片重组 reslice切片的复制和追加 字符串、数组和切片的应用获取字符串的某一部分字符串和切片的内存结构修改字符串中的某个字符字节数组对比函数搜索及排序切片和数组a…