vue中常用的数组方法

2023-11-19

Vue中常用的数组方法
.filter()、.map()、.forEach()、.find()、.findIndex()、.some()、.every()
.filter()
.map()
.forEach()
.find()
.findIndex()
.some()
.every()

.filter()
	filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
	是否改变原数组:否
	是否对空数组进行检测:否
	
	语法:
	const arr= [32, 33, 16, 40];
	const arr1 = arr.filter(item => item >= 18)
	console.log(arr)   // [32, 33, 16, 40]
	console.log(arr1)  // [32, 33, 40]

.map()
	map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
	map() 方法按照原始数组元素顺序依次处理元素。
	是否改变原数组:否
	是否对空数组进行检测:否
	语法:
		const arr= [4, 9, 16, 25];
		const arr1 = arr.map(item => item+2)
		console.log(arr)   // [4, 9, 16, 25]
		console.log(arr1)  // [6, 11, 18, 27]

.forEach()
forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。
注意: forEach() 对于空数组是不会执行回调函数的。
tips: forEach()中不支持使用break(报错)和return(不能结束循环),有需要时可使用常规的for循环。

语法:
	const arr= [4, 9, 16, 25];
	const arr1 = [];
	arr.forEach(item => arr1.push(item))
	console.log(arr)   // [4, 9, 16, 25]
	console.log(arr1)  // [4, 9, 16, 25]
.find()
find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。

find() 方法为数组中的每个元素都调用一次函数执行:

当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined
注意: find() 对于空数组,函数是不会执行的。
注意: find() 并没有改变数组的原始值。

语法:
const arr= [4, 9, 16, 25];
const b = arr.find(item => item>10)
const c = arr.find(item => item<1)
console.log(arr)   // [4, 9, 16, 25]
console.log(b)  // 16
console.log(c)  // undefined

.findIndex()
findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。

findIndex() 方法为数组中的每个元素都调用一次函数执行:

当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。
如果没有符合条件的元素返回 -1
注意: findIndex() 对于空数组,函数是不会执行的。
注意: findIndex() 并没有改变数组的原始值。

语法:
const arr= [4, 9, 16, 25];
const b = arr.findIndex(item => item>10)
const c = arr.findIndex(item => item<1)
console.log(arr)   // [4, 9, 16, 25]
console.log(b)  // 2
console.log(c)  // -1
.some()
some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。
some() 方法会依次执行数组的每个元素:

如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素,则返回false。
注意: some() 不会对空数组进行检测。
注意: some() 不会改变原始数组。

语法:
const arr= [4, 9, 16, 25];
const b = arr.some(item => item>10)
const c = arr.some(item => item<1)
console.log(arr)   // [4, 9, 16, 25]
console.log(b)  // true
console.log(c)  // false

.every()
every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。
every() 方法使用指定函数检测数组中的所有元素:

如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
如果所有元素都满足条件,则返回 true。
注意: every() 不会对空数组进行检测。
注意: every() 不会改变原始数组。

语法:

const arr= [4, 9, 16, 25];
const b = arr.every(item => item>10)
const c = arr.every(item => item>1)
console.log(arr)   // [4, 9, 16, 25]
console.log(b)  // false
console.log(c)  // true

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue中常用的数组方法 的相关文章

  • Java(五)-Java集合(comparable,map,list

    集合 Collection集合 集合的概念 ArrayList就是一个集合 集合是Java提供的一种容器 可以用来存储多个数据 集合与数组的区别 1 数组的长度是固定的 集合的长度是可变的 2 数组中存储的是同一类型的元素 可以存储基本数据
  • C++ 和 C 使用的不同点(待定)

    1 结构体 C 中定义的结构体 不起别名的情况下使用时要添加 struct C 可以不用添加 struct 直接使用定义的结构体名称 struct Student int age char name C 不报错 C报错 Student Ge

随机推荐

  • JDK的监听 Spring的事件监听机制

    一 概述 使用场景 用户注册完成时 需要给该用户发送邮件 发送优惠劵等等操作 实现业务的解耦 MQ的异步 销峰 解耦 大体步骤 1 UserService 在完成自身的用户注册逻辑之后 仅仅只需要发布一个 UserRegisterEvent
  • 归一化与反归一化在Bi-LSTM多特征时序预测中应用(附实操代码)

    提示 文章写完后 目录可以自动生成 如何生成可参考右边的帮助文档 目录 前言 一 Bi LSTM 是什么 二 为什么要归一化和反归一化 1 归一化的好处 2 反归一化的好处 三 归一化和反归一化使用的公式 1 归一化 2 反归一化 四 实操
  • 使用Pandas处理Excel文件

    Excel工作表是非常本能和用户友好的 这使得它们非常适合操作大型数据集 即使是技术人员也不例外 如果您正在寻找学习使用Python在Excel文件中操作和自动化内容的地方 请不要再找了 你来对地方了 在本文中 您将学习如何使用Pandas
  • forkjoin及其性能分析,是否比for循环快?

    最近看了网上的某公开课 其中有讲到forkjoin框架 在这之前 我丝毫没听说过这个东西 很好奇是什么东东 于是 就顺道研究了一番 总感觉这个东西 用的地方很少 也有可能是我才疏学浅 好吧 反正问了身边一堆猿 没有一个知道的 因此 我也没有
  • 怎么把树莓派连接到电脑上(基于window10)

    我相信对于刚玩树莓派的新手来说 尤其是没有带显示屏的同学来说 四处碰壁 可能出现的原因有很多种 ssh登录不上 wifi连接不上 内存不足 很多问题 而对于更多新手来说 如何给树莓派连接网络更是关键 今天我给大家讲一下如何用树莓派连接电脑
  • Real-time Linux

    所谓实时操作系统 Real time Opearting System 是指当外接世界或数据产生时 能够接受并以足够快的速度予以处理 其处理的结果又能在规定的时间之内来控制生产过程或对处理系统做出快速响应 调度一切可利用的资源完成实时任务
  • 数据链路层:Ethernet以太网协议

    首先Ethernet IEEE802 3 PPP和HDLC都是数据链路层的协议 只不过后面三个不常用而已 Ethernet和IEEE802 3属于以太链路层协议 数据链路层最常用的协议是Etnernet以太网协议 定义 Ethernet以太
  • 常用的加密算法

    整理一下常用的加密算法 加密算法我们整体可以分为 可逆加密和不可逆加密 可逆加密又可以分为 对称加密和非对称加密 一 不可逆加密 常见的不可逆加密算法有MD5 HMAC SHA1 SHA 224 SHA 256 SHA 384 和SHA 5
  • Flask(一)

    Flask 0 Flask简介 Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架 对于Werkzeug本质是Socket服务端 其用于接收http请求并对请求进行预处理 然后触发Fl
  • 设计模式——导论

    作为软件开发人员 我们在平时工作的过程中 往往需要编写很多的代码来实现我们的需求 很多的时候会造成代码臃肿和代码冗余的情况 这个时候我们需要引入一个理念 设计模式 设计模式存在的意义在于 1 使得我们的代码更加精炼 2 使我们代码的可读性更
  • 面试求职经历及遇到的部分问题

    转眼间已经工作一年多了 最近想换个工作环境 就选择了跳槽 跳槽对我们程序猿来说并没什么稀奇 但这是我第一次跳槽 也颇感激动 哈哈 总的来说 这次找工作还是相对去年来说比较容易的 毕竟已经工作一年了嘛 记得去年的时候投20份简历也不一定会有面
  • 开发者本地搭建性能监测工具(Windows)

    ElasticSearch 8 9 0 开发模式安装 JDK安装 官方提供版本与JDK支持关系 https www elastic co cn support matrix matrix jvm 我们安装Elasticsearch 8 9
  • ATT&CK实战系列——红队实战(一)红日靶场1

    目录 靶场搭建 拓扑图 配置网络 外网打点web服务器 信息搜集 nmap扫端口服务 dirsearch目录扫描 phpmyadmin日志getshell yxcms 后台getshell xss 关闭win7防火墙 上线msf cs 上线
  • 基于加密流量组建跨机房(混合云)k8s集群

    业务场景 解决服务同城 异地多活灾备 环境 a机房 私网 192 168 1 0 24 公网ip 111 111 111 111 b机房 私网 192 168 2 0 24 公网ip 222 222 222 222 c机房 私网 192 1
  • 传统目标检测算法综述

    传统目标检测算法综述
  • Node.Js基础知识

    Node Js架构 Natives modules 当前层内容由JS实现 提供 应用程序可直接调用库 例如 fs path http等 JS语言无法直接操作底层硬件设置 Builtin modules 胶水层 Builtin modules
  • 基于DS18B20和HS1101的仓库自动报警系统

    基于DS18B20和HS1101的仓库自动报警系统 背景介绍 效果展示 完整版的项目代码 仿真文件 下面是项目原理图 具体管脚定义如下图 18B20温度原理 HS1101湿度传感器 红外测距报警模块我用到的是GP2D12 通过数模转化器AD
  • 解决高德地图UnsatisfiedLinkError问题

    今天遇到一个bug 高德地图3d地图java lang UnsatisfiedLinkError 问题分析 没有找到libgdamapv4sdk751 so java lang UnsatisfiedlinkError 的解释如下 Thro
  • 交换机自学习和转发帧

    交换机自学习和转发帧 主机A给主机B发送帧 首先假设已经通过arp协议得到主机B的MAC地址 当交换机1收到该帧后将源MAC地址和接口登记 然后在帧交换表中查到目的MAC地址 没有找到就进行盲目转发 泛洪 交换机2收该帧后 做相同的动作 主
  • vue中常用的数组方法

    Vue中常用的数组方法 filter map forEach find findIndex some every filter map forEach find findIndex some every filter filter 方法创建