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

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

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

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

  data: {
    list: [{
      name: "张三",
      status: true,
    }, {
      name: "李四",
      status: false,
    }],
  },

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

    // 1、修改数组里某一项的值
    this.data.list[0].name = '修改了内容';
    this.setData({
      list: this.data.list
    });
    console.log(this.data.list)

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

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

2、删除某条数据

    // 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没有。

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

 

    // 如果只是要3乘以2
    let arr = [1, 2, 3, 4, 5];
    let arr2 = arr.map(num => 
         if (num  == 3) {
        return num * 2;
         }
    return num ;

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

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

index就是第几个

处理服务端返回的数据（有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
      }
    })

 

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

    var arr = ["A", "B", "5"].map(p => ["♠", p])
    console.log(arr)
    // 输出数组： ["♠", "A"] ["♠", "B"] ["♠", "5"]

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

三、数组排列

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

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

四、求和

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

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