微信小程序——数组操作 (增加删除修改遍历）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
2
3
4
5
6
7

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是数组下标
    });
1
2
3
4
5
6
7
8
9
10

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)
1
2
3
4
5
6
7
8
9

3、清空数组

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

4、向前插入数组

// 4、向前插入数组
    //要增加的数组
    var newarray = [{
      id: 6,
      name: '向前增加数据--',
      count: 89
    }];

    //使用concat()来把两个数组合拼起来
    this.data.list = newarray.concat(this.data.list);
    console.log(this.data.list)
1
2
3
4
5
6
7
8
9
10
11

使用三点扩展运算符

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

5、向后插入数组

 // 5、向后插入数组
    //要增加的数组
    var newarray = [{
      id: 7,
      name: '向后增加数据--',
      count: 89
    }];

    //使用concat()来把两个数组合拼起来
    this.data.list = this.data.list.concat(newarray);
    console.log(this.data.list)
1
2
3
4
5
6
7
8
9
10
11

6、指定长度数组赋值

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

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

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

const arr1=[...arr2]
1

二、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]
1
2
3
4

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

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

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

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

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
    }
})
1
2
3
4
5
6
7
8

例子2：

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

输出结果为：

例子3：

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

输出结果为：

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}
1
2
3
4
5
6
7
8
9
10

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

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}
1
2
3
4
5
6
7
8
9
10

如果都没有满足条件的，就返回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)
  }

})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

二维数组操作机柜增删改查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)
1
2
3
4
5
6
7
8
9
10
11
12

复杂的写法

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'))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

四、求和

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

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