当前位置: 首页 > news >正文

数组方法 | vue修改数组

数组方法

修改原数组

push() 方法(在数组结尾处)向数组添加一个新的元素

var list=["数学","历史"];
list.push("英语");
["数学","历史","英语"]

unshift() 方法(在开头)向数组添加新元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.unshift("Lemon"); // 向 fruits 添加新元素 "Lemon"unshift() 方法返回新数组的长度。var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.unshift("Lemon"); // 返回 5

pop() 方法从数组中删除最后一个元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.pop(); // 从 fruits 删除最后一个元素("Mango")pop() 方法返回“被弹出”的值: var x = fruits.pop(); // x 的值是 "Mango"

shift() 方法会删除首个数组元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift(); // 从 fruits 删除第一个元素 "Banana" 返回 "Banana"

​ splice() 方法可用于向数组添加新项:
var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.splice(2, 0, "Lemon", "Kiwi");第一个参数(2)定义了应添加新元素的位置(拼接)。第二个参数(0)定义应删除多少元素。其余参数(“Lemon”,“Kiwi”)定义要添加的新元素。Banana,Orange,Lemon,Kiwi,Apple,Mangosplice() 方法返回一个包含已删除项的数组:
fruits.splice(2, 2, "Lemon", "Kiwi");
新数组:
Banana,Orange,Lemon,Kiwi使用 splice() 来删除元素第一个参数(0)删除元素的索引第二个参数(1)定义应该删除多个元素。var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // 删除 fruits 中的第一个元素

sort 数组排序

sort() 方法以字母顺序对数组进行排序:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序对数组进行升序排序
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b}); 对数组进行降序排序:
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a}); 随机排序
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()}); 

reverse 反转数组 reverse() 方法反转数组中的元素

可以使用它以降序对数组进行排序:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();         // 反转元素顺序

生成新的数组

filter() 方法创建一个包含通过测试的数组元素的新数组。

这个例子用值大于 18 的元素创建一个新数组:

var pepole = [{id:1,name:'张三'}]
var p = pepole.filter(item){
return item.id=1
});

concat​ 合并(连接)数组

concat() 方法通过合并(连接)现有数组来创建一个新数组:

var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // 连接 myGirls 和 myBoysconcat() 方法可以使用任意数量的数组参数:
var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // 将arr1、arr2 与 arr3 连接在一起将数组与值合并
var arr1 = ["Cecilie", "Lone"];
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]); 


slice() 方法用数组的某个片段切出新数组。

slice() 方法创建新数组。它不会从源数组中删除任何元素。

slice() 有一个参数 ,从参数开始切出数组的剩余部分var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];var citrus = fruits.slice(3);Apple,Mangoslice() 可接受两个参数,比如 (1, 3)。
该方法会从开始参数选取元素,直到结束参数(不包括)为止。var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3); 
Orange,Lemon

vue响应式修改数组

vue 响应式地 处理数组 以及对象的属性
Vue.set(vm.items,index,newValue)
vm.$set(vm.items,index,newValue)
数组参数含义: 要处理的参数的名称, 要处理的数组索引,要处理的数组的值
对象属性参数的含义:要处理的对象名称,要处理的对象属性,要处理的对象属性值

相关文章:

数组方法 | vue修改数组

数组方法 修改原数组 push() 方法(在数组结尾处)向数组添加一个新的元素 var list["数学","历史"]; list.push("英语"); ["数学","历史","英语"]unshift() 方法(在开头&…...

tcp_rcv_synsent_state_process函数

tcp_rcv_synsent_state_process 是 Linux Kernel 中用于处理 TCP 连接在 SYN-SENT 状态下接收到报文的函数。这个函数在 TCP 三次握手阶段起到了至关重要的作用,处理了在客户端发送 SYN 请求之后收到服务器响应报文的各种情况。 以下是这个函数的解读和剖析: int tcp_rcv_sy…...

【Qt】信号和槽机制

目录 1.信号和槽的理解 Qt内置类的继承关系 2.connect方法 参数 使用示例 2.1 disconnect断开信号槽 2.2 查看内置类型的信号和槽 3.自定义槽函数 3.1 代码方式自定义槽函数 3.2 图形化方式自定义槽函数 4.自定义信号 5.带参数的信号和槽 6.信号和槽的关联关系 7…...

【Pytorch实用教程】循环神经网络中使用dropout需要注意的问题

文章目录 问题解答警告的具体含义解决方案示例代码总结问题 UserWarning: dropout option adds dropout after all but last recurrent layer, so non-zero dropout expects num_layers greater than 1, but got dropout=0.3 and num_layers=1 warnings.warn("dropout op…...

展望2025:在创新与协作中创造价值、奉献佳作

2025,就像远方闪耀着希望之光的灯塔,正逐步靠近我们的视野。在这个充满无限潜力的年份里,我们满怀壮志,立志创造更多价值,为大家呈上更多出类拔萃的作品。 往昔岁月,犹如一幅徐徐展开的长卷,上…...

秒鲨后端之MyBatis【3】自定义映射resultMap、动态SQL、MyBatis的缓存、MyBatis的逆向工程、分页插件(30000字)

这里我分享一下尚硅谷的pdf100页笔记和代码,大家可以参考学习。 笔记: 通过网盘分享的文件:MyBatis.pdf 链接: https://pan.baidu.com/s/14Iu1Zs-_5vZoRjBEjmagag?pwdyjh6 提取码: yjh6 --来自百度网盘超级会员v1的分享代码: …...

springboot之集成Elasticsearch

目录 二、Elasticsearch 是什么?三、Elasticsearch 安装四、Springboot 集成 Elasticsearch 的方式五、创建项目集成 Elasticsearch 2.创建 Spring Initializr 项目 es (3).新建实体类 User(4).新建 dao 接口类 UserRe…...

CLIP (Contrastive Language-Image Pre-training)用途及使用方法

CLIP (Contrastive Language-Image Pre-training) 是由 OpenAI 开发的多模态模型,可以同时处理图像和文本。在 Hugging Face 中使用 CLIP 模型主要有以下几个步骤和用途: 安装必要的库: pip install transformers pip install torch pip install Pillow导入所需模…...

2018年西部数学奥林匹克几何试题

2018G1 未完待续… 2018 G2 在 △ A B C \triangle ABC △ABC 中, E E E, F F F 分别在 A B AB AB, A C AC AC 上, 且 B F C E B C BFCEBC BFCEBC. I B I_B IB​, I C I_C IC​ 分别为 ∠ A B C \angle ABC ∠ABC 和 ∠ A C B \angle ACB ∠ACB 所对的旁心, K K…...

华为配置 之 链路聚合

简介: 链路聚合(Link Aggregation)是一种计算机网络技术,通过将多个物理端口汇聚在一起,形成一个逻辑端口,以实现出/入流量吞吐量在各成员端口的负荷分担。当交换机检测到其中一个成员端口的链路发生故障时…...

MIT线性代数教材:Linear Algebra and Its Applications

这本教材是MIT线性代数课程所使用的教材,上课的老师是Gilbert Strang,而教材的作者也是Gilbert Strang。这本书内容比较直观,配图不少,叙述风格比较几何风格。习题也丰富,但并不怎么对我的胃口,因此我也怎么…...

SpringBoot 集成 Activiti 7 工作流引擎

一. 版本信息 IntelliJ IDEA 2023.3.6JDK 17Activiti 7 二. IDEA依赖插件安装 安装BPM流程图插件,如果IDEA的版本超过2020,则不支持actiBPM插件。我的IDEA是2023版本我装的是 Activiti BPMN visualizer 插件。 在Plugins 搜索 Activiti BPMN visualizer 安装 创…...

【数据结构】数据结构简要介绍

数据结构是计算机科学中用于组织、管理和存储数据的方式,以便于高效地访问和修改数据。 数据结构的分类: 数据结构可以大致分为两类:线性结构和非线性结构。 1. 线性结构 线性结构中的数据按顺序排列,每个元素有唯一的前驱和后…...

SQL Server导出和导入可选的数据库表和数据,以sql脚本形式

一、导出 1. 打开SQL Server Management Studio,在需要导出表的数据库上单击右键 → 任务 → 生成脚本 2. 在生成脚本的窗口中单击进入下一步 3. 如果只需要导出部分表,则选择第二项**“选择具体的数据库对象(Select specific database objects)”**&am…...

蓝桥杯JAVA刷题--001

文章目录 题目需求2.代码3.总结 题目需求 2.代码 class Solution {public String convertDateToBinary(String date) {if (date null || date.length() ! 10 || date.charAt(4) ! - || date.charAt(7) ! -) {throw new IllegalArgumentException("输入的日期格式不正确&…...

2025-01-01 NO2. XRHands 介绍

文章目录 软件配置1 XR Hands 简介2 XRHand2.1 Pose2.2 Handedness 3 XRHandJoint3.1 XRHandJointID3.2 XRHandJointTrackingState 4 XRHandSubsystem4.1 数据属性4.1.1 UpdateSuccessFlags4.1.2 UpdateType 4.2 处理器管理:注册和注销4.3 更新手部数据:…...

SQL 实战:复杂数据去重与唯一值提取

在实际开发中,数据重复是常见问题,例如用户多次登录记录、订单状态重复更新等。如何高效提取符合业务需求的唯一值或最新记录,对系统性能和数据准确性至关重要。 本文将探讨如何使用 SQL 的 窗口函数、分组查询 以及 DISTINCT 实现复杂场景下…...

基于BiLSTM和随机森林回归模型的序列数据预测

本文以新冠疫情相关数据集为案例,进行新冠数量预测。(源码请留言或评论) 首先介绍相关理论概念: 序列数据特点 序列数据是人工智能和机器学习领域的重要研究对象,在多个应用领域展现出独特的特征。这种数据类型的核心特点是 元素之间的顺序至关重要 ,反映了数据内在的时…...

基于 SensitiveWordBs 实现敏感词过滤功能

在现代的互联网应用中,敏感词过滤已成为一个必不可少的功能,尤其是在社交媒体、评论审核等需要保证内容健康的场景下。本文将基于开源库https://github.com/houbb/sensitive-word,详细讲解如何通过自定义敏感词库和工具类实现高效的敏感词过滤…...

计算机的错误计算(一百九十八)

摘要 用两个大模型计算 arctan(54.321). 结果保留 16位有效数字。第一个大模型化简有误差;第二个大模型 Python代码几乎完全正确。无论如何,它们的结果均只有 4位数字正确。 例1. 计算 arctan(54.321). 结果保留 16位有效数字。 下面是一个大模型的回…...

递归算法.

本节我们先来了解一下递归算法. 递归算法的基本原理: 说到递归算法,就不得不提到栈.当程序执行到递归函数的时候,将函数进行入栈操作,在入栈之前,通常需要完成3件事. 1.将所有实参,返回地址等信息传递给被调函数储存 2.为被调函数的局部变量分配储存区 3.将控制转移到被调函…...

我的Java-Web进阶--SpringMVC

1.三层架构与MVC模式 三层架构 MVC模式 2.SpringMVC执行流程 3.SpringMVC的基本使用方法 1. 配置 1.1 Maven依赖 首先&#xff0c;在pom.xml文件中添加Spring MVC的依赖&#xff1a; <dependencies><!-- Spring MVC --><dependency><groupId>org.…...

【复刻】ESG表现对企业价值的影响机制研究(2009-2021年)

一、数据来源&#xff1a;ESG数据采用华证ESG评价体系提供的评级结果&#xff0c;控制变量主要来自上市公司年报&#xff0c;内含原始数据、处理代码和基准回归 二、数据指标&#xff1a;资产收益率 净利润 / 平均总资产销售净利率 净利润 / 营业收入托宾Q值 …...

GSM PDU解码在Linux下的C语言实现

GSM PDU解码在Linux下的C语言实现 一、引言二、GSM PDU格式概述三、Linux环境下的C语言实现(一)头文件包含(二)数据结构定义(三)解码函数实现(四)主函数示例四、编译与运行五、注意事项与优化六、结论一、引言 GSM(全球移动通信系统)PDU(协议数据单元)是用于在GSM…...

Vue 3.0 中 template 多个根元素警告问题

在 Vue 2.0 中&#xff0c;template 只允许存在一个根元素&#xff0c;但是这种情况在 Vue 3.0 里发生了一些变化。 在 Vue 3.0 中开始支持 template 存在多个根元素了。但是因为 VSCode 中的一些插件没有及时更新&#xff0c;所以当你在 template 中写入多个根元素时&#xf…...

STM32F103RCT6学习之三:串口

1.串口基础 2.串口发送 1&#xff09;基本配置 注意&#xff1a;实现串口通信功能需在keil中设置打开Use Micro LIB&#xff0c;才能通过串口助手观察到串口信息 2)编辑代码 int main(void) {/* USER CODE BEGIN 1 *//* USER CODE END 1 *//* MCU Configuration-------------…...

07-计算机网络面试实战

07-计算机网络面试实战 计算机网络面试实战 为什么要学习网络相关知识&#xff1f; 对于好一些的公司&#xff0c;计算机基础的内容是肯定要面的&#xff0c;尤其是 30k 以内的工程师&#xff0c;因为目前处于的这个级别肯定是要去写项目的&#xff0c;还没上升到去设计架构的高…...

Kafka的acks机制和ISR列表

Kafka 是一个流行的分布式流处理平台&#xff0c;用于构建实时数据流管道和应用程序。在 Kafka 中&#xff0c;acks 机制和 ISR&#xff08;In-Sync Replicas&#xff09;列表是两个重要的概念&#xff0c;它们共同确保消息的持久性和可靠性。 acks 机制 acks 机制是 Kafka 生…...

c++Qt登录页面设计

使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函数 将登录按钮使用qt5版本的连接到自定义的槽函数中&#xff0c;在槽函数中判断ui界面上输入的账号是否为"admin"&#xff0c;密码是否为…...

数字图像处理 四 图像统计

1.直方图 记录每一种像素值出现的次数 各种直方图的类型 暗图像&#xff1a;分布靠低值区域 亮图像&#xff1a;分布靠高值区域 高对比度图像&#xff0c;直方图分布均匀&#xff0c;更容易人眼观察 2.直方图的均衡化 将低对比度图像转换为高对比度图像 视觉良好的直方图…...

UE蓝图类调用关卡蓝图中的函数

蓝图类调用关卡蓝图中函数 需要用到Execute Console Command函数节点 ce空格【函数名】 在关卡蓝图中创建一个函数sayhello 在第三人称蓝图类中调用 成功输出 注&#xff1a;用此方法只能从蓝图类中调用关卡蓝图中的函数&#xff0c;从关卡蓝图调用蓝图类是无效的。 另外Exec…...

JAVA: 状态模式(State Pattern)的技术指南

1、简述 状态模式是一种行为型设计模式,允许对象在其内部状态改变时改变其行为。它将状态相关的行为抽取到独立的状态类中,使得增加新状态变得简单,且不影响其他状态。 设计模式样例:https://gitee.com/lhdxhl/design-pattern-example.git 本文将详细介绍状态模式的概念…...

C语言:位段

位段的内存分配: 1. 位段的成员可以是 int unsigned int signed int 或者是char &#xff08;属于整形家族&#xff09;类型 2. 位段的空间上是按照需要以4个字节&#xff08; 类型 int &#xff09;或者1个字节&#xff08; char &#xff09;的方式来开辟的。 3. 位段涉及…...

数字图像处理 三 空间滤波

空间滤波是一种图像处理技术&#xff0c;它通过对图像像素及其邻域进行运算&#xff0c;利用均值&#xff0c;高斯&#xff0c;梯度&#xff0c;拉普拉斯等线性滤波和中值&#xff0c;最大最小&#xff0c;双边滤波等非线性滤波改变像素值&#xff0c;实现图像的平滑&#xff0…...

创建线程的8种方法

创建线程的8种方法 目录 继承Thread类实现Runnable接口实现Callable接口使用线程池使用ScheduledExecutorService使用Fork/Join框架使用CompletableFuture使用Guava的ListenableFuture总结 1. 继承Thread类 最直接的方式是创建一个继承自Thread类的子类&#xff0c;并重写其r…...

[项目管理] 不求甚解

前两天总结了一个例子&#xff1a;https://mzhan017.blog.csdn.net/article/details/144768130&#xff1b; 在上一篇里末尾处&#xff0c;说有一个情况是openstack的问题&#xff0c;接着这个事情来继续说。产品安装的时候需要一个对外的IP/网络&#xff0c;是测试/设备人员通…...

JetBrains《2024 开发者生态系统现状报告》总结

JetBrains 公布了 2024 年《开发者生态系统状况报告》&#xff0c;基于全球 23262 名开发者的反馈。编程语言趋势&#xff1a; JavaScript 的使用率&#xff1a; 尽管 JavaScript 仍是最常用的编程语言&#xff0c;61% 的开发者用于网页开发&#xff0c;但其作为主要语言的用户…...

locate() 在MySQL中的用法

语法&#xff1a; 在MySQL中&#xff0c;LOCATE() 是一个字符串函数&#xff0c;用于返回一个子字符串在另一个字符串中第一次出现的位置。如果子字符串不存在&#xff0c;则返回0。这个函数的语法如下&#xff1a; LOCATE(substring, string[, start])substring&#xff1a;…...

数字图像处理 六 频率域

频率&#xff1a;信号进行周期性变化的速率 图像的频率&#xff1a;图像的亮度/颜色在水平/垂直方向上周期性变化的速率 1.傅里叶变换 图像从空间域到频率域的转换&#xff1a; 确定某种频率&#xff1a;选择信号的基&#xff0c;且通过基的组合可以表示其他任何信号&#…...

day21-ubuntu入门

小趣味docker 1.安装docker&#xff0c;从阿里云的yum yum install docker -y 2.需要提前准备好docker镜像&#xff0c;确保可用 docker -v 3.导入该游戏镜像&#xff08;先用systemctl start docker&#xff09; docker load < game_v2.tar 4.一条命令&#xff0c;在…...

Linux之ARM(MX6U)裸机篇----4.C语言LED驱动实验

一&#xff0c;启动文件 .global _start_start:设置处理器进入SVC模式mrs r0, cpsr 读取cpsr到r0bic r0, r0, #0x1f 清除cpsr的bit4-0orr r0, r0, #0x13 使用svc模式msr cpsr, r0 将r0写入到cpsrldr sp, 0x80200000 设置sp指针起始地址&#xff0c;此处已初…...

TCP 连接:三次握手与四次挥手

TCP 协议&#xff0c;全称为“传输控制协议”。 1. TCP 协议段格式 给出几个定义 &#xff1a; 16位源端口号 &#xff1a;用于标识发送端的应用程序。 16位目的端口号 &#xff1a;用于标识接收端的目标应用程序。 32位序号 &#xff1a;用于标识发送的每一个字节流中的第一…...

Mac、Linux命令

Linux 查本机IP&#xff1a;ip addr 查询文件里符合条件的字符串&#xff1a;grep Mac 查本机IP&#xff1a;ipconfig...

基于 `android.accessibilityservice` 的 Android 无障碍服务深度解析

基于 android.accessibilityservice 的 Android 无障碍服务深度解析 目录 引言无障碍服务概述架构设计核心功能设计模式核心要点实现细节性能优化安全与隐私案例分析未来展望结论引言 在当今的移动应用生态系统中,无障碍服务(Accessibility Service)扮演着至关重要的角色。…...

spring boot 异步线程池的使用

创建Spring Boot项目 首先&#xff0c;你需要创建一个Spring Boot项目。你可以使用Spring Initializr&#xff08;https://start.spring.io/&#xff09;来快速生成项目结构。 添加异步支持依赖 在你的pom.xml文件中&#xff0c;确保你已经添加了Spring Boot的starter依赖&…...

简单封装线程库 + 理解LWP和TID

文章目录 前言&#xff1a;简单封装一下C线程库如何理解tid&#xff1f;理解pthread库&#xff1a;内核视角与用户视角&#xff1a; 前言&#xff1a; 在上一文的线程控制中&#xff0c;我们先是聊了关于为什么我们要在编译链接时将线程库给链接起来&#xff0c;简单回顾一下&…...

VBA批量插入图片到PPT,一页一图

Sub InsertPicturesIntoSlides()Dim pptApp As ObjectDim pptPres As ObjectDim pptSlide As ObjectDim strFolderPath As StringDim strFileName As StringDim i As Integer 设置图片文件夹路径strFolderPath "C:\您的图片文件夹路径\" 请替换为您的图片文件夹路径…...

cjson——excel转json文件(python脚本转换)

excel转json文件 前言应用场景1. 安装必要的库2. 定义 Excel 表格格式3. Python 脚本&#xff1a;将 Excel 转换为 JSON4. 脚本解释5. 生成的 JSON 文件6. 如何使用 JSON 文件7. 扩展功能&#xff1a;处理多个工作表8. 总结 前言 将 Excel 表格的配置参数转换成 JSON 文件是一…...

Keepalived + LVS 搭建高可用负载均衡及支持 Websocket 长连接

一、项目概述 本教程旨在助力您搭建一个基于 Keepalived 和 LVS&#xff08;Linux Virtual Server&#xff09;的高可用负载均衡环境&#xff0c;同时使其完美适配 Websocket 长连接场景&#xff0c;确保您的 Web 应用能够高效、稳定地运行&#xff0c;从容应对高并发访问&…...

01-spring-理-beanFactory

需要掌握 拿到容器中的 实例这个可以debug IOC容器SpringBootApplication(exclude {DataSourceAutoConfiguration.class}) public class RuoYiApplication {public static void main(String[] args) throws NoSuchFieldException, IllegalAccessException {// System.setProp…...