uni-app:js实现数组中的相关处理
一、查询数组中,某一项中的某个数据为指定值的项(find() 方法)
使用分析
- 使用数组的
find()方法来查询id为 0 的那一项数据。这个方法会返回满足条件的第一个元素,如果找不到符合条件的元素,则返回undefined。- 使用
find()方法传入一个回调函数作为参数。回调函数接收一个参数item,表示数组中的每个元素。我们在回调函数中判断item.id === 0来查找id为 0 的那一项数据。
效果展示
这里查询id为1的那一项的数据信息

核心代码
const item = array.find(item => item.id === 1);
完整代码
<template><view></view>
</template>
<script>export default {data() {return {}},methods: {},onLoad() {const array =[{id:0,name:'张三',age:18},{id:1,name:'李四',age:28},{id:2,name:'王五',age:38},{id:3,name:'赵六',age:48}] console.log('初始数组');console.log(array);//查询数组中指定id值的具体项(这里指定id为1) console.log('查询id为1的那一项数据');const item = array.find(item => item.id === 1);console.log(item);}};
</script>
<style></style>
二、查询数组中,某一项中的某个数据为指定值的项,存在多项数据的情况(filter() 方法)
使用分析
- 使用数组的
filter()方法。filter()方法会返回一个新数组- 使用
filter()方法传入一个回调函数作为参数。回调函数接收一个参数item,表示数组中的每个元素。我们在回调函数中判断item.name === '张三'来筛选出name为 "张三" 的所有项。
效果展示
这里查询name为‘张三’的全部项的数据信息

核心代码
const items = array.filter(item => item.name === '张三');
完整代码
<template><view></view>
</template>
<script>export default {data() {return {}},methods: {},onLoad() {const array = [{id: 0,name: '张三',age: 18},{id: 1,name: '李四',age: 28},{id: 2,name: '王五',age: 38},{id: 3,name: '张三',age: 48}];console.log('初始数组');console.log(array);console.log('查询name为‘张三’的全部项');const items = array.filter(item => item.name === '张三');console.log(items);}};
</script>
<style></style>
注:find()和 filter(),前者只返回满足条件的第一个的元素,而不是所有,后者即返回全部满足条件的数据
三、查询数组中,某一项中的某个数据为指定值时,对应该项中其他值的信息
方法一:使用循环遍历数组进行查询
使用分析
通过for循序对数组进行遍历,array[i].id即为每一项中的id值
效果展示
这里查询id为2时,该项的name值

核心代码
let name = '';
for (let i = 0; i < array.length; i++) {
if (array[i].id === 2) {
name = array[i].name;
break;
}
}
完整代码
<template><view></view>
</template>
<script>export default {data() {return {}},methods: {},onLoad() {const array = [{id: 0,name: '张三',age: 18},{id: 1,name: '李四',age: 28},{id: 2,name: '王五',age: 38},{id: 3,name: '张三',age: 48}];console.log('初始数组');console.log(array);console.log('查询id为2的项中的name值');let name = '';for (let i = 0; i < array.length; i++) {if (array[i].id === 2) {name = array[i].name;break;}}console.log(name);}};
</script>
<style></style>
方法二:使用find()方法和三目运算进行配合
使用分析
find()方法返回第一个满足条件的元素,而不是所有。如果没有任何元素满足条件,则返回undefined- 如果find()方法查询到了数据,通过三目运算进行输出
效果展示
这里查询id为2时,该项的name值

核心代码
const item = array.find(item => item.id === 2);
const name = item ? item.name : '';
完整代码
<template><view></view>
</template>
<script>export default {data() {return {}},methods: {},onLoad() {const array = [{id: 0,name: '张三',age: 18},{id: 1,name: '李四',age: 28},{id: 2,name: '王五',age: 38},{id: 3,name: '张三',age: 48}];console.log('初始数组');console.log(array);console.log('查询id为2的项中的name值');const item = array.find(item => item.id === 2);//三目运算,如果item的值存在说明找到了对应的数据就输出值,如果不是就输出空值const name = item ? item.name : '';console.log(name);}};
</script>
<style></style>
四、判断数组中,是否存在有一项中某个数据为指定值的项
使用分析
- 数组的
some()方法来判断是否存在满足条件的元素。some()方法会遍历数组中的每一个元素,如果其中任意一个元素返回true,则some()方法的返回值为true;如果所有元素都返回false,则some()方法的返回值为false。- 使用
some()方法传入一个回调函数作为参数。回调函数接收一个参数item,表示数组中的每个元素。我们在回调函数中判断item.name === '李四'来查找name属性等于 "李四" 的元素。如果找到了匹配的项,则将hasItem设置为true;否则设置为false。
效果展示
这里判断name中是否含有‘李四’和‘王麻子’

核心代码
const hasItem = array.some(item => item.name === '李四');
if (hasItem) {
console.log('数组中存在 name 值为 "李四" 的数据');
} else {
console.log('数组中不存在 name 值为 "李四" 的数据');
}
完整代码
<template><view></view>
</template>
<script>export default {data() {return {}},methods: {},onLoad() {const array = [{id: 0,name: '张三',age: 18},{id: 1,name: '李四',age: 28},{id: 2,name: '王五',age: 38},{id: 3,name: '赵六',age: 48}];console.log("初始数组")console.log(array)//判断是否有name为'李四'的数据const hasItem = array.some(item => item.name === '李四');if (hasItem) {console.log('数组中存在 name 值为 "李四" 的数据');} else {console.log('数组中不存在 name 值为 "李四" 的数据');}//判断是否有name为'王麻子'的数据const hasItem1 = array.some(item => item.name === '王麻子');if (hasItem1) {console.log('数组中存在 name 值为 "王麻子" 的数据');} else {console.log('数组中不存在 name 值为 "王麻子" 的数据');}}};
</script>
<style></style>
五、修改数组中某一项中的某个值为指定值时,该项对应别的数据的值
使用分析
- 使用
find()方法传入一个回调函数作为参数。回调函数接收一个参数item,表示数组中的每个元素。我们在回调函数中判断item.id === 2来查找id属性等于 2 的元素。如果找到了匹配的项,则将对应的age值修改为 55,并输出修改后的数组;否则输出“数组中不存在 id 值为 2 的元素”。
效果展示
这里修改id为2对应的age值
原始数据

修改后数据

核心代码
const item = array.find(item => item.id === 2);
if (item) {
item.age = 55;
console.log('修改成功,新的数组数据为:', array);
} else {
console.log('数组中不存在 id 值为 2 的元素');
}
完整代码
<template><view></view>
</template>
<script>export default {data() {return {}},methods: {},onLoad() {const array = [{id: 0,name: '张三',age: 18},{id: 1,name: '李四',age: 28},{id: 2,name: '王五',age: 38},{id: 3,name: '赵六',age: 48}]; const item = array.find(item => item.id === 2);if (item) {item.age = 55;console.log('修改成功,新的数组数据为:', array);} else {console.log('数组中不存在 id 值为 2 的元素');}}};
</script>
<style></style>
相关文章:
uni-app:js实现数组中的相关处理
一、查询数组中,某一项中的某个数据为指定值的项(find() 方法) 使用分析 使用数组的 find() 方法来查询 id 为 0 的那一项数据。这个方法会返回满足条件的第一个元素,如果找不到符合条件的元素,则返回 undefined。使用…...
51系列—基于51单片机的数字频率计(代码+文档资料)
本文主要说明基于51单片机的数字频率计设计,完整资料见文末链接 数字频率计概述 数字频率计是计算机、通讯设备、音频视频等科研生产领域不可缺少的测量仪器。它是一种用十进制数字显示被测信号频率的数字测量仪器。它的基本功能是测量正弦信号,方波信…...
【SA8295P 源码分析 (四)】44 - 如何替换 NON-HLOS.bin 中的 Wifi Firmware 固件
【SA8295P 源码分析】44 - 如何替换 NON-HLOS.bin 中的 Wifi Firmware 固件 1、提取 NON-HLOS.bin 中的 Wifi Firmware 出来2、把提取出来的 wifi 固件放到代码中3、重新打包生成 NON-HLOS.bin4、将生成的 NON-HLOS.bin 与 老的 NON-HLOS.bin 对比5、使用fastboot 下载测试wifi…...
Aspect Android埋点统计activity页面使用时长 onResume onPause,并保存时长
Aspect Android埋点统计activity页面使用时长 onResume onPause,并保存时长 标记: 1.项目下build.gradle dependencies {classpath com.android.tools.build:gradle:3.5.4classpath com.hujiang.aspectjx:gradle-android-plugin-aspectjx:2.0.10 } 2.…...
第四章 选择结构程序设计
C语言有两种选择语句:(1)if语句,实现两个分支的选择结构; (2)Switch语句,实现多分支的选择结构。 1.求ax^2bxc0方程的解。 #include<stdio.h> #include<math.h> int …...
JAVA高级教程-Java List(2)
目录 3、List接口的使用(1)3、List接口的使用(3)4、排序,集合之间的转换 3、List接口的使用(1) package ArrayList01;import java.util.ArrayList; import java.util.Iterator; import java.ut…...
Spark--经典SQL50题
目录 连接数据库准备工作 1、查询"01"课程比"02"课程成绩高的学生的信息及课程分数 2、查询"01"课程比"02"课程成绩低的学生的信息及课程分数 3、查询平均成绩大于等于60分的同学的学生编号和学生姓名和平均成绩 4、查询平均成绩…...
数据结构: AVL树
目录 1.AVL树的概念 2.AVL树的模拟实现 AVL树的结构定义 插入 对平衡因子的讨论 旋转 对旋转情况的讨论 1.单旋 1.1左单旋 1.2右单旋 2.双旋 2.1左右双旋 2.2右左双旋 检查是否是AVL树 1.AVL树的概念 当向二叉搜索树中插入新结点后,如果能保证每个结点…...
LeetCode-高频 SQL 50 题:连接 篇
目录 1378. 使用唯一标识码替换员工ID 题目描述: SQL语句: 1068. 产品销售分析 I 题目描述: SQL语句: 1581. 进店却未进行过交易的顾客 题目描述: SQL语句: 197. 上升的温度 题目描述࿱…...
操作系统备考学习 day10
操作系统备考学习 day10 第三章 内存管理3.2 虚拟内存管理3.2.1 虚拟内存的基本概念传统存储管理方式的特征、缺点局部性原理虚拟内存的定义和特征如何实现虚拟内存技术 3.2.2 请求分页管理方式页表机制缺页中断机构地址变换机构 3.2.3 页面置换算法最佳置换算法(OP…...
基于侏儒猫鼬优化的BP神经网络(分类应用) - 附代码
基于侏儒猫鼬优化的BP神经网络(分类应用) - 附代码 文章目录 基于侏儒猫鼬优化的BP神经网络(分类应用) - 附代码1.鸢尾花iris数据介绍2.数据集整理3.侏儒猫鼬优化BP神经网络3.1 BP神经网络参数设置3.2 侏儒猫鼬算法应用 4.测试结果…...
ios safari 正则兼容问题
背景: 系统是自己开发的采购管理系统; 最近升级系统之后客户反馈部分苹果手机现在在进入单据界面的时候报错, 内容显示不全; 安卓手机正常; 苹果首页是之前有使用过系统的才不行, 如果是之前没有使用过系统, 现在也是可以(后面查证这一点可能不是很准确, 跟是否等过过系统…...
Win10下基于VS2015编译SQLite3源码
一、下载SQLite SQLite SQLite Download Page 下载红框部分的3个文件 提示:这里有个 sglite-autoconf-3420000.tar.gz 是免编译版,想省事就下载这个,但我自己用这个老是编译不过 所以我这里不推荐这个了 二、配置SQLite 打开vs 2015或者其他…...
Linux 指令学习
Linux 指令学习 以此为记录,也方便自己日后查看回顾! Linux命令基础格式 无论是什么命令,用于什么用途,在Linux中,命令有其通用的格式: command: 命令本身 options:[可选…...
前端渲染后端返回的HTML格式的数据
在日常开发中,经常有需要前端渲染后端返回页面的需求,对于不同数据结构,前端的渲染方式也不尽相同,本文旨在对各种情况进行总结。 后端返回纯html文件格式 数据包含html标签等元素,数据类型如下图: 前端通…...
身份证读卡器ubuntu虚拟机实现RK3399 Arm Linux开发板交叉编译libdonsee.so找不到libusb解决办法
昨天一个客户要在RK3399 Linux开发板上面使用身份证读卡器,由于没有客户的开发板,故只能用本机ubuntu虚拟机来交叉编译,用客户发过来的交叉编译工具,已经编译好libusb然后编译libdonsee.so的时候提示找不到libusb,报错…...
触想五代强固型工业一体机在近海船舶上的应用
1、行业发展背景 近海船舶的发展紧密关联着海上运输、渔业贸易、旅游开发、能源探测等多领域,带动区域经济、文化繁荣发展。 随着现代科学与信息技术在各行各业的作用增强,工业4.0带动的产业升级逐步渗透进船舶领域,在此背景下,船…...
Node-创建Web应用
题记 node创建web应用,以下是所有流程和代码 与php比较:使用 PHP 来编写后端的代码,需要 Apache 或者 Nginx 的 HTTP 服务器,并配上 mod_php5 模块和 php-cgi。 Node应用的组成 node应用由三部分组成: require 指令&a…...
Redis查找并删除key
redis安装在IP为x.x.x.x的服务器上 redis安装 第一步,安装编译工具及库文件。 命令:yum -y install make zlib zlib-devel gcc-c libtool openssl openssl-devel 第二步,下载redis安装包。 命令:cd /usr/local/src wget ht…...
Spring Security认证架构介绍
在之前的Spring Security:总体架构中,我们讲到Spring Security整个架构是通过Bean容器和Servlet容器对过滤器的支持来实现的。我们将从过滤器出发介绍Spring Security的Servlet类型的认证架构。 1.AbstractAuthenticationProcessingFilter AbstractAut…...
业务系统对接大模型的基础方案:架构设计与关键步骤
业务系统对接大模型:架构设计与关键步骤 在当今数字化转型的浪潮中,大语言模型(LLM)已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中,不仅可以优化用户体验,还能为业务决策提供…...
智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql
智慧工地管理云平台系统,智慧工地全套源码,java版智慧工地源码,支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求,提供“平台网络终端”的整体解决方案,提供劳务管理、视频管理、智能监测、绿色施工、安全管…...
Cesium1.95中高性能加载1500个点
一、基本方式: 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...
IGP(Interior Gateway Protocol,内部网关协议)
IGP(Interior Gateway Protocol,内部网关协议) 是一种用于在一个自治系统(AS)内部传递路由信息的路由协议,主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
pam_env.so模块配置解析
在PAM(Pluggable Authentication Modules)配置中, /etc/pam.d/su 文件相关配置含义如下: 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块,负责验证用户身份&am…...
【机器视觉】单目测距——运动结构恢复
ps:图是随便找的,为了凑个封面 前言 在前面对光流法进行进一步改进,希望将2D光流推广至3D场景流时,发现2D转3D过程中存在尺度歧义问题,需要补全摄像头拍摄图像中缺失的深度信息,否则解空间不收敛…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址:pdf 英文是纯手打的!论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误,若有发现欢迎评论指正!文章偏向于笔记,谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
关于 WASM:1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么? WebAssembly(WASM) 是一种能在现代浏览器中高效运行的二进制指令格式,它不是传统的编程语言,而是一种 低级字节码格式,可由高级语言(如 C、C、Rust&am…...
VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP
编辑-虚拟网络编辑器-更改设置 选择桥接模式,然后找到相应的网卡(可以查看自己本机的网络连接) windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置,选择刚才配置的桥接模式 静态ip设置: 我用的ubuntu24桌…...
基于 TAPD 进行项目管理
起因 自己写了个小工具,仓库用的Github。之前在用markdown进行需求管理,现在随着功能的增加,感觉有点难以管理了,所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD,需要提供一个企业名新建一个项目&#…...
