关于javascript:理解-JavaScript-中-Reduce

对于前言

reduce() 是一个有用的函数式编程技术，特地在需要上须要对象或数组降维的时时候。本文将要介绍 reduce() 办法，并比照应用 map() 与 filter()

reduce() 的个别用法：

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

PS：reduce() 第二参数为可选参数，会影响 reduce() 最初返回值的格局

最为常见的用法，即是返回数组中所值的总和，如：

const input = [1, 100, 1000, 10000]
const sum = input.reduce((accumulator, item) => {return accumulator + item}, 0) // 11101

对于 map() 与 reduce()

返回新数组

const numbers = [1, 10, 100]

const map_squared = numbers.map(item => Math.pow(item, 2))  // [1, 100, 10000]

const reduce_squared = numbers.reduce((acc, number) => {acc.push(Math.pow(number, 2))
  return acc
}, []) // [1, 100, 10000]

对于 filter() 与 reduce()

返回过滤数组

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const filter_evenNumbers = numbers.filter(number => number % 2 === 0)
// [2, 4, 6, 8, 10]

const reduce_evenNumbers = numbers.reduce((acc, number) => {if (number % 2 == 0) {acc.push(number)
  }
  return acc
}, [])
// [2, 4, 6, 8, 10]

对于数组转化为对象

需要：须要从数组中统计数据，并最终返回该数据对象

const voters = [{ name: "Bob", age: 30, voted: true},
  {name: "Jake", age: 32, voted: true},
  {name: "Kate", age: 25, voted: false},
  {name: "Sam", age: 20, voted: false},
  {name: "Phil", age: 21, voted: true},
  {name: "Ed", age: 55, voted: true},
  {name: "Tami", age: 54, voted: true},
  {name: "Mary", age: 31, voted: false},
  {name: "Becky", age: 43, voted: false},
  {name: "Joey", age: 41, voted: true},
  {name: "Jeff", age: 30, voted: true},
  {name: "Zack", age: 19, voted: false},
]

// initialVotes 为最终返回的对象的格局，并设置默认值为 0
// *Votes       有选票
// *            无选票
const initialVotes = {
  youngVotes: 0,
  youth: 0,
  midVotes: 0,
  mids: 0,
  oldVotes: 0,
  olds: 0,
}

// key 对象转换
const peersToVotePeers = {
  youth: "youngVotes",
  mids: "midVotes",
  olds: "oldVotes",
}

voters.reduce((acc, voter) => {if(voter.age < 26)
    peers = "youth"
  } else if (voter.age < 36) {peers = "mids"} else {peers = "olds"}
  if (!voter.voted) {
    // 无选票人员 +1
    return {...acc, [peers]: acc[peers] + 1 }
  } else {const votePeers = peersToVotePeers[peers];
    // 统计有选票人员 +1，同时该年龄段人员 +1
    return {
      ...acc,
      [peers]: acc[peers] + 1,
      [votePeers]: acc[votePeers] + 1,
    }
  }
}, initialVotes)

/*
{
  youngVotes: 1,
  youth: 4,
  midVotes: 3,
  mids: 4,
  oldVotes: 3,
  olds: 4
}
 */

对于总结

本文是对于 reduce() 的一些思考，及其与 map() 与 filter() 的比照

总结思考，reduce() 在解决数组对象统计的时候更显劣势

感激浏览

对于参考

• understanding-reduce-in-javascript
• Array.prototype.reduce()