一、数组的操作

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))

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

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

微信小程序中如何使用setData修改数组或对象中的某一参数
本人也是刚开始接触微信小程序,在微信小程序中经常会遇到修改数组中某一项的值,比如array[0]或者是对象中object.item的值.这些值在微信小程序中都需要使用一个名为setData的方法,而这 ...
微信小程序如何实现通过js修改wxml的for循环中的属性值
微信小程序如何实现通过js修改wxml的for循环中的属性值要实现的效果具体代码要实现的效果点击每一个活动选项,实现显示对应的操作按钮具体代码首先要在对应页面的js中给data中定义数组, ...
wxss 点击样式_微信小程序点击控件修改样式实例详解
微信小程序点击控件修改样式实例详解现在要在微信小程序中实现点击控件修改样式,如下: 微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它. ...
微信小程序 - 实现左滑动删除功能
微信小程序 - 实现左滑动删除功能效果图: 实现过程: 一.wxml布局这里我是先用了一个大盒子包裹小盒子,然后小盒子里面进行左右布局(左边为内容部分,右边为删除按钮)的方式实现的 <vie ...
微信小程序长按图片不出现菜单_微信小程序实现长按删除图片的示例
说明最近在学小程序,遇到长按图片删除的问题,特此记录,记录自己的成长轨迹需求: 长按删除指定图片需要解决的问题长按事件如何表示出来? 如何获取当前长按元素的下标? 如何删除元素? 解决办法长 ...
JPA学习笔记---JPA数据的操作:增加,删除,修改,获取,使用JPQL进行查询
JPA学习笔记---JPA数据的操作:增加,删除,修改,获取,使用JPOL进行查询创梦技术交流平台:资源下载,技术交流,网络赚钱: 交流qq群:1群:248318056 2群:251572072 技 ...
微信小程序上传图片预览删除
微信小程序上传图片预览删除 ①.wxml<view class='footerEditOne'><view wx:for="{{src}}" wx:key=' ...
上拉加载更多后台数据_微信小程序端操作云数据库
一.分清几个概念 1.云开发,简言之就是可以直接用微信小程序开发者工具完成一个从前台到后台的小程序项目. 2.小程序端,使用云开发的时候,miniprogram中写的代码可以叫做小程序端(真实是我不知 ...
微信小程序邀请好友增加积分
假设你的小程序中已经有了一个邀请好友的按钮或页面,那么可以在相应的触发事件中添加以下代码: // 监听邀请好友成功事件 wx.onShareAppMessage(() => {// 增加2积分l ...

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