JS常见的高阶函数

195 阅读2分钟

reduce函数及用例

1、reduce() 方法有两个参数,第一个是回调函数,第二个是初始值

回调函数

  1. Accumulator (acc) (累计器)

  2. Current Value (cur) (当前值)

  3. Current Index (idx) (当前索引)

  4. Source Array (src) (源数组)

Current IndexSource Array是可选的。

初始值

如果指定了初始值,则将累加器设置为 initialValue 作为初始元素。否则,将累加器设置为数组的第一个元素作为初始元素。

2、reduce用例

1.对象数组中的数值之和,按属性分组对象

const arr = [
      { name: '物理', score: 41 },
      { name: '化学', score: 60 },
      { name: '数学', score: 36 },
      { name: '语文', score: 90 },
      { name: '英语', score: 64 },
    ];
    //1、成绩总和
    // const res = arr.reduce((acc, cur) => acc + cur.score, 0)
    //2、 >60分通过否则fail
    let initVal = {
      fail: [],
      pass: []
    }
    const res = arr.reduce((acc, cur) => {
      (cur.score >= 60) ? acc.pass.push(cur) : acc.fail.push(cur)
      return acc
    }, initVal)
    console.log(res);
    console.log(JSON.stringify(res));
//输出
   {"fail":[{"name":"物理","score":41},
            {"name":"数学","score":36}],
    "pass":[{"name":"化学","score":60},
            {"name":"语文","score":90},
            {"name":"英语","score":64}]}

2.删除数组中的重复项

    const arr = [1, 5, 6, 5, 7, 1, 6, 8, 9, 7];
    const res = arr.reduce((acc, cur) => {
      if (!acc.includes(cur)) {
        acc.push(cur);
      }
      return acc;
    }, []);
    console.log(res);
  // [ 1, 5, 6, 7, 8, 9 ]

3.扁平化数组

 var res = [[0, 1], [2, 3], [4, 5]].reduce(
      (acc, cur) => acc.concat(cur), []);
    console.log(res); // [0, 1, 2, 3, 4, 5]

4.按属性对Object分类

   var people = [
      { name: 'Alice', age: 21 },
      { name: 'Max', age: 20 },
      { name: 'Jane', age: 20 }
    ];
    function groupBy(arr, property) {
      return arr.reduce(function (acc, cur) {
        var key = cur[property];
        if (!acc[key]) {
          acc[key] = [];
        }
        acc[key].push(cur);
        return acc;
      }, {});
    }
    var res = groupBy(people, 'age');
    console.log(res);
// { 
//  20: [
//     { name: 'Max', age: 20 }, 
//     { name: 'Jane', age: 20 }
//   ], 
//   21: [{ name: 'Alice', age: 21 }] 
// }

5.扩展运算符和initialValue绑定包含在对象数组中的数组

   var arrs = [{
      name: 'Ani',
      books: ['论语', '大学'],
      age: 21
    }, {
      name: 'Bob',
      books: ['中庸', '孟子'],
      age: 26
    }, {
      name: 'Alice',
      books: ['诗经', '易经'],
      age: 18
    }];
    var allbooks = arrs.reduce(function (prev, curr) {
      return [...prev, ...curr.books];
    }, ['计算机']);
    console.log(allbooks);
// ["计算机", "论语", "大学", "中庸", "孟子", "诗经", "易经"]

map用法

1、格式化数组对象加减key,value

    var a = { "name": "Tom", "age": "18" };
    const b = Object.entries(a).map((v) => {
      return { key: v[0], value: v[1] }
    })
    console.log(b)
    console.log(JSON.stringify(b))
    //数组为: [{"key":"name","value":"Tom"},{"key":"age","value":"18"}]
    var res = b.map(function (obj) {
      var rObj = {};
      rObj[obj.key] = obj.value;
      return rObj;
    });
    console.log(JSON.stringify(res))
    //数组为: [{"name":"Tom"},{"age":"18"}]

3、Object.assign() 的用法

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象 Object.assign(target, ...sources)

  参数:target--->目标对象

      source--->源对象

  返回值:target,即目标对象

var target={name:'anne',age:18};
            var source={address:'beijing'}
            var result=Object.assign(target,source);
            console.log(target,target==result);
// {name: 'anne', age: 18, address: 'beijing'} true