声明式编程 命令式编程

声明式编程

编程范式有很多种，但核心差异往往在于思维方式的转变。声明式编程就是这样一个典型的例子——它把关注点从“如何做”转向了“做什么”。换句话说，开发者不再需要事无巨细地告诉机器每一步该怎么走，而是直接描述想要的结果，至于底层怎么实现，那是计算机的事。

这样做的好处是显而易见的：避免了各种副作用。这里说的副作用，通常指方法不是纯函数，内部状态的变化可能会对外部变量造成干扰。声明式编程不关心对象的实现细节，只关心在执行过程中，计算机应该完成什么任务。举个例子，当我们用正则表达式做匹配时，我们只需要关注正则表达式要匹配什么内容，而不用关心它底层是怎么一步步去匹配的。同理，HTML标签也是声明式编程的一种体现——我们只需要告诉计算机我们声明了什么元素，它自然就会渲染出来，我们根本不需要管它内部如何实现。典型的声明式编程应用还包括数据库查询语言SQL等。

// 声明式编程：告知机器做什么，隐藏具体的实现细节
let arr = [1, 2, 3, 4, 5];
arr.filter((item) => item % 2 == 0);

// 命令式编程：关注实现过程
let arr = [1, 2, 3, 4, 5];
let result = [];
for(let i=0, len = arr.length; i < len; i++) {
    let cacheItem = arr[i];
    if( cacheItem% 2 == 0 ) {
        result.push(cacheItem);
    }
}

// 函数式编程：纯函数实现
let arr = [1, 2, 3, 4, 5];
function findOddNumber(resource) {
    let result = [];
    for(let i=0, len = arr.length; i < len; i++) {
        let cacheItem = arr[i];
        if( cacheItem% 2 == 0 ) {
            result.push(cacheItem);
        }
    }
    return result;
}
findOddNumber(arr);

在React中，这种声明式的思想同样无处不在。比如下面这个例子，我们声明了一个组件，里面管理着一些数据，然后通过JSX告诉React要渲染什么，至于DOM如何更新，完全交给框架处理。

命令式编程

命令式编程的关注点与声明式编程正好相反。它更强调实现的细节，核心思想是“一步一步告诉计算机先做什么，再做什么”。你可以把它理解为，以命令为主，给机器提供一条又一条的命令序列，让机器原封不动地执行。程序执行的效率，很大程度上取决于执行命令的数量。因此，我们才会看到大O表示法这类用来衡量时间、空间复杂度的符号。

还是用刚才的例子，如果换成命令式的方式来添加一条信息，代码会变得非常具体和冗长：

添加一条信息



    
西安
    
疫情

函数式编程

函数式编程其实是声明式编程的一个子集，因为它们的思想是一致的：只关注“做什么”，而不是“怎么做”。但函数式编程在声明式的基础上，还充分利用了Ja vaScript中函数可以作为参数传递的特性。它最核心的特点就是“函数第一位”，意思是函数可以出现在任何地方，像普通变量一样被传递和使用。

函数式编程有几个关键特性，值得我们深入理解：

（a）不可变性：指的是函数不能有副作用。如果需要修改数据，必须克隆一份新的备份数据，然后在备份上进行处理，原始数据不受影响。

（b）纯函数：纯函数始终接受一个或多个参数，并基于这些参数计算后返回数据或函数。它不会修改外部状态，也不会产生副作用。

（c）数据转换：对传递进来的数据，先进行克隆备份，然后对备份进行数据处理，最终返回一个全新的对象。这样做的好处是彻底避免了副作用。

（d）闭包与高阶函数：高阶函数是指那些将函数作为参数，或者返回一个函数的函数。闭包的概念在这里就不展开了，但它是实现高阶函数的基础。

（e）递归：递归是一种函数在满足一定条件之前，不断调用自身的技术。它在函数式编程中经常用来替代循环。

（f）组合：组合是一种常用的混合函数模式，它可以将多个对象或函数混合在一起，形成一个全新的函数或对象，从而实现更复杂的功能。