JavaScript 中的函数式编程

一、问题背景

例子

下面的代码是一个函数式编程的例子
我们先观察一下里面有哪些特殊的语法点，再一一讲解

const programmerOutput = [
  {
    name: 'Uncle Bobby',
    linesOfCode: 500,
  },
  {
    name: 'Suzie Q',
    linesOfCode: 1500,
  },
  {
    name: 'Jimmy Gosling',
    linesOfCode: 150,
  },
  {
    name: 'Gracie Hopper',
    linesOfCode: 1000,
  },
];

const totalOutput = programmerOutput.reduce(
  (totalLines, output) => totalLines + output.linesOfCode,
  0
);

语法点

我们注意到3个语法点

1. programmerOutput 是一个数组,其元素有 linesOfCode 的字段
2. programmerOutput.reduce 返回给了一个叫totalOutput的变量，可以猜想到返回值是数组programmerOutput各个元素linesOfCode字段的和
3. reduce 函数接受了2个参数，一个是带 "=>" 的函数，一个是0

二、解释

下面一个一个解释

1. reduce

reduce()函数，用于将一个数组(或可迭代对象)中的元素通过指定函数进行计算，最后得到一个单一结果
简单来说就是对一个array执行reduce()方法，就是把其中的function()挨个地作用于array中的元素上，而且上一次的输出会作为下一次的一个输入。

reduce()函数接受2个参数，1个是回调函数function，1个是初始值initialValue

reduce()函数原型

array.reduce(function(accumulator, currentValue, currentIndex, arr), initialValue);
/*
  accumulator:  必需。累计器
  currentValue: 必需。当前元素
  
  currentIndex: 可选。当前元素的索引；                    
  arr:          可选。要处理的数组
  initialValue: 可选。传递给函数的初始值，相当于accumulator的初始值
*/

回调函数

函数原型 function(accumulator, currentValue, currentIndex, arr)
回调函数function接受4个参数, 分别是
累加器 accumulator
当前元素 currentValue
当前索引 currentIndex
原数组 arr
回调函数的作用是将当前元素与累加器进行某种操作，并返回一个新的累加器
如果提供了初始值，就将其作为第一次调用回调函数的累加器的初始值
如果没有提供初始值，则将数组的第一个元素作为累加器的初始值，并从第二个元素开始遍历数组

在这个例子中
数 组: programmerOutput
箭头函数: (totalLines, output) => totalLines + output.linesOfCode作为回调函数, 它接受2个参数，并返回他们的和
初始值 : 0

2. 箭头函数

javascript的箭头函数是为了简化代码，增强可读性，类似的python也有lambda函数
javascript的箭头函数 vs python的lambda函数

# js 中的箭头函数
const add = (x, y) => x + y

# Python 中的 lambda 表达式
add = lambda x, y: x + y

传统写法

如果不用函数式编程，代码将变成这样
比较一下，哪种方式更简洁呢？

const programmerOutput = [
  {
    name: 'Uncle Bobby',
    linesOfCode: 500,
  },
  {
    name: 'Suzie Q',
    linesOfCode: 1500,
  },
  {
    name: 'Jimmy Gosling',
    linesOfCode: 150,
  },
  {
    name: 'Gracie Hopper',
    linesOfCode: 1000,
  },
];

let totalOutput = 0;

for (let i = 0; i < programmerOutput.length; i++) {
  totalOutput += programmerOutput[i].linesOfCode;
}

三、参考资料

https://zhuanlan.zhihu.com/p/65235741
这里有一个演示的GIF
https://vdn6.vzuu.com/SD/5cf291d0-2393-11eb-a8c1-c291194912b4.mp4?pkey=AAXuxzZB3-v5sWqag4u6kqBDfc6OXgXWLAN1yWeid9zgjMjug17PfmOU3XbxgUHEVYFOSWLfQi0Z4DGgT-VNslNz&c=avc.0.0&f=mp4&pu=078babd7&bu=078babd7&expiration=1710951074&v=ks6