这里借用菲利普·罗伯茨的一句话:

命令式编程告诉机器如何做某事(导致你想要发生的事情) 声明性编程告诉机器你想要发生什么(然后计算机找出如何去做)

两个例子:

1. 将数组中的所有数字加倍

命令式地:

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]

声明:

var numbers = [1,2,3,4,5]

var doubled = numbers.map(function(n) {
  return n * 2
})
console.log(doubled) //=> [2,4,6,8,10]

2. 对列表中的所有项求和

命令式地

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

以声明的方式

var numbers = [1,2,3,4,5]

var total = numbers.reduce(function(sum, n) {
  return sum + n
});
console.log(total) //=> 15

请注意，命令式示例涉及如何创建一个新变量，改变它，并返回新值(即，如何使某事发生)，而声明式示例执行给定的输入，并根据初始输入返回新值(即，我们想要发生什么)。

这里和其他在线帖子的答案提到了以下内容:

使用声明式编程，您编写的代码描述您想要的东西，但不一定是如何得到它 您应该更喜欢声明式编程而不是命令式编程

他们没有告诉我们如何实现这一目标。为了使部分程序更具声明性，其他部分必须提供抽象来隐藏实现细节(即命令式代码)。

例如，LINQ比循环(for, while等)更具声明性，例如，你可以使用list. where()来获得一个新的过滤列表。为了实现这一点，微软已经完成了LINQ抽象背后的所有繁重工作。

事实上，函数式编程和函数式库更具有声明性的原因之一是因为它们抽象了循环和列表创建，隐藏了所有实现细节(很可能是带有循环的命令式代码)。

在任何程序中，都将同时拥有命令式代码和声明式代码，并且应该将所有命令式代码隐藏在特定于领域的抽象后面，以便程序的其他部分可以声明性地使用它们。

最后，尽管函数式编程和LINQ可以使您的程序更具声明性，但您总是可以通过提供更多的抽象来使程序更具声明性。例如:

// JavaScript example

// Least declarative
const bestProducts = [];
for(let i = 0; i < products.length; i++) {
    let product = products[i];
    if (product.rating >= 5 && product.price < 100) {
        bestProducts.push(product);
    }
}


// More declarative
const bestProducts = products.filter(function(product) {
    return product.rating >= 5 && product.price < 100;
});

// Most declarative, implementation details are hidden in a function
const bestProducts = getBestProducts();

另外，声明式编程的极端是发明新的领域特定语言(DSL):

字符串搜索:正则表达式而不是自定义命令式代码 js: JSX而不是直接的DOM操作 AWS CloudFormation:用YAML代替CLI 关系型数据库:用SQL代替旧的读写api，如ISAM或VSAM。

这里借用菲利普·罗伯茨的一句话:

命令式编程告诉机器如何做某事(导致你想要发生的事情) 声明性编程告诉机器你想要发生什么(然后计算机找出如何去做)

两个例子:

1. 将数组中的所有数字加倍

命令式地:

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]

声明:

var numbers = [1,2,3,4,5]

var doubled = numbers.map(function(n) {
  return n * 2
})
console.log(doubled) //=> [2,4,6,8,10]

2. 对列表中的所有项求和

命令式地

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

以声明的方式

var numbers = [1,2,3,4,5]

var total = numbers.reduce(function(sum, n) {
  return sum + n
});
console.log(total) //=> 15

请注意，命令式示例涉及如何创建一个新变量，改变它，并返回新值(即，如何使某事发生)，而声明式示例执行给定的输入，并根据初始输入返回新值(即，我们想要发生什么)。

命令式编程是显式地告诉计算机做什么，以及如何做，比如指定顺序等

C#:

for (int i = 0; i < 10; i++)
{
    System.Console.WriteLine("Hello World!");
}

说明性是指你告诉计算机做什么，而不是如何做。Datalog / Prolog是在这方面首先想到的语言。基本上所有东西都是声明性的。你不能保证秩序。

c#是一种更命令式的编程语言，但某些c#特性更具有声明性，如Linq

dynamic foo = from c in someCollection
           let x = someValue * 2
           where c.SomeProperty < x
           select new {c.SomeProperty, c.OtherProperty};

同样的东西也可以写成命令式:

dynamic foo = SomeCollection.Where
     (
          c => c.SomeProperty < (SomeValue * 2)
     )
     .Select
     (
          c => new {c.SomeProperty, c.OtherProperty}
     )

(例子来自维基百科Linq)

这只是一个实际的例子，说明为什么CSS是声明式的，而JavaScript是命令式的。

假设我们有这个导航栏，用户当前正在查看“探索”选项，所以它被标记为当前选中。

<ul>
  <li class="selected">
    <p>Explore</p>
  </li>
  <li>
    <p>Suggestions</p>
  </li>
</ul>

我们希望当前选择的选项的标题是蓝色的，我们如何实现这与CSS和JavaScript?

CSS

li.selected > p {
  color: blue;
}

李在这里。Selected > p声明了我们想要属性颜色的元素的模式:蓝色;待应用。结果是“探索”用蓝色突出显示，而“建议”没有。注意，我们的代码描述了我们想要发生什么，而不是如何发生。CSS选择器引擎如何找到“探索”?我们不知道，通常也不在乎。

JavaScript

let liElements = document.getElementsByTagName("li")
for (let i = 0; i < liElements.length; i++) {
  if (liElements[i].className === "selected") {
    let children = liElements[i].childNodes
    for (let j = 0; j < children. length; j++) {
      let child = children[j]
      if (child.nodeType === Node.ELEMENT_NODE && child.tagName === "P") {
        child.setAttribute("style", "color: blue")
      }
    } 
  }
}

这段代码要长得多，也更难理解。除此之外，它将蓝色应用于所选选项，但当所选类被删除时，它永远不会取消应用它。蓝色只有在页面重新加载时才会重置。注意，在这段代码中，我们一步一步精确地指定了需要做什么以及如何做。

结论

每种编程范例都有其优点。

CSS(声明)

简洁的 作为程序员，我们不能控制CSS内核如何做我们需要的事情。这给了CSS核心开发人员在任何时候改变CSS选择器实现的机会。为什么CSS核心需要改变?也许，CSS开发人员找到了一种更快的方法来应用属性。

JavaScript(必须)

定制。我们控制代码如何实现目标的所有方面。 适合解决各种各样的问题

我喜欢剑桥一门课程的解释和他们的例子:

声明性-指定要做什么，而不是如何做 例如:HTML描述的是什么应该出现在网页上，而不是它应该如何在屏幕上绘制 命令式-同时指定“什么”和“如何” int x;-什么(陈述性的) x = x + 1;——如何