[Vue]中数组的操作用法

列举了在Vue操作数据时,对数组的一些方法

1.增加功能

在数组尾部增加 push()

push():向数组的末尾添加一个或更多元素,并返回新的长度。

arr = [1,2,3,4,5]
arr.push(6) 
//arr [1,2,3,4,5,6]
在数组头部增加 unshift()

unshift():向数组的开头添加一个或更多元素,并返回新的长度。

arr = [1,2,3,4,5]
arr.unshift(0) 
//arr [0,1,2,3,4,5]

2.删除功能

删除数组尾部 pop()

pop():删除并返回数组的最后一个元素。

arr = [1,2,3,4,5]
num = arr.pop() 
// arr [1,2,3,4] 
// num 5
删除数组头部 shift()

shift():删除并返回数组的第一个元素。

arr = [1,2,3,4,5]
num = arr.shift() 
// arr [2,3,4,5] 
// num 1
满足某个条件的删除

可以用filter():创建一个新数组,其包含通过所提供函数实现的测试的所有元素。

arr = [1,2,3,4,5]
//不包含3
arr = arr.filter(item=>return item!=3
) 
//arr [ 1, 2, 4, 5 ]

3.数据求和 reduce()

reduce():对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个输出值。

arr = [1,2,3,4,5]
//所有数求和
num = arr.reduce((total,item)=>{ return total + item} ,0)    
// num 15
// 有条件进行求和
// 对>2的值进行求和
arr = [1,2,3,4,5]
num = arr.reduce((total,item)=>{ if(item>2){ return total+item }else{ return total }},0)
//num 12

4.修改

4.1 forEach()

forEach():对数组的每个元素执行一次提供的函数。

arr = [1,2,3,4,5]
//每个数都+1
arr.forEach((value,index,array)=>{ array[index] = value +1
})
// arr = [2, 3, 4, 5, 6]
4.2 map()

map():创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后的返回值。

arr = [1,2,3,4,5]
arr1=arr.map((item)=>{ return item+1
})
// 原数组 arr = [1,2,3,4,5]
// 新数组 arr1 = [2, 3, 4, 5, 6]

5.查询

查找某个元素 find()

find():查找某个元素

arr = [1, 2, 3, 4, 5]
var num = arr.find(item => { return item == 2
})
//num 2
查找某个元素的下标 findIndex()

findIndex():查找某个元素对应的index

arr = [1,2,3,4,5]
var index = arr.findIndex(item=>{ return item == 2
})
//index 1
判断是不是存在某个元素满足某个条件 some()

some():判断是不是存在某个元素满足某个条件

arr = [1,2,3,4,5]
var a = arr.some(item=>{ return item>3
})
// a true
判断是不是每个元素都满足某个条件 every()

every():判断是不是每个元素都满足某个条件

arr = [1,2,3,4,5]
var a = arr.every(item=>{ return item>3
})// a false

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

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

相关文章

Golang中处理map和list的初始化问题

Golang中处理map和list的初始化问题 大家好!今天我们来聊聊Go语言中两个非常实用但有时又让人头疼的家伙——map(映射)和slice(切片)。想象一下,你在编程的世界里是一位厨师,而map和slice就像是…

每日OJ题_牛客CM26 二进制插入

目录 牛客CM26 二进制插入 解析代码 牛客CM26 二进制插入 二进制插入_牛客题霸_牛客网 解析代码 class BinInsert { public:int binInsert(int n, int m, int j, int i) {// 1 2 4 8 16 32 64 128 256 512 1014// 1024 2 4 32 // 1024 4 8 64 1024 76// 1000000000…

面向切面编程(AOP)介绍(横切关注点、通知(增强)、连接切入点、切面)

1. 面向切面编程思想AOP AOP:Aspect Oriented Programming面向切面编程 AOP可以说是OOP(Object Oriented Programming,面向对象编程)的补充和完善。OOP引入封装、继承、多态等概念来建立一种对象层次结构,用于模拟公…

Qt对话框介绍

消息对话框 QMessageBox:消息对话框,用于向用户展示简单的信息,警告,错误或者询问对话框。 信息框 QMessageBox::information(nullptr,"标题","信息"); 警告框 QMessageBox::warning(nullptr,"标题&…

go语言基础 -- 面向对象编程

go语言面向对象编程思想 面向对象编程离不开封装、继承、多态三个特性,go语言与其他c、java不太一样,没有类的概念,面向对象的实现也有些区别,下面分别描述。 go语言封装 结构体中字段如欲对外隐藏,首字母小写&…

JavaEE进阶(15)Spring原理:Bean的作用域、Bean的生命周期、Spring Boot自动配置(加载Bean、SpringBoot原理分析)

接上次博客:JavaEE进阶(14)Linux基本使用和程序部署(博客系统部署)-CSDN博客 目录 关于Bean的作用域 概念 Bean的作用域 Bean的生命周期 源码阅读 Spring Boot自动配置 Spring 加载Bean 问题描述 原因分析 …

Intellij IDEA 中 git 操作的快捷键

1.添加新建的文件 即add 操作 shift alt a 2.提交操作 即 commit操作 ctrl k 在窗口中可以用feature来声明此次更新的内容 3.提交操作 即push操作 ctrl shift k 4.拉去远程分支操作 即pull操作 ctrl t

国产 PD控制器产品-XS2103S&XS2103D&XS2104,兼容于IEEE 802.3 at/af

国产PD控制器产品-XS2103S&XS2103D&XS2104,兼容于IEEE 802.3 at/af 芯片特性 兼容于IEEE 802.3 at/af 2级事件分级 简易的墙上适配器接口 0至4级PoE分级 100V绝对最大额定输入 150mA最大浪涌电流限制 正常工作期间电流限制880mA 电流…

Spring学习 基础(三)MVC

5、Spring MVC 传统Web模式: Model:系统涉及的数据,也就是 dao 和 bean。View:展示模型中的数据,只是用来展示。Controller:处理用户请求都发送给 ,返回数据给 JSP 并展示给用户。 随着 Spring 轻量级开发…

C if 语句

一个 if 语句 由一个布尔表达式后跟一个或多个语句组成。 语法 C 语言中 if 语句的语法: if(boolean_expression) {/* 如果布尔表达式为真将执行的语句 */ }如果布尔表达式为 true,则 if 语句内的代码块将被执行。如果布尔表达式为 false,…

poll开发服务器

int poll(struct pollfd *fds, nfds_t nfds, int timeout); 函数说明:与select类似,委托内核监控可读,可写,异常事件。 函数说明: fds:一个struct pollfd结构体数组的首地址 struct pollfd { …

天猫淘宝详情接口API揭秘:实现个性化商品推荐!

天猫淘宝作为中国最大的电商平台,拥有庞大的商品库存和众多用户,为了提高用户购物体验并满足其个性化需求,天猫淘宝推出了详情接口API,通过智能算法实现个性化商品推荐。联讯数据将为您揭秘详情接口API的实现原理和功能。 个性化商…

信息抽取在旅游行业的应用:以景点信息抽取为例

开源项目推荐 今天先给大家推荐一个开源项目,多模态AI能力引擎平台: 免费的自然语言处理、情感分析、实体识别、图像识别与分类、OCR识别、语音识别接口,功能强大,欢迎体验。 https://gitee.com/stonedtx/free-nlp-api 场景描述 在旅游行业…

【新书推荐】17.3 字符串操作举例

本节内容:字符串操作举例。 ■例3:接收字符串去掉空格后逆向输出,t17-3.asm。 ■例4:字符串拼接,t17-4.asm。 ■例5:判断子串,t17-5.asm。 17.3.1 例3:接收字符串去掉空格后逆向输出…

如何关闭 Visual Studio 双击高亮

[问题描述]: 最近 Visual Studio 更新后,双击选中关键字快要亮瞎我的眼睛了 👀👀 [解决方法]: 摸索了一下,找到了关闭的方法:工具 → 选项 → 文本编辑器 → 常规,然后取消 勾选 sel…

蓝桥杯-串的处理,幸运数字

参照大佬写法: #include<iostream> #include<cstring> using namespace std; int main(){string str;getline(cin,str);//可以将带有空格的string输入for(int i0;i<str.size();i){if(i0&&str[i]>a&&str[i]<z) str[i]-32;//单词首字母小…

JavaScript输出

JavaScript 显示方案 JavaScript 能够以不同方式"显示"数据&#xff1a; 使用 window.alert() 写入警告框使用 document.write() 写入 HTML 输出使用 innerHTML 写入 HTML 元素使用 console.log() 写入浏览器控制台 使用 innerHTML 如需访问 HTML 元素&#xff0c…

python知网爬虫论文pdf下载+立即可用(动态爬虫)

文章目录 使用代码 使用 自己工作需要&#xff0c;分享出来&#xff0c;刚刚修改完。 知需要修改keyword就可以完成自动搜索和下载同时翻页。 但是需要安装Chrome&#xff0c;也支持linux爬虫&#xff0c;也要安装linux Chrome非可视化版。 代码 import selenium.webdriver …

如何使用LEAKEY轻松检测和验证目标服务泄露的敏感凭证

关于LEAKEY LEAKEY是一款功能强大的Bash脚本&#xff0c;该脚本能够检测和验证目标服务中意外泄露的敏感凭证&#xff0c;以帮助广大研究人员检测目标服务的数据安全状况。值得一提的是&#xff0c;LEAKEY支持高度自定义开发&#xff0c;能够轻松添加要检测的新服务。 LEAKEY主…

【unity小技巧】Unity人物衣服布料系统的探究 —— Cloth组件

文章目录 一、Cloth组件解释基本介绍出于性能的考虑, 可以对Cloth产生影响的Collider只有两种打开编辑模式绘制 二、基本使用1. 创建出一个空物体2. 在空物体上添加cloth组件&#xff0c;可以直接点击Add Component搜索cloth添加&#xff0c;也可以在工具栏 Component–>phy…