高阶函数（一）reduce的理解和使用

要学习函数式编程，首先得学会使用高阶函数，javascript的函数的参数可以是另一个函数，这种函数被称为高阶函数。数组中的reduce方法也是高阶函数。

reduce()将会对数组的元素从左到右依次执行reduce函数，然后返回一个累计的值。

reduce方法接收两个参数，第一个参数是回调函数，第二个参数是初始值。reduce函数接收四个参数。如下： reduce参数

//有初始值
var total = [ 1, 2, 3 ,4].reduce(( acc, cur , currentIndex, arr) => {
  console.log('累计为'+acc+'  累积到当前元素'+cur+'   当前元素索引'+currentIndex+'   源数组'+arr)
    return acc + cur
}, 0);
console.log(total)   // 6

// 没有初始值
var total = [ 1, 2, 3 ,4].reduce(( acc, cur , currentIndex, arr) => {
  console.log('累计为'+acc+'  累积到当前元素'+cur+'   当前元素索引'+currentIndex+'   源数组'+arr)
    return acc + cur
});
console.log(total)   // 6

上面是一个简单的数组求和的示例，其中acc是累计的值，cur是当前的元素。初始值为0。

执行结果(有初始值)
执行结果（没有初始值） 对没有初始值的空数组使用reduce方法，会报错： 没有初始值的空数组报错信息

扁平化数组

const array = [[0, 1], [2, 3], [4, 5]]
const flatten = arr => {
  return arr.reduce((a, b) => {
    return a.concat(b)
  }, [])
}
console.log(flatten(array)); // [0, 1, 2, 3, 4, 5]

//使用递归解决多层数组问题
const array = [[0, [111, 222], 1], [2, [333, [444, 555]], 3], [4, 5]]

const flatten = arr => {
  return arr.reduce((a, b) => {
    if (b instanceof Array) {
      return a.concat(flatten(b))
    }
    return a.concat(b)
  }, [])
}
console.log(flatten(array)); // [0, 111, 222, 1, 2, 333, 444, 555, 3, 4, 5]

vue中使用filter时，对于数组的处理成键值对的形式

const calendarTypeOptions = [
  { key: 'CN', display_name: 'China' },
  { key: 'US', display_name: 'USA' },
  { key: 'JP', display_name: 'Japan' },
  { key: 'EU', display_name: 'Eurozone' }
]

// arr to obj, such as { CN : "China", US : "USA" }
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name
  return acc
}, {})
console.log(calendarTypeKeyValue)
//[
//  { CN: 'China' },
//  { US: 'USA' },
//  { JP: 'Japan' },
//  { EU: 'Eurozone' }
//]

数组去重

const arr = ['1', 'a', 'c', 'd', 'a', 'c', '1']
const afterUnique = arr.reduce((all, current) => {
  if (!all.includes(current)) {
    all.push(current)
  }
  return all
}, [])
console.log(afterUnique); //  ["1", "a", "c", "d"]