操作数据的map/filter/forEach/every/some方法总结

淩亂°似流年 2023-06-08 06:54 27阅读 0赞

1.forEach不会返回新的数组，而是在原数组的基础上改变数组，可以用于数组的修改

var arr = new Array();
    
      arr = [1, 2, 3, 4, 5, 6];
    
      arr.forEach((item, index, a) => {
    
        console.log(item, index, a) //子元素，索引，原数组
    
        arr[index] = item + 1
    
      })
    
      console.log(arr) //arr是一个新的数组 [2, 3, 4, 5, 6, 7]

2.map不改变原数组，会将处理过的数据组成一个新的数组

var arr = new Array(), arrNew = new Array();
    
      arr = [1, 2, 3, 4, 5, 6];
    
      arrNew = arr.map((item, index, a) => {
    
        // console.log(item,index,a) //子元素，索引，原数组
    
        return item * item
    
      })
    
      console.log(arr);//[1, 2, 3, 4, 5, 6]
    
      console.log(arrNew);//[1, 4, 9, 16, 25, 36]

3.filter不会改变原数组，但是也会将满足条件的元素组成印个新的数组，return出来

var arr = new Array(), arrNew = new Array();
    
      arr = [1, 2, 3, 4, 5, 6];
      //filter:
      arrNew = arr.filter((item, index, a) => {
    
        // console.log(item,index,a) //子元素，索引，原数组
    
        return item > 3
    
      })
    
      console.log(arr);//[1, 2, 3, 4, 5, 6]
    
      console.log(arrNew);//[4, 5, 6]
      // map:
      arrNew = arr.map((item, index, a) => {
    
        // console.log(item,index,a) //子元素，索引，原数组
    
        return item > 3
    
      })
    
      console.log(arr);//[1, 2, 3, 4, 5, 6]
    
      console.log(arrNew);//[false, false, false, true, true, true]

//map和filter的区别主要在于，当过滤而不是改变的时候，map return的是一个盛放布尔值的数组

4.every不是过滤也不是进行处理，也不会生成新的数组，他是对数组中的每一个元素进行判断

每一个元素都满足要求就返回true，只要有一个不满足就返回false

var arr = new Array();
    
      arr = [1, 2, 3, 4, 5, 6];
    
      var arrNew = arr.every((item, index, a) => {
    
        return item > 3
    
      })
    
      console.log(arr);//[1, 2, 3, 4, 5, 6]
    
      console.log(arrNew); //false

5.some和every一样不是过滤也不是进行处理，也不会生成新的数组，他是对数组中的每一个元素进行判断

但是只要有一个元素满足要求就返回true，都不满足就返回false

var arr = new Array();
    
      arr = [1, 2, 3, 4, 5, 6];
    
      var arrNew = arr.some((item, index, a) => {
    
        return item > 5
    
      })
    
      console.log(arr);//[1, 2, 3, 4, 5, 6]
    
      console.log(arrNew); //true

过去有很长一段时间，我一直很难理解 **reduce()** 这个方法的具体用法，平时也很少用到它。事实上，如果你能真正了解它的话，其实在很多地方我们都可以用得上，那么今天我们就来简单聊聊JS中 reduce() 的用法。

arr.reduce(function(prev,cur,index,arr){
    ...
    }, init);

**arr** 表示原数组；  
**prev** 表示上一次调用回调时的返回值，或者初始值 init;  
**cur** 表示当前正在处理的数组元素；  
**index** 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；  
**init** 表示初始值。

使用场景:
    1.求数组和:
    注意:(由于传入了初始值0，所以开始时prev的值为0，cur的值为数组第一项3，相加之后返回值为3作为下一轮回调的prev值，然后再继续与下一个数组项相加，以此类推，直至完成所有数组项的和并返回。)
    let arr=[1,4,3,5,7,8,9,1,3,4];
    let sum=arr.reduce((pre,cur)=>{
      return pre+cur
    },0)
    2.求数组最大值项:
    注意:init无值 pre参数第一项是arr[0],cur是从arr[1]开始  有init pre最开始取init的值 cur取arr[0](由于未传入初始值，所以开始时prev的值为数组第一项3，cur的值为数组第二项9，取两值最大值后继续进入下一轮回调)
    let max=arr.reduce((pre,cur)=>{
      return Math.max(pre,cur)
    })
    3.数组去重
    let newArr=arr.reduce((pre,cur)=>{
      pre.indexOf(cur)==-1&&pre.push(cur)
      return pre
    },[])