美文网首页
数组的相对高阶方法使用

数组的相对高阶方法使用

作者: 落叶归根99 | 来源:发表于2020-12-09 10:31 被阅读0次

    1.js根据数组中对象的某个属性值进行去重

      var arr = [ { from:'张三', to: '河南' }, { from:'王二', to: '阿里' }, { from:'王二', to: '杭州' }, { from:'王二', to: '山东' }]
      function unique(arr1) {
        const res = new Map()
        return arr1.filter((a) => !res.has(a.from) && res.set(a.from, 1))
      }
    
    image.png

    2.reduce方法介绍

    reduce(callback,initval)

    其中callback函数接收4个参数:

    • Accumulator (acc) (累计器)
    • Current Value (cur) (当前值)
    • Current Index (idx) (当前索引)
    • Source Array (src) (源数组)

    如果initval传了,则索引从0开始,acc是initval,cur是arr[0]

    如果initval没有传,则索引从1开始,acc是arr[0],cur是arr[1]

    reducer 函数的返回值分配给累计器,该返回值在数组的每个迭代中被记住,并最后成为最终的单个结果值。

    例1:数组累加

    const arr = [1,2,3,4,5];
    console.log(arr.reduce((pre,cur)=>{return pre+cur}))
    //1+2+3+4+5 15
    

    例2: 计算总价

    var product = [
      {
     name: '苹果',
     count: 2,
     price: 5
      },
      {
     name: '桃子',
     count: 5,
     price: 2
      },
      {
     name: '西瓜',
     count: 1,
     price: 10
      }
    ];
    var total = product.reduce((pre,cur)=>{
     return pre+cur.count*cur.price
    },0)
    // 30
    

    自己实现一个reduce方法

    知道了reduce的两种模式,利用递归实现它并不复杂

    // callback参数有4个。pre,cur,index,arr
    Array.prototype.myReduce = function (callback, prev) {
     for (let i = 0; i < this.length; i++) {
     // 判断有没有第二个参数 
     if (!prev) { // 没有的话复杂点,第一次拿的是两个元素arr[0],arr[1],注意index的变化 
     prev = callback(this[i], this[i + 1], i + 1, this); //这里的指针是i+1都是对的,但是下一次循环的时候i必须按是3所以需要+1
     i++; // 第一次循环了两个变量,下次应该从第三个执行,所以向后移动
        } else { //有的话最简单,直接就是从arr[0]开始递归
     prev = callback(prev, this[i], i, this);
        }
      }
     return prev;
    }
    

    相关文章

      网友评论

          本文标题:数组的相对高阶方法使用

          本文链接:https://www.haomeiwen.com/subject/qlzcgktx.html