微信小程序——数组操作 (增加删除修改遍历）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全部+1
filterData() {
var arr = this.data.cellList.map(item => {
// var cellsArr = item.cells
var arr1 = item.cells.map(item2 => {
item2.num += 2
return item2
// console.log("num", item2.num - 1)
})
// console.log("arr1", arr1)
item.cells = arr1
return 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 = devicesCell
return cellsItem
})
item.cells = arr1
return 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))
求积：把加号改成乘号即可
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
38
0- 0
已为社区贡献12条内容
所有评论(0)