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

[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

相关文章:

  • 探讨代理IP在大数据收集、网络营销中的战略角色
  • 【C++专栏】C++入门 | 函数重载、引用、内联函数
  • 音视频开发_音频基础知识
  • Spring Boot异常处理和单元测试
  • 变换,动画
  • 计算机网络 八股
  • AJAX-常用请求方法和数据提交
  • IP-guard邮件管控再升级,记录屏幕画面,智能阻断泄密邮件
  • 零基础学习JS--基础篇--索引集合类
  • Xilinx 7系列FPGA的配置流程
  • QT----写完的程序打包为APK在自己的手机上运行
  • 设计MySQL数据表的几个注意点
  • python:布伊山德U检验(Buishand U test,BUT)突变点检测(以NDVI时间序列为例)
  • 「AI工程师」数据处理与分析-工作指导
  • c语言,大宗撮合交易中心系统核心模块代码
  • 「译」Node.js Streams 基础
  • Elasticsearch 参考指南(升级前重新索引)
  • HashMap剖析之内部结构
  • JavaScript服务器推送技术之 WebSocket
  • JavaScript中的对象个人分享
  • Java读取Properties文件的六种方法
  • Laravel5.4 Queues队列学习
  • Less 日常用法
  • mysql innodb 索引使用指南
  • Nacos系列:Nacos的Java SDK使用
  • Promise面试题2实现异步串行执行
  • Quartz初级教程
  • Spark RDD学习: aggregate函数
  • SpriteKit 技巧之添加背景图片
  • 闭包--闭包作用之保存(一)
  • 当SetTimeout遇到了字符串
  • 关于Android中设置闹钟的相对比较完善的解决方案
  • 简单易用的leetcode开发测试工具(npm)
  • 紧急通知:《观止-微软》请在经管柜购买!
  • 如何实现 font-size 的响应式
  • 突破自己的技术思维
  • 吐槽Javascript系列二:数组中的splice和slice方法
  • 为物联网而生:高性能时间序列数据库HiTSDB商业化首发!
  • 在electron中实现跨域请求,无需更改服务器端设置
  • ​Distil-Whisper:比Whisper快6倍,体积小50%的语音识别模型
  • ​TypeScript都不会用,也敢说会前端?
  • #LLM入门|Prompt#1.7_文本拓展_Expanding
  • #我与Java虚拟机的故事#连载17:我的Java技术水平有了一个本质的提升
  • (12)Linux 常见的三种进程状态
  • (C++)八皇后问题
  • (第9篇)大数据的的超级应用——数据挖掘-推荐系统
  • (分布式缓存)Redis分片集群
  • (附源码)ssm码农论坛 毕业设计 231126
  • (附源码)计算机毕业设计ssm基于B_S的汽车售后服务管理系统
  • (实战篇)如何缓存数据
  • (转)Android学习笔记 --- android任务栈和启动模式
  • ***监测系统的构建(chkrootkit )
  • ./include/caffe/util/cudnn.hpp: In function ‘const char* cudnnGetErrorString(cudnnStatus_t)’: ./incl
  • .NET 3.0 Framework已经被添加到WindowUpdate
  • .NET CORE 3.1 集成JWT鉴权和授权2