微信小程序——数组操作 (增加删除修改遍历）map、filter、forEach、find的用法、二维数组，排序，求和、指定长度数组赋值

一、数组的操作

Array.push() ->在数组后面继续插入内容
Array.pop() ->拿走数组最后一个内容
Array…shift()->拿走数组的第一个内容 (unshift也是拿走最后一个)
Array.reverse()->对数组从大到小排列
Array.sort()->对数组从小到大排列**

Array.splice(起始位置 , 位数,”增添内容”)->从数组中取出以起始位置开始的位数的内容，并写入增添内容，可用来删除内容与替换,例如people.aplice(1，2，“name”)

0、原数组为（以下的操作都是对原数组进行操作）：

 list: [{name: "你好",status: true,}, {name: "朋友",status: false,}],

1、修改数组里某一项的值

 // 1、修改数组里某一项的值this.data.list[0].name = '修改了内容';this.setData({list: this.data.list});console.log(this.data.list)
// 2、修改数组里某一项的值this.setData({[`list[${index}].name `]: '修改了内容',//这里的index是数组下标});

2、删除某条数据

this.data.list 是原来的数组

// 2、删除某条数据//通过`index`识别要删除第几条数据，第二个数据为要删除的项目数量，通常为1，//splice(1, 1)表示是从第二条数据开始删除，删除一条this.data.list.splice(1, 1);//渲染数据this.setData({list: this.data.list});console.log(this.data.list)

3、清空数组

 //3、清空数组，其实就是让数组变成一个空数组即可this.setData({list: {}});

4、向前插入数组

// 4、向前插入数组//要增加的数组var newarray = [{id: 6,name: '向前增加数据--',count: 89}];//使用concat()来把两个数组合拼起来this.data.list = newarray.concat(this.data.list);console.log(this.data.list)

使用三点扩展运算符

var arr1 = ['a', 'b'];var arr2 = ['c'];console.log([...arr2, ...arr1])

5、向后插入数组

 // 5、向后插入数组//要增加的数组var newarray = [{id: 7,name: '向后增加数据--',count: 89}];//使用concat()来把两个数组合拼起来this.data.list = this.data.list.concat(newarray);console.log(this.data.list)

6、指定长度数组赋值

1、初始化由参数控制长度的数组

const array = Array(5).fill('1')
//输出 ['1','1','1','1','1',]

2、如果是普通的赋值arr1=arr2，如果arr2改变，arr1也会跟着改变，使用下面的赋值就不会（{}对象也一样）

const arr1=[...arr2]

二、map、filter、forEach、find的用法

1、map

经过在浏览器上的测试，forEach()的执行速度比map()慢了70%。map是会有返回的数组，而forEach没有。

例子1：

A、使用map将每一个元素乘以2，然后筛选出那些大于5的元素。最终结果赋值给arr2。

// 把数组全部都乘以2，然后选出大于5的
let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(num => num * 2).filter(num => num > 5);
//输出 arr2为： [6, 8, 10]

B、如果只是要3乘以2，需要这样写

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(num => if (num  == 3) {return num * 2;}return num ;

C、如果要知道遍历到第几个了，可以这样写：

arr.map((num,index) => num * 2);

index就是第几个
D、处理服务端返回的数据（有name、sex、gener、number等等），只需要部分字段，可以这样写：

let r = res.map(item => {return {title: item.name,sex: item.sex === 1? '男':item.sex === 0?'女':'保密',age: item.age,avatar: item.img}
})

例子2：

 var arr = [1, 2, 2].map(() => "aaa")console.log(arr)

输出结果为：
在这里插入图片描述

例子3：

 var arr = ["A", "K", "Q", "J", "10"].map(p => ["♠", p])console.log(arr)

输出结果为：
在这里插入图片描述

2、filter

 var persons = [{name:"小王",type:"boy",city:"广西",age:15,height:170},{name:"小美",type:"girl",city:"北京",age:16,height:180},{name:"小高",type:"girl",city:"湖南",age:18,height:175},{name:"小刘",type:"boy",city:"河北",age:20,height:177}]var filterNum = persons.filter(function(person,index,arrs){return person.type==="boy" && person.age > 17  && person.height<180});console.log(filterNum)//{name:"小刘",type:"boy",city:"河北",age:20,height:177}

过滤之后如果都不满足条件，会返回 []，需要用长度来判断是否有满足的条件

3、find

特点：找到第一个符合条件之后,就不会往后找了,这与filter过滤是不一样的，find方法比较快速便捷

var persons = [{name:"小王",type:"boy",city:"广西",age:15,height:170},{name:"小美",type:"girl",city:"北京",age:16,height:180},{name:"小高",type:"girl",city:"湖南",age:18,height:175},{name:"小刘",type:"boy",city:"河北",age:20,height:177}]var filterNum = persons.find(function(person,index,arrs){return person.type==="boy" });console.log(filterNum)// {name:"小王",type:"boy",city:"广西",age:15,height:170}

如果都没有满足条件的，就返回undefined

注意：这里不可以使用includes，因为“boy"是最对象{}里

4、forEach

能用forEach的，就可以使用map，一般比较少用forEach，不是到迫不得已都不用

map、filter实战

const app = getApp()Page({data: {cellList: [{cells: [{num: 1,cellNum: [{machineCode: "755000017"}, {machineCode: "755000020"}]}, {num: 2,cellNum: [{machineCode: "755000027"}, {machineCode: "755000019"}, {machineCode: "755000054"}]}]}, {cells: [{num: 3,cellNum: [{machineCode: "755000027"}, {}, {}]}]}, {cells: [{num: 4,cellNum: [{}]}]}],// 第二组testArr: [{machineCode: "755000017"}, {machineCode: "755000023"}]},onLoad() {console.log("原始的二维数组为==", this.data.cellList)// this.filterData()this.filterData2()console.log("原始的二维数组为==(问题：this.data.cellList会跟着变)", this.data.cellList)},// 过滤数组,num全部+1filterData() {var arr = this.data.cellList.map(item => {// var cellsArr = item.cellsvar arr1 = item.cells.map(item2 => {item2.num += 2return item2// console.log("num", item2.num - 1)})// console.log("arr1", arr1)item.cells = arr1return item})console.log("arr==", arr)},// 过滤数组,cellList里面的machineCode如果在第二个数组testArr里面的话就保留，不在的那些就清掉filterData2() {var arr = this.data.cellList.map(item => {var arr1 = item.cells.map(cellsItem => {const devicesCell = cellsItem.cellNum.filter(cellNumItem => {const devices = this.data.testArr.filter(testArrItem => {return testArrItem.machineCode === cellNumItem.machineCode})return devices.length != "0"})cellsItem.cellNum = devicesCellreturn cellsItem})item.cells = arr1return item})console.log("arr==", arr)}})

二维数组操作机柜增删改查demo：https://download.csdn.net/download/wy313622821/16651022

三、数组排列

1、从小到大排列
Array.sort()->对数组从小到大排列**
2、数组里面的对象按 从小到大排列

//支持数字和字符串const arr = [{age: '2'}, {age: '3'}, {age: '1'}]arr.sort((a, b) =>a.age.localeCompare(b.age))console.log('排序后的结果为', arr)

复杂的写法

var compare = function (prop) {return function (obj1, obj2) {var val1 = obj1[prop];var val2 = obj2[prop];if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {val1 = Number(val1);val2 = Number(val2);}if (val1 < val2) {return -1;} else if (val1 > val2) {return 1;} else {return 0;}            } 
}
//使用:按照对象里面的age进行排列（兼容数字和字符串）
Array.sort(compare('age'))

四、求和

 const arr = [5, 8, 10]// arr.reduce((a,b)=>a+b)console.log('相加后的结果为', arr.reduce((a,b)=>a+b))

求积：把加号改成乘号即可

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

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

js数组排序实用方法集锦

js数组排序实用方法集锦

js数组排序实用方法集锦 前言&#xff1a; 据说程序员三个月就能忘记自己写的代码&#xff0c;所以最好是在有空的时候及时做些总结&#xff0c;记录下来&#xff0c;这样后边遇到类似问题的话&#xff0c;就可以直接先查看自己的博客了。写技术博客&#xff0c;对自己是一种总…
阅读更多...
运行 100 万个并发任务究竟需要多少内存？

运行 100 万个并发任务究竟需要多少内存？

Laf 公众号已接入了 AI 绘画工具 Midjourney&#xff0c;可以让你轻松画出很多“大师”级的作品。同时还接入了 AI 聊天机器人&#xff0c;支持 GPT、Claude 以及 Laf 专有模型&#xff0c;可通过指令来随意切换模型。欢迎前来调戏&#x1f447; <<< 左右滑动见更多 &…
阅读更多...
MyBatis 环境搭建+基本使用

MyBatis 环境搭建+基本使用

目录 MyBatis创建MyBatis环境搭建MyBatis模式开发MyBatis 获取动态参数&#xff08;查询操作&#xff09;${} 直接替换#{} 占位符模式替换like查询&#xff08;模糊查询&#xff09;多表查询一对一的表映射一对多的表映射 增、删、改操作改操作删除操作增加操作添加用户添加用户…
阅读更多...
Spring事务与事务传播

Spring事务与事务传播

文章目录 一、什么是事务?二、Spring事务实现编程式事务声明式事务 三、Transactional的使用参数作用Spring事务的隔离级别事务失效的场景Transactional工作原理 四、Spring事务传播机制Spring有哪些事务传播机制&#xff1f; 一、什么是事务? 事务&#xff1a;事务是一组操…
阅读更多...
mybatis分页中的报错

mybatis分页中的报错

1 Cause: org.apache.ibatis.builder.BuilderException: Error parsing SQL Mapper Configuration. Cause: java.lang.NoSuchMethodException: com.github.pagehelper.BoundSqlInterceptor.<init>() 出错的原因就是上面的那句话 Error parsing SQL Mapper Configuration…
阅读更多...
Mybatis分页方式及实现原理

Mybatis分页方式及实现原理

一、mybatis的4种分页方式(物理分页、逻辑分页) 1、借助Sql语句Q进行分页(物理分页) 2、拦截器分页(物理分页)通过拦截器给sq语句末尾加Eimt语句来查询 3、借助 数组Q进行分页(逻辑分页) 4、RowBounds分页插件实现分页(逻辑分页) 二、mybatis分页的原理 mybatis分页原理是&…
阅读更多...
Ora提示词版ChatGPT机器人

Ora提示词版ChatGPT机器人

Ora可以自己创建一个ChatGPT机器人&#xff0c;可以设置自己的提示词例如我创建的AI佛祖https://ora.ai/aesthetic-red-nfa4/ai%E4%BD%9B%E7%A5%96 提示词 创建机器人的时候&#xff0c;需要设定自己的提示词&#xff0c;例如&#xff1a; 假设你是佛祖&#xff0c;名字叫做释迦…
阅读更多...
mybatis分页查询插件

mybatis分页查询插件

1.引入jar包 <dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper</artifactId><version>5.3.0</version></dependency> 2.在mybatis的核心配置文件mybatis.xml中配置分页插件 3.使用pageHec publi…
阅读更多...
Mybatis分页查询——四种传参方式

Mybatis分页查询——四种传参方式

目录 相关导读 一、顺序传参 1. 持久层接口方法 2. UserMapper.xml映射文件新增标签 3. 新增测试方法 4. 运行结果 二、param传参 1. 持久层接口方法 2. UserMapper.xml映射文件新增标签 3. 新增测试方法 4. 运行结果 三、自定义POJO类传参 1. 自定义POJO类 2. 持…
阅读更多...
MyBatis分页插件

MyBatis分页插件

目录 分页插件 Mybatis插件典型适用场景 实现思考 第一个问题 第二个问题 自定义分页插件 分页插件使用 添加pom依赖 插件注册 调用 代理和拦截是怎么实现的 PageHelper 原理 分页插件 MyBatis 通过提供插件机制&#xff0c;让我们可以根据自己的需要去增强MyBati…
阅读更多...
Mybatis——分页

Mybatis——分页

1.为什么要分页&#xff1f; 减少数据的处理量使用Limit分页 select * from user limit startIndex,pageSize;使用Mybatis实现分页&#xff0c;核心SQL 1.数据库文件-db.properties drivercom.mysql.jdbc.Driver urljdbc:mysql://localhost:3306/mybatis?useSSLfalse&…
阅读更多...
Mybatis实现分页的三种方式

Mybatis实现分页的三种方式

文章目录 1、Limit实现分页2、RowBounds分页&#xff08;不建议使用&#xff09;3、MyBatis分页插件PageHelper&#xff08;了解即可&#xff09; 1、Limit实现分页 sql语句 SELECT * from user limit startIndex,pageSize简单示例&#xff1a; user表 查询一&#xff1a;从第…
阅读更多...
Mybatis的四种分页方式详解

Mybatis的四种分页方式详解

LIMIT关键字 mapper代码 select * from tb_user limit #{pageNo}, #{pageSize} 业务层直接调用 public List findByPageInfo(PageInfo info) { return userMapper.selectByPageInfo(info); } 3&#xff0c;优点 灵活性高&#xff0c;可优化空间大 mysql分页语句优化 4&…
阅读更多...
mybatis实现分页的几种方式

mybatis实现分页的几种方式

本文目录 借助数组进行分页借助Sql语句进行分页拦截器分页RowBounds实现分页 借助数组进行分页 原理&#xff1a;进行数据库查询操作时&#xff0c;获取到数据库中所有满足条件的记录&#xff0c;保存在应用的临时数组中&#xff0c;再通过List的subList方法&#xff0c;获取到…
阅读更多...
【分布式应用】ELK企业级日志分析系统

【分布式应用】ELK企业级日志分析系统

一、ELK 简介 ELK平台是一套完整的日志集中处理解决方案&#xff0c;将 ElasticSearch、Logstash 和 Kiabana 三个开源工具配合使用&#xff0c; 完成更强大的用户对日志的查询、排序、统计需求。 1.1 ELK各组件介绍 ElasticSearch&#xff1a; 是基于Lucene&#xff08;一个…
阅读更多...
Rust每日一练(Leetday0016) 全排列I\II、旋转图像

Rust每日一练(Leetday0016) 全排列I\II、旋转图像

目录 46. 全排列 Permutations &#x1f31f;&#x1f31f; 47. 全排列 II Permutations II &#x1f31f;&#x1f31f; 48. 旋转图像 Rotate Image &#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 Python每日一练 专…
阅读更多...
win10操作系统官网如何下载ios境像文件安装操作系统

win10操作系统官网如何下载ios境像文件安装操作系统

1.打开官网 2.立即下载工具 3.正在准备进行工作 4.接收条款 5.根据需求选择安装合适的位置 6.等待创建成功 7.右键选择装载 8.双击安装setup.exe文件 8 使用微Pe安装过程中发现需要联网更新解决 winR 然后cmd 输入 OOBE\BYPASSNRO 9 或者关闭此进程 电脑不要插网线&#xff…
阅读更多...
虚拟机系统iso镜像下载_如何下载正版系统镜像

虚拟机系统iso镜像下载_如何下载正版系统镜像

许多网友想装系统&#xff0c;可是不会装(后期会推装系统的文章)&#xff0c;而且网上的系统有的装有全家桶&#xff0c;有的又有捆绑软件&#xff0c;严重的还有病毒。那么&#xff0c;在哪里去下载正版&#xff0c;安全的系统镜像呢 "MSDN&#xff0c;我告诉你"这个…
阅读更多...
自定义IOS系统弹框

自定义IOS系统弹框

写在之前 系统的弹框虽然很好看&#xff0c;但是有时候无法完全满足UI设计的需求&#xff0c;比如说中间要显示一个输入框&#xff0c;或者要放置一张图片&#xff0c;这里介绍一个很早之前的自定义弹框库&#xff0c;这个自定义弹框sdk写的很细致&#xff0c;定制性很强&…
阅读更多...
华为vivo小米魅族oppo荣耀安卓手机刷IOS苹果系统

华为vivo小米魅族oppo荣耀安卓手机刷IOS苹果系统

现在的刷机教程层出不穷&#xff0c;但是没有哪个大神可以开发出一款安卓刷IOS的工具&#xff0c;使得安卓手机或者安卓平板变成IOS苹果系统&#xff0c;这个工具除了可以刷安卓手机也可以刷安卓平板&#xff0c;网友实测&#xff0c;如果设备不支持的话软件会提醒不支持&#…
阅读更多...
最新文章

Copyright @ 2022~2023