命令式编程是你如何做某事，而声明式编程更像是你做了什么。

这个定义听起来很有道理……一旦你真正了解了命令式和声明式编程之间的区别——但很有可能你并不了解，这就是为什么你在阅读这篇文章。

这就像试图回答“先有鸡还是先有蛋”的问题一样？除了似乎每个人都认为是先有鸡，但你甚至不喜欢吃蛋，你很困惑。

实际上，这里面隐藏着一些有用的信息。首先，让我们看看这个定义的价值，将其从编程的语境中拿出来，看一个现实生活的例子。
你来到酒店，走向前台并说……

  • 命令式（如何）
    我看到那张桌子是空的。我和我丈夫要过去那边坐下来。

  • 声明式（做什么）
    两个人的桌子，请。

命令式方法关注的是你实际上要如何获得一个座位。你需要列出步骤，以便展示你如何得到一张桌子。声明式方法更关注你想要什么，也就是两个人的桌子。

对酒店员工的声明性回应（“两个人的桌子，请”）假设酒店员工知道所有获得桌子的命令式步骤。

现在，我们将尝试从现实生活到代码领域。让我们看一些天生具有声明性的编程语言和那些更倾向于命令式的编程语言。

  • 命令式

C
C++
Java

  • 声明式

HTML
SQL

  • 两者都有

JavaScript
C#
Python

通过简要查看这两个例子，你清楚地了解了发生了什么。它们都是声明式的。它们关注的是你想要完成的事情，而不是你希望如何完成。

你描述了你想要实现的目标，而不是告诉如何去做。选择所有住在墨西哥的用户的实现已经从你抽象出来。你不需要关心网页浏览器如何解析你的文章元素并将其显示到屏幕上。

你的目标是墨西哥用户或网站上的一个新的标题和段落。

到目前为止，一切顺利。现在让我们来看一些更实用的 JavaScript例子。

以下是3个面试类型的问题。我们将以命令式的方式回答它们，就好像我们关注的是如何完成。

1.编写一个名为 double 的函数，它接受一个数字数组，并返回一个新数组，其中包含该数组中每个项目的两倍 -double([1,2,3]) // [2,4,6]。

function double(arr) {
  let results = [];
  for (let i = 0; i < arr.length; i++) {
    results.push(arr[i] * 2);
  }
  return results;
}

2.编写一个名为 add 的函数，它接受一个数组并返回该数组中每个项目相加的结果 -add([1,2,3]) // 6

function add(arr) {
  let result = 0;
  for (let i = 0; i < arr.length; i++) {
    result += arr[i];
  }
  return result;
}

3.使用jQuery（或原生 JavaScript），为 id 为 btn 的元素添加点击事件处理程序。单击时，根据元素的当前状态切换（添加或移除）highlight类，并更改文本为 Add Highlight 或Remove Highlight。

$("#btn").click(function () {
  $(this).toggleClass("highlight");
  $(this).text() === "Add Highlight"
    ? $(this).text("Remove Highlight")
    : $(this).text("Add Highlight");
});

通过检查这三个命令式示例共有的特点，我们将能够更好地识别它们究竟是如何命令式的。

  • 最明显的共同点是它们描述了如何去做某事。在每个例子中，我们要么明确地遍历一个数组，要么明确地列出了实现我们想要的功能的步骤。

  • 如果你不习惯以声明式甚至更具体地说是函数式的方式思考，这个可能不太明显。在每个例子中，我们都在改变一些状态。

  • 这一点有点主观，但对我来说，上面的代码不太易读。我不能仅仅瞥一眼代码就理解发生了什么。我的大脑需要逐行阅读代码，就像一个解释器一样，同时还需要考虑代码所处的上下文（可变数据的另一个负面影响）。

现在，让我们来看一些声明式的例子。目标是修复上述所有问题。因此，每个例子都需要描述发生了什么，不能改变状态，并且应该一目了然地易读。

  1. 编写一个名为double的函数，它接受一个数字数组，并返回一个新数组，其中包含该数组中每个项目的两倍 —double([1,2,3]) // [2,4,6]。

function double(arr) {
  return arr.map((item) => item * 2);
}

  1. 编写一个名为add的函数，它接受一个数组并返回该数组中每个项目相加的结果 — add([1,2,3]) // 6

function add(arr) {
  return arr.reduce((prev, current) => prev + current, 0);
}

  1. 为具有id为btn的元素添加一个点击事件处理程序。点击时，切换（添加或移除）highlight类，同时根据元素的当前状态更改文本为“Add Highlight”或“Remove Highlight”。

<Btn
  onToggleHighlight={handleToggle}
  highlight={highlight}>
    {buttonText}
</Btn>

请注意，在前两个示例中，我们利用了JavaScript的内置map和reduce方法。这回到了我们之前看到的内容——大多数声明式解决方案都是对一些命令式实现的抽象。

在每个示例中，我们描述了我们想要发生的事情，而不是如何实现（我们不知道map和reduce是如何实现的，我们可能也不关心）。我们没有改变任何状态。所有的变化都被抽象在map和reduce内部。它也更可读（一旦你习惯了map和reduce）。
现在，最后一个示例呢？
我使用了React —— 但请注意，所有三个命令式错误仍然得到了修复。React的真正之美在于你可以创建声明式用户界面——只需根据你的状态描述你想要的UI样式。

声明式代码的另一个不太提及的好处是，你的程序可以是与上下文无关的。这意味着因为你的代码关心的是最终目标——而不是达成目标所需的步骤——相同的代码可以在不同的程序中使用，并且工作得很好。

看看我们上面的所有三个示例。我们可以在任何想要的程序中使用这两个函数和组件。它们是程序无关的。这在命令式代码中很难做到，因为通常情况下，根据定义，命令式代码依赖于当前状态的上下文。

函数式编程是声明式编程的一个子集。

建议你在JavaScript中更加熟悉函数式编程技术。从.map、.reduce、.filter开始，逐步学习。要改进代码库，没有比使其更声明式更容易实现的了

在我们结束之前，这里是一些关于命令式与声明式编程的其他定义，这些定义可能会有所帮助。

  • 声明式编程是“在符合开发者的思维模型而不是机器的操作模型的语言中编程的行为。”

  • 声明式编程是使用声明来进行编程，即声明性语句。

  • 声明性属性是指每个特定模块语义只能存在一个可能的语句集。命令式属性是其对偶，其中在组合下语义不一致和/或可以用语句集的变化来表达。

  • 声明性语言与命令式语言相对，后者指定了对计算机内部状态的显式操作；或者指定了一个明确的步骤序列来跟随。

  • 在计算机科学中，声明式编程是一种表达计算逻辑而不描述其控制流的编程范式。

  • 正则表达式是100%声明式的，因为在执行模式时是不可跟踪的。