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…...
突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合
强化学习(Reinforcement Learning, RL)是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程,然后使用强化学习的Actor-Critic机制(中文译作“知行互动”机制),逐步迭代求解…...
全球首个30米分辨率湿地数据集(2000—2022)
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集,包含8种湿地亚类,该数据以0.5X0.5的瓦片存储,我们整理了所有属于中国的瓦片名称与其对应省份,方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址:pdf 英文是纯手打的!论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误,若有发现欢迎评论指正!文章偏向于笔记,谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
C# SqlSugar:依赖注入与仓储模式实践
C# SqlSugar:依赖注入与仓储模式实践 在 C# 的应用开发中,数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护,许多开发者会选择成熟的 ORM(对象关系映射)框架,SqlSugar 就是其中备受…...
Mobile ALOHA全身模仿学习
一、题目 Mobile ALOHA:通过低成本全身远程操作学习双手移动操作 传统模仿学习(Imitation Learning)缺点:聚焦与桌面操作,缺乏通用任务所需的移动性和灵活性 本论文优点:(1)在ALOHA…...
初探Service服务发现机制
1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能:服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源…...
云原生安全实战:API网关Kong的鉴权与限流详解
🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关(API Gateway) API网关是微服务架构中的核心组件,负责统一管理所有API的流量入口。它像一座…...
【Linux】自动化构建-Make/Makefile
前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具:make/makfile 1.背景 在一个工程中源文件不计其数,其按类型、功能、模块分别放在若干个目录中,mak…...
ZYNQ学习记录FPGA(一)ZYNQ简介
一、知识准备 1.一些术语,缩写和概念: 1)ZYNQ全称:ZYNQ7000 All Pgrammable SoC 2)SoC:system on chips(片上系统),对比集成电路的SoB(system on board) 3)ARM:处理器…...
es6+和css3新增的特性有哪些
一:ECMAScript 新特性(ES6) ES6 (2015) - 革命性更新 1,记住的方法,从一个方法里面用到了哪些技术 1,let /const块级作用域声明2,**默认参数**:函数参数可以设置默认值。3&#x…...
