关于数组的reduce的妙用之处

在前端开发过程、或者面试过程中,别人问你数组常用的操作,你也许立刻马上回答for循环、forEach、for..of、 map、some......reduce等方法。我相信前端开发的小伙伴,10个人中有8个对reduce仅仅是停留在数据累加上, 下面本人介绍一些reduce函数的妙用之处。

一、回顾下reduce函数的参数问题

• 1、reduce函数

  Array.prototype.reduce(function(previousVal, currentVal, index, _this) {
    // 函数体
  }, initVal);
  

• 2、理解上面的函数

  • 1.reduce函数也是对数组迭代的过程
  • 2.第一次循环的时候,previousVal==initVal的
  • 3.从第二次开始,previousVal==reducer函数中的返回值了
  • 4、index表示当前数组的序列化
  • 5、_this表示当前的数组

二、自己手动实现一个reduce函数

• 1、自己扩展数组的方法

  Array.prototype.myReduce = function(fn, initVal) {
    if (Object.prototype.toString.call(this) != '[object Array]') {
      throw new Error('当前是数组的方法,不能使用到别的上面');
    }
    let total;
    if (initVal != undefined) {
      total = initVal;
    } else {
      total = this[0];
    }
    if (initVal === undefined) {
      for (let i = 1; i < this.length; i++) {
        total = fn(total, this[i], i, this);
      }
    } else {
      for (let [index, val] of this.entries()) {
        total = fn(total, val, index, this);
      }
    }
    return total;
  };
  

一、数据累加

• 1、数据原

  let ary1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  

• 2、数据叠加

  const result = ary1.reduce((pre, cur) => pre + cur);
  console.log(result);
  

二、将数组转换为对象

• 1、实现代码

  const userList = [
    {
      id: 1,
      username: 'john',
      sex: 1,
      email: 'john@163.com'
    },
    {
      id: 2,
      username: 'jerry',
      sex: 1,
      email: 'jerry@163.com'
    },
    {
      id: 3,
      username: 'nancy',
      sex: 0,
      email: ''
    }
  ];
  
  let result = userList.reduce((pre, current) => {
    return {...pre, [current.id]: current};
  }, {});
  
  console.log(result);
  

三、将大数组转换成小数组

• 1、实现代码

  const fileLines = [
    'Inspector Algar,Inspector Bardle,Mr. Barker,Inspector Barton',
    'Inspector Baynes,Inspector Bradstreet,Inspector Sam Brown',
    'Monsieur Dubugue,Birdy Edwards,Inspector Forbes,Inspector Forrester',
    'Inspector Gregory,Inspector Tobias Gregson,Inspector Hill',
    'Inspector Stanley Hopkins,Inspector Athelney Jones'
  ];
  
  let result = fileLines.reduce((pre, current) => {
    return pre.concat(current.split(/,/g));
  }, []);
  
  console.log(result);
  

四、将数组展开

• 1、实现代码

  const arr = ["今天天气不错", "", "早上好"];
  
  const arr2 = arr.reduce((pre, cur) => {
    return pre.concat(cur.split(''));
  }, []);
  console.log(arr2);
  

五、求数组的最大值与最小值

• 1、实现代码

  const readings = [0.3, 1.2, 3.4, 0.2, 3.2, 5.5, 0.4];
  
  let minValue = readings.reduce((x,y) => Math.min(x,y));
  console.log(minValue);
  let maxValue = readings.reduce((x,y) => Math.max(x,y));
  console.log(maxValue);
  

六、使用reduce写一个工具方法,用来提取对象中的数据

• 1、后端返回的一个对象

  let obj1 = {
    "result": {
      "report": {
        "contactInfo": {
          "callsNumber": 0,
          "contactsNumber": 0,
          "emergencyContactHasOverdue": "No",
          "sameLiainson": {
            "isSame": "Yes",
            "accounts": "aa"
          }
        }
      }
    }
  };
  

• 2、使用reduce的工具方法

  const objectGetVal = (obj, expr) => {
    if (!Object.is(Object.prototype.toString.call(obj), '[object Object]')) {
      throw new Error(`${obj}不是对象`);
    }
    if (!Object.is(Object.prototype.toString.call(expr), '[object String]')) {
      throw new Error(`${expr}必须是字符串`);
    }
    return expr.split('.').reduce((prev, next) => {
      if (prev) {
        return prev[next]
      } else {
        return undefined;
      }
    }, obj)
  };
  console.log(objectGetVal(obj1, 'result.report.contactInfo.emergencyContactHasOverdue'));
  console.log(objectGetVal(obj1, 'result.report.emergencyContactHasOverdue'));
  // 输出结果
  // No
  // undefined
  

七、使用reduce生成树型菜单参考