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>

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

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

相关文章

操作系统【OS】微内核

基本概念 微内核结构将操作系统划分为两大部分&#xff1a;微内核多个服务器微内核包含&#xff1a; 与硬件处理紧密相关的部分一些较基本的功能客户和服务器间的通信客户与服务器之间是借助微内核提供的消息传递机制来实现交互的 基本功能 进程管理 进程的通信、切换、调度…

天鹰340亿(AquilaChat2-34B-16K)本地部署的解决方案

大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…

嵌入式软件开发笔试面试

C语言部分&#xff1a; 1.gcc的四步编译过程 1.预处理 展开头文件&#xff0c;删除注释、空行等无用内容&#xff0c;替换宏定义。 gcc -E hello.c -o hello.i 2.编译 检查语法错误&#xff0c;如果有错则报错&#xff0c;没有错误则生成汇编文件。 gcc -S hello.i -o h…

ArGIS Engine专题(14)之GP模型根据导入范围与地图服务相交实现叠置分析

一、结果预览 二、需求简介 前端系统开发时,可能遇到如下场景,如客户给出一个图斑范围,导入到系统中后,需要判断图斑是否与耕地红线等地图服务存在叠加,叠加的面积有多少。虽然arcgis api中提供了相交inserect接口,但只是针对图形几何之间的相交,如何要使用该接口,则需…

LSTM-Attention单维时间序列预测研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

LC-2316. 统计无向图中无法互相到达点对数(DFS、并查集)

2316. 统计无向图中无法互相到达点对数 中等 给你一个整数 n &#xff0c;表示一张 无向图 中有 n 个节点&#xff0c;编号为 0 到 n - 1 。同时给你一个二维整数数组 edges &#xff0c;其中 edges[i] [ai, bi] 表示节点 ai 和 bi 之间有一条 无向 边。 请你返回 无法互相…

【LeetCode】57. 插入区间

1 问题 给你一个 无重叠的 &#xff0c;按照区间起始端点排序的区间列表。 在列表中插入一个新的区间&#xff0c;你需要确保列表中的区间仍然有序且不重叠&#xff08;如果有必要的话&#xff0c;可以合并区间&#xff09;。 示例 1&#xff1a; 输入&#xff1a;interval…

Matlab遗传算法工具箱——一个例子搞懂遗传算法

解决问题 我们一般使用遗传算法是用来处理最优解问题的&#xff0c;下面是一个最优解问题的例子 打开遗传算法工具箱 ①在Matlab界面找到应用程序选项&#xff0c;点击应用程序(英文版的Matlab可以点击App选项) ②找到Optimization工具箱&#xff0c;点击打开 创建所需要…

【计算机网络】OSI参考模型中非端-端层(物理层、数据链路层、网络层)功能介绍

系列文章目录 什么是计算机网络&#xff1f; 什么是网络协议&#xff1f; 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能&#xff08;1&#xff09;——速率、带宽、延迟 计算机网络性能&#xff08;2&#xff09;…

连续/离散的控制系统阶跃测试(包括MATLAB里的step()函数)

阶跃测试 只要是连续时间系统&#xff0c;无论是传递函数还是连续状态空间形式的模型&#xff0c;直接可以用**step()**做阶跃测试&#xff1b;但是对于离散系统而言&#xff0c;不能用step()函数&#xff0c;可以自行编写代码&#xff0c;如下。 1、离散系统&#xff1a;x(k…

短视频矩阵系统源码---开发

一、智能剪辑、矩阵分发、无人直播、爆款文案于一体独立应用开发 抖去推----主要针对本地生活的----移动端(小程序软件系统&#xff0c;目前是全国源头独立开发)&#xff0c;开发功能大拆解分享&#xff0c;功能大拆解&#xff1a; 7大模型剪辑法&#xff08;数学阶乘&#x…

idea 里 没有svn选项的处理办法

总结一下没有svn选项的几种情况&#xff1a; 情况1&#xff1a;IntelliJ IDEA打开带SVN信息的项目不显示SVN信息&#xff0c;项目右键SVN以及图标还有Changes都不显示解决方法 在VCS菜单中有个开关&#xff0c;叫Enabled Version Control Integration&#xff0c;在打开的窗口…

[AutoSAR系列] 1.2 AutoSar 综述

AutoSAR是一种汽车工业领域的标准化软件架构,旨在简化不同汽车制造商之间的软件开发和交互。该标准于2003年由一系列欧洲汽车制造商成立的AutoSAR联盟制定并发布,目前已经成为全球范围内的标准。下面将对AutoSAR的概念、架构和实现进行综述。 1. 概述 AutoSAR是汽车电子控制…

全球3小时气象数据集GLDAS Noah Land Surface Model L4 3 hourly 0.25 x 0.25 degree V2.1

简介 全球3小时气象数据集&#xff08;GLDAS Noah Land Surface Model L4 3 hourly 0.25 x 0.25 degree V2.1&#xff0c;简称GLDAS_NOAH025_3H 2.1&#xff09;&#xff0c;时空分辨率分别为3小时、0.25度。该数据产品于2020年1月重新处理&#xff0c;代替之前版本。前言 – …

npm ERR! exited with error code: 128

1.遇到的问题 报错信息&#xff1a;npm ERR! E:\tools\Gitt\Git\cmd\git.EXE ls-remote -h -t https://github.com/nhn/raphael.git npm ERR! npm ERR! fatal: unable to access https://github.com/nhn/raphael.git/: OpenSSL SSL_read: Connection was reset, errno 10054 …

Python-嗨格式 之音频转换,ncm转mp3

缘由&#xff1a;本想下载一些歌到车机播放&#xff0c;发现大部分是ncm格式的。 查了下才知道是音乐软件限制了&#xff0c;会员下载的音频文件为.ncm格式&#xff0c;目前只能在网易云音乐APP上播放&#xff0c;不支持在其他音频播放软件或音频设备使用。 百度转换软件&…

vscode使用CSScomb插件

1. 安装 在设置中搜索csscomb&#xff0c;把Csscomb: Format On Save勾上 然后去edit in settings.json配置 2.使用 2.1 用官网提供的三种方法 https://github.com/csscomb/csscomb.js/tree/master/config 2.2 自定义 CSS 书写顺序规则可以参考这个荐腾讯 AollyTeam 团队的…

【六:(mock数据)spring boot+mybatis+yml】

目录 1.1、代码编写Demo类User类启动类 APplication 1.2、配置类查询语句的配置 mysql.ymlspringboot的配置 application.yml日志的配置 logback.xml数据库的配置 mybatis-config.xml 1.3、测试&#xff1a;1.3.1、测试获取用户数1.3.2、添加用户1.3.3、数据的更新1.3.4、数据的…

uni-app:js二维数组与对象数组之间的转换

一、二维数组整理成对象数组 效果 [ ["前绿箭","DI10","RO1"], ["前红叉","DI2","RO2"], ["后绿箭","DI12","RO3"], ["后红叉","DI4","RO6"] ] …

STM32基于HAL库RT-Thread Demo测试

STM32基于HAL库RT-Thread Demo测试 &#x1f388;源码地址&#xff1a;https://github.com/RT-Thread/rt-thread/tree/master&#x1f4cc;基于STM32CUBEMX中间件安装《基于 CubeMX 移植 RT-Thread Nano》&#x1f4cd;环境搭建《使用 Env 创建 RT-Thread 项目工程》&#x1f5…