JavaScript函数式编程

• 函数式编程:强调使用纯函数、不可变数据和高阶函数来编写代码
• 作用：
  1.提高代码可读性，更加简洁
  2.更容易测试和调试
  3.提高代码维护性
  4.更好的并发性和并行性
  5.更好的抽象和复用

1.纯函数

• 相同的输入，相同的输出
• 不会修改除了作用域之外的任何变量

纯函数

function add(a, b) {
    return a + b;
}
console.log(add(2, 3));
//输出结果：5

非纯函数

let count = 0;
function increment() {
    return ++count;
}
console.log(increment());
//输出结果：1

2.不可变数据

• 一旦创建就不可以修改
• 一般通过创建新的对象或者是数组来实现数据的不可变性

不可变数据

const person = {
    name: 'Adela',
     age: 21
}
const updatedPerson = {
//...展开运算符可以用来复制一个对象的所有属性到一个新的对象中,他的值不变
    ...person,
     age: 22
}
console.log(person);
//输出结果：{name: 'Adela', age: 21}
console.log(updatedPerson);
//输出结果：{name: 'Adela', age: 22}

3.高阶函数

• 可以接受函数作为参数挥着返回函数的函数
• 常见的高阶函数有 map、filter、reduce 等

function map(array, fn) {
      const result = [];
      for (let i = 0; i < array.length; i++) {
//push() 方法将指定的元素添加到数组的末尾，并返回新的数组长度
           result.push(fn(array[i]))
       }
        return result;
}
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
//x是用numbers里的值计算
const doublenumbers = map(numbers, (x) => x * 2);
console.log(doublenumbers);
//输出结果：[2，4，6，8]

4.函数组合

• 多个函数串联，组成一个新的函数
• compose或pipe函数实现函数组合

// 这个函数接受一个字符串参数 data, 并将其解析为 JavaScript 对象。
// 它使用内置的 JSON.parse() 方法来实现这一功能
const parseJson = (data) => {
    try {
         return JSON.parse(data);
    }catch (error) {
          console.error('Error parsing JSON:', error);
           return null;
      }
};
// 这个函数接受两个参数:一个对象 obj 和一个属性名 prop
// 它返回 obj 对象中 prop 属性的值
const getProperty = (obj, prop) => obj[prop];
// compose 的辅助函数,它允许我们组合多个函数
//1.(...fns) =>: 这部分是一个接受任意数量参数的函数。这里的 fns 是一个包含所有传入函数的数组。
//2.(x, ...args) =>: 这部分是返回的新函数,它接受一个 x 参数和任意数量的额外参数 args。
//3.fns.reduceRight((v, f) => f(v, ...args), x): 这是函数组合的核心实现。
//reduceRight 方法从右到左遍历 fns 数组中的函数。
//对于每个函数 f，它会将 f 应用于当前累积值 v(初始值为 x)和其余参数 ...args。
//这样就可以将多个函数从右到左"组合"成一个新的函数。
//eg:有三个函数 f、g 和 h，并且我们想创建一个新函数 compose(f, g, h)，那么调用这个新函数时,它会先执行 h、然后执行 g、最后执行 f。
const compose = (...fns) => (x, ...args) => fns.reduceRight((v, f) => f(v, ...args), x);
const getUserName = compose(getProperty, parseJson)
const userData = '{"name":"Adela"}';
const userName = getUserName(userData, 'name');
console.log(userName);
//输出结果：Adela

5.柯里化

• 将一个需要多个参数的函数分解成多个函数,每个函数只接受一个参数

常规的加法函数

const add = (a, b) => a + b;
console.log(add(2, 3));
//输出结果：5

进行柯里化后

const add = a => b => a + b;
//首先, 我们调用 add(5) 函数, 得到一个新函数 add5，add5 函数记住了第一个参数 5。
const add5 = add(5);
//当我们调用 add5(3) 时, add5 函数会使用之前记住的 5 和新的参数 3 来计算结果 8。
console.log(add5(3));
//输出结果：8
//同理, 当我们调用 add5(10) 时, 结果是 15
console.log(add5(10));
//输出结果：15