【Javascript修炼篇】JS中的函数式编程

2024.9.20 Javascript 10

介绍:

函数式编程(FP)是一种编程范式,这意味着一种基于一些原则来思考软件构建的方法,比如 纯函数、不可变性、一等与高阶函数、函数组合、闭包、声明式编程、递归、引用透明性、柯里化 和 部分应用

当这些原则有效地应用到 JavaScript 中时,可以使得代码更加模块化、可维护、健壮、易于理解、可测试,并且能够优雅地处理复杂的问题。

这篇文章看起来可能有点长,但不会那么理论化。

让我们开始逐一实验吧:

1. 纯函数:

两条规则:

  1. 给定相同的输入,总是返回相同的结果。
  2. 不产生副作用。

用处: 容易重构,使代码更具灵活性和适应性。

例子 1:

JavaScript
// 不纯的函数。
let a = 4;
const multiplyNumbers = (b) => a *= b;

multiplyNumbers(3);
console.log(a); // 第一次调用:12
> 12
multiplyNumbers(3);
console.log(a); // 第二次调用:36
> 36

// 修改了外部变量,所以不是纯函数。
JavaScript
// 纯函数版本。
const multiplyNumbers = (x,y) => x * y;

multiplyNumbers(2, 3);
> 6

例子 2:

JavaScript
// 不纯的函数。
addNumberarr = (arr, num) => {
arr.push(num);
};
const testArr = [1,2,3];
addNumberarr(testArr, 4);

console.log(testArr);
> [1, 2, 3, 4]

// 修改了输入数组,所以不是纯函数。
JavaScript
// 上面的纯函数版本。
addNumberarr = (arr, num) => {
return [...arr, num];
};
const testArr = [1,2,3];
addNumberarr(testArr, 4);
> [1, 2, 3, 4]

JS 内置的纯函数:

JavaScript
arr.reduce()
arr.map()
arr.filter()
arr.concat()
arr.slice()
arr.each()
arr.every()
... - 扩展语法

JS 内置的非纯函数:

JavaScript
arr.splice()
arr.push()
arr.sort()
Math.random()

2. 不可变性:

一旦创建就不能改变状态的对象。

一个简单的例子就是使用 slice 方法来帮助你轻松理解它的含义。

JavaScript
const arr = [1,2,3,4];

const slicedArray = arr.slice(1,2);

slicedArray
> [2]

arr
> [1, 2, 3, 4]

如果你看上面的例子,slice 并没有改变原始数组 arr。而下面的例子则不同:

JavaScript
const arr = [1,2,3,4];

arr.push(5);
> 5

arr
> [1, 2, 3, 4, 5]

原始数组 arr 被修改了。这并不是说我们不应该使用 push,但是在大多数情况下我们可以避免这种情况。一个简单的例子是:

JavaScript
const arr = [1,2,3,4];

const newArr = [...arr, 5];

arr
> [1, 2, 3, 4]

newArr
> [1, 2, 3, 4, 5]

上面的所有都是简单例子,可能不会造成任何问题。但是,如果我们在整个文件中尽可能多地修改同一个对象,就会带来许多问题。因为我们需要跟踪这个对象被修改了多少次以及以何种方式被修改。

为了解决这个问题,我们需要避免修改对象。

3. 一等函数

一等函数是指把函数当作一等公民的概念,意味着它们被视为常规变量或值。这让函数可以像字符串或数字等其他数据类型一样被操作和使用。这允许函数作为参数传递给其他函数,从其他函数返回值,以及被赋值给变量。JavaScript 支持这一点。

它打开了强大的编程技术的大门,比如高阶函数、函数组合,以及抽象的创建。

4. 高阶函数:

一个函数可以接受另一个函数作为参数或者返回一个函数作为结果,这样的函数被称为高阶函数。

  1. 返回一个函数的函数
JavaScript
const higherOrderFunc = function() {
    return function() {
        return 12;
    }
}

// 返回下面的函数,所以它是高阶函数。
higherOrderFunc(); 
> ƒ () {
        return 12;
    }

higherOrderFunc()();
> 12
  1. 接受一个函数作为参数的函数
JavaScript
const testFunc = function(x) {
    return x + 12;
}

// 接受函数作为参数。
const higherOrderFunc = function(testFunc) {
    return testFunc(8);
}

higherOrderFunc(testFunc);
> 20

例子 1:

JavaScript
function calculate(operation, numbers) {
    return operation(numbers);
}

function addition(numbers) {
    let sum = 0;
    for (const number of numbers) {
        sum+=number;
    }
    return sum;
}

function multiply(numbers) {
    let sum = 1;
    for (const number of numbers) {
        sum*=number;
    }
    return sum;
}

const numbers = [1,2,3,4,5];
console.log(calculate(addition, numbers));
> 15

console.log(calculate(multiply, numbers));
> 120

// calculate(multiply, numbers) - 传递函数作为参数时不加括号。

高阶函数的好处:

减少代码重复
单一职责

在 JavaScript 中,函数可以接受原始类型或对象作为参数并返回相同类型,称为一阶函数。

JS 内置的高阶函数有:

arr.reduce(), arr.forEach(), arr.filter(), arr.map()

5. 函数组合:

这是一种方法,其中将一个函数的结果传给下一个函数。

JavaScript
const add = (x, y) => x+y;

const subtract = (x) => x-4;

const multiply = (x) => x * 8;

// add 的结果传给 subtract,其结果再传给 multiply。
const result = multiply(subtract(add(2, 3)));

result;
> 8

看起来很清晰,但如果我们要一个接一个地调用更多函数会怎么样呢?让我们试试更干净的方法。

JavaScript
const compose = (...functions) => x => functions.reduceRight((total, f) => f(total), x);

const add = x => x+2;

const subtract = x => x-1;

const multiply = x => x * 8;

compose(multiply, subtract, add)(2);
> 24

我们也可以使用 reduce 来实现:

JavaScript
const pipe = (...functions) => x => functions.reduce((total, f) => f(total), x);

const add = x => x+2;

const subtract = x => x-1;

const multiply = x => x * 8;

pipe(add, subtract, multiply)(2);
> 24

pipe – 从左到右执行。
compose – 从右到左执行。

6. 声明式编程:

声明式: 告诉 做什么

命令式: 告诉 怎么做

例子: 找出部门为 ‘justCode’ 的员工及其工资总和。

命令式风格:

JavaScript
const employees = [
{id: 1, name: 'james', dept: 'admin', salary: 10000},
{id: 1, name: 'Tom', dept: 'finance', salary: 10000},
{id: 1, name: 'peter', dept: 'justCode', salary: 12500},
{id: 1, name: 'tunner', dept: 'justCode', salary: 14500},
];

const justCodeDept = [];

// 根据部门名称筛选员工。
for (let i=0; i<employees.length; i++) {
  if (employees[i].dept === 'justCode') {
    justCodeDept.push(employees[i]);
  }
}

// 计算 justCodeDept 员工的工资总和。
let summation = 0;
for (j = 0; j<justCodeDept.length; j++) {
  summation = summation + justCodeDept[j].salary;
}

console.log(summation);

声明式风格:

JavaScript
const employees = [
{id: 1, name: 'james', dept: 'admin', salary: 10000},
{id: 1, name: 'Tom', dept: 'finance', salary: 10000},
{id: 1, name: 'peter', dept: 'justCode', salary: 12500},
{id: 1, name: 'tunner', dept: 'justCode', salary: 14500},
];

console.log(employees.filter(item => item.dept === 'justCode').reduce(((previousValue, currentValue) => previousValue += currentValue.salary), 0));

7. 柯里化:

将接收多个参数的函数拆分成一系列函数,每个函数只接收单个参数。

例子 1:

通常我们写:

JavaScript
function addition(x, y, z) {
    return x + y + z;
}

addition(1, 2, 3);
> 6

柯里化版本:

JavaScript
function addition(x) {
    return function addY(y) {
        return function addZ(z) {
            return x + y + z;
        }
    }
}

addition(1)(2)(3);
> 6

使用箭头函数:

JavaScript
addition = (x) => (y) => (z) => x + y + z;

addition(1)(2)(3);
> 6

例子 2:

JavaScript
function formWelcomNote(name) {
    name = `Hello ${name}, `;
    return function(location) {
        location = `Welcome to ${location},`;
        return function(section) {
            return `${name}${location} Please visit ${section} section`
        }
    }
}

formWelcomNote('Yester')('VK Just Code Articles')('JS Articles');
> 'Hello Yester, Welcome to VK Just Code Articles, Please visit JS Articles section'

我们也可以这样写:

JavaScript
formWelcomNote = (name) => {
    name = `Hello ${name}, `;
    return (location) => {
        location = `Welcome to ${location},`;
        return (section) => {
            return `${name}${location} Please visit ${section} section`
        }
    }
}

formWelcomNote('Yester')('VK Just Code Articles')('JS Articles');
> 'Hello Yester, Welcome to VK Just Code Articles, Please visit JS Articles section'

例子 3:

JavaScript
function calculation(fn) {
    switch (fn) {
        case 'add': return (a, b) => a + b;
        case 'sub': return (a, b) => a - b;
        case 'mul': return (a, b) => a * b;
        case 'div': return (a, b) => a / b;
    }
}
console.log(calculation('mul')(4, 2));

8. 部分应用:

你为一个函数固定一定数量的参数,并生成一个新的带有较少参数的函数。这个新函数可以在稍后的时间用剩下的参数来调用。部分应用有助于创建更加专业和可重用的函数。

例子:

JavaScript
function add(a, b) {
  return a + b;
}

// 部分应用第一个参数
const add2 = add.bind(null, 2);

console.log(add2(5));  // 输出:7 (2 + 5)
console.log(add2(8));  // 输出:10 (2 + 8)

9. 引用透明性:

JavaScript 中的一个表达式可以用它的值来替代,这种特性叫做引用透明性。

JavaScript
const add = (x, y) => x + y;

const multiply = (x) => x * 4;

// add (3, 4) 可以被替换为 7 —— 引用透明性。

multiply(add(3, 4)); 
> 28

multiply(add(3, 4));
> 28
JavaScript
const arr = [];
const add = (x, y) => {
    const addition = x + y;
    arr.push(addition);
    return addition;
}

const multiply = (x) => x * 4;

// 在这里,我们不能用 7 替换 add(3, 4),因为它会影响程序逻辑。
multiply(add(3, 4));
> 28

multiply(add(3, 4));
> 28

10. 闭包:

闭包让你可以从内部函数访问外部函数的作用域。

JavaScript
function outer() {
    const name = 'test';
    function inner() {
        // 'name' 从外部函数可以访问到内部函数中
        console.log(name);
    }
    inner();
}
outer();

> test
JavaScript
function outerAdd(x) {
    return function(y) {
        return x + y;
    };
}

const outer12 = outerAdd(12); // x 为 12.
const outer14 = outerAdd(14); // x 为 14.

const outer12Result = outer12(12); // y 为 12.
console.log(outer12Result);
> 24

const outer14Result = outer14(14); // y 为 14.
console.log(outer14Result);
> 28

或者,你也可以像下面这样使用箭头函数:

JavaScript
outerAdd = x => y => x + y;

const outer12 = outerAdd(12);
const outer14 = outerAdd(14);

const outer12Result = outer12(12);
console.log(outer12Result);
> 24

const outer14Result = outer14(14);
console.log(outer14Result);
> 28

使用闭包的计数器示例:

JavaScript
function outer() {
    let counter = 0;
    return function inner() {
        counter += 1;
        return counter;
    }
}
const out = outer();

console.log(out());
console.log(out());
console.log(out());

> 1
> 2
> 3

11. 递归:

递归是一种编程技巧,在其中函数通过自我调用来解决问题。

例子:

JavaScript
function factorial(n) {
  if (n === 0 || n === 1) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}

console.log(factorial(5));  // 输出:120 (5 * 4 * 3 * 2 * 1)
console.log(factorial(0));  // 输出:1 (按定义)

在这个例子中,factorial 函数计算给定数 n 的阶乘。它使用了 n === 0 和 n === 1 的基本情况,阶乘定义为 1。对于其它任何值的 n,函数递归地调用自身,并将结果乘以 n。

当你调用 factorial(5) 时,递归调用序列如下所示:

JavaScript
factorial(5)
  -> 5 * factorial(4)
       -> 4 * factorial(3)
            -> 3 * factorial(2)
                 -> 2 * factorial(1)
                      -> 1
                 <- 2 * 1 = 2
            <- 3 * 2 = 6
       <- 4 * 6 = 24
  <- 5 * 24 = 120

如果有任何概念上的例子需要补充,请随时评论。

希望通过今天这篇文章,让你对JS中的函数式编程有了更好的理解。并且可以在日常的开发过程中进行灵活应用,以提高开发效率。

相关推荐

    评论

    昵称*

    邮箱*

    网址