命令式编程和声明式编程

一、命令式编程

命令“机器”如何去做事情(how)，这样不管你想要的是什么(what)，它都会按照你的命令实现。（注重过程）。用详细的命令机器怎么去处理一件事情以达到你想要的结果。
例如你想通过点击改变页面中某一个元素，首先要获取按钮，再给按钮添加点击事件，获取要改变的元素，执行点击函数，改变元素达到自己的目的，这是一步一步的步骤操作，就如同给计算机发布命令，一步一步执行，这就是命令式编程。

二、声明式编程

告诉“机器”你想要的是什么(what)，让机器想出如何去做(how)。（注重结果）

简单的说，你只需要告诉计算机，你要得到什么样的结果，计算机则会完成你想要的结果，以Vue为例，在页面中通过 {{ }} 显示一个data里面的变量，你只需要改变这个变量，页面就会跟着刷新，这就是你只需要结果，vue 内部去处理过程，这就是声明式编程。

假设我们想让一个数组里的数值翻倍，我们用命令式编程风格实现，像下面这样：

var numbers = [1,2,3,4,5]
var doubled = []
for(var i = 0; i < numbers.length; i++) {
  var newNumber = numbers[i] * 2
  doubled.push(newNumber)
}
console.log(doubled)

//=> [2,4,6,8,10]

我们直接遍历整个数组，取出每个元素，乘以二，然后把翻倍后的值放入新数组，每次都要操作这个双倍数组，直到计算完所有元素。

而使用声明式编程方法，我们可以用 Array.map 函数，像下面这样：

var numbers = [1,2,3,4,5]
var doubled = numbers.map(function(n) {
  return n * 2
})
console.log(doubled)

//=> [2,4,6,8,10]

map 利用当前的数组创建了一个新数组，新数组里的每个元素都是经过了传入map的函数(这里是function(n) { return n*2 })的处理。

map函数所作的事情是将直接遍历整个数组的过程归纳抽离出来，让我们专注于描述我们想要的是什么(what)。注意，我们传入map的是一个纯函数；它不具有任何副作用(不会改变外部状态)，它只是接收一个数字，返回乘以二后的值。

在一些具有函数式编程特征的语言里，对于list数据类型的操作，还有一些其他常用的声明式的函数方法。例如，求一个list里所有值的和，命令式编程会这样做：

var numbers = [1,2,3,4,5]
var total = 0
for(var i = 0; i < numbers.length; i++) {
  total += numbers[i]
}
console.log(total) 

//=> 15

而在声明式编程方式里，我们使用 reduce 函数：

var numbers = [1,2,3,4,5]
var total = numbers.reduce(function(sum, n) {
  return sum + n
},0);
console.log(total) 

//=> 15

reduce 函数利用传入的函数把一个 list 运算成一个值。它以这个函数为参数，数组里的每个元素都要经过它的处理。每一次调用，第一个参数(这里是sum)都是这个函数处理前一个值时返回的结果，而第二个参数(n)就是当前元素。这样下来，每此处理的新元素都会合计到sum中，最终我们得到的是整个数组的和。

三、两者优缺点

命令式编程更加的精细化，更严谨，程序也会一丝不苟的执行你的命令。但是操作步骤比较多，代码量大，影响开发效率.

声明式让你可以更关注在状态表现，而不用去考虑底层如何实现, 声明式编程能在特定的更高层面代码领域我们带来效率的提升，程序员只需要对想要的结果进行深思熟虑，程序会自动的解决过程。当然代码看起来更简洁也是大大的满足了众多强迫症程序猿，但同时 他的可读性相较于命令式有点差。