作者: Philip Roberts 原文鏈接
英文原文：Imperative vs Declarative
先統(tǒng)一一下概念欠啤，我們有兩種編程方式：命令式和聲明式较坛。
我們可以像下面這樣定義它們之間的不同：
- 命令式編程：命令“機器”如何去做事情(how)我抠，這樣不管你想要的是什么(what)，它都會按照你的命令實現(xiàn)。
- 聲明式編程：告訴“機器”你想要的是什么(what)，讓機器想出如何去做(how)占卧。
聲明式編程和命令式編程的代碼例子
舉個簡單的例子，假設(shè)我們想讓一個數(shù)組里的數(shù)值翻倍联喘。
我們用命令式編程風(fēng)格實現(xiàn)华蜒，像下面這樣：
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]
我們直接遍歷整個數(shù)組，取出每個元素豁遭，乘以二叭喜，然后把翻倍后的值放入新數(shù)組，每次都要操作這個雙倍數(shù)組堤框，直到計算完所有元素域滥。
而使用聲明式編程方法，我們可以用 Array.map 函數(shù)蜈抓，像下面這樣：
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利用當(dāng)前的數(shù)組創(chuàng)建了一個新數(shù)組，新數(shù)組里的每個元素都是經(jīng)過了傳入map的函數(shù)(這里是function (n) { return n*2 })的處理昂儒。
map函數(shù)所做的事情是將直接遍歷整個數(shù)組的過程歸納抽離出來沟使，讓我們專注于描述我們想要的是什么(what)。注意渊跋，我們傳入map的是一個純函數(shù)腊嗡；它不具有任何副作用(不會改變外部狀態(tài))，它只是接收一個數(shù)字拾酝，返回乘以二后的值燕少。
在一些具有函數(shù)式編程特征的語言里，對于 list 數(shù)據(jù)類型的操作蒿囤，還有一些其他常用的聲明式的函數(shù)方法客们。例如，求一個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函數(shù)：
var numbers = [1,2,3,4,5]
var total = numbers.reduce (function (sum, n) {
return sum + n
});
console.log (total) //=> 15
reduce函數(shù)利用傳入的函數(shù)把一個list運算成一個值。它以這個函數(shù)為參數(shù)脸侥，數(shù)組里的每個元素都要經(jīng)過它的處理建邓。每一次調(diào)用，第一個參數(shù)(這里是sum)都是這個函數(shù)處理前一個值時返回的結(jié)果睁枕，而第二個參數(shù)(n)就是當(dāng)前元素官边。這樣下來沸手，每此處理的新元素都會合計到sum中，最終我們得到的是整個數(shù)組的和注簿。
同樣罐氨，reduce函數(shù)歸納抽離了我們如何遍歷數(shù)組和狀態(tài)管理部分的實現(xiàn)，提供給我們一個通用的方式來把一個list合并成一個值滩援。我們需要做的只是指明我們想要的是什么栅隐？
聲明式編程很奇怪嗎？
如果你之前沒有聽說過map和reduce函數(shù)玩徊，你的第一感覺租悄，我相信，就會是這樣恩袱。作為程序員泣棋，我們非常習(xí)慣去指出事情應(yīng)該如何運行∨纤“去遍歷這個list”潭辈，“if 這種情況 then 那樣做”，“把這個新值賦給這個變量”澈吨。當(dāng)我們已經(jīng)知道了如何告訴機器該如何做事時把敢，為什么我們需要去學(xué)習(xí)這種看起來有些怪異的歸納抽離出來的函數(shù)工具？
在很多情況中谅辣，命令式編程很好用修赞。當(dāng)我們寫業(yè)務(wù)邏輯，我們通常必須要寫命令式代碼桑阶，沒有可能在我們的專項業(yè)務(wù)里也存在一個可以歸納抽離的實現(xiàn)柏副。
但是，如果我們花時間去學(xué)習(xí)(或發(fā)現(xiàn))聲明式的可以歸納抽離的部分蚣录，它們能為我們的編程帶來巨大的便捷割择。首先，我可以少寫代碼萎河，這就是通往成功的捷徑荔泳。而且它們能讓我們站在更高的層面是思考，站在云端思考我們想要的是什么公壤，而不是站在泥里思考事情該如何去做换可。
聲明式編程語言：SQL
也許你還不能明白，但有一個地方厦幅，你也許已經(jīng)用到了聲明式編程沾鳄，那就是SQL。
你可以把 SQL 當(dāng)做一個處理數(shù)據(jù)的聲明式查詢語言确憨。完全用SQL寫一個應(yīng)用程序译荞？這不可能瓤的。但如果是處理相互關(guān)聯(lián)的數(shù)據(jù)集，它就顯的無比強大了吞歼。
像下面這樣的查詢語句：
SELECT * from dogs
INNER JOIN owners
WHERE dogs.owner_id = owners.id
如果我們用命令式編程方式實現(xiàn)這段邏輯：
//dogs = [{name: 'Fido', owner_id: 1}, {...}, ... ]
//owners = [{id: 1, name: 'Bob'}, {...}, ...] var dogsWithOwners = []
var dog, owner
for(var di=0; di < dogs.length; di++) {
dog = dogs[di]
for(var oi=0; oi < owners.length; oi++) {
owner = owners[oi]
if (owner && dog.owner_id == owner.id) {
dogsWithOwners.push ({
dog: dog,
owner: owner
})
}
}}
}
我可沒說SQL是一種很容易懂的語言圈膏，也沒說一眼就能把它們看明白，但基本上還是很整潔的篙骡。
SQL代碼不僅很短稽坤，不不僅容易讀懂，它還有更大的優(yōu)勢糯俗。因為我們歸納抽離了how尿褪，我們就可以專注于what，讓數(shù)據(jù)庫來幫我們優(yōu)化how得湘。
我們的命令式編程代碼會運行的很慢杖玲，因為需要遍歷所有l(wèi)ist里的每個狗的主人。
而SQL例子里我們可以讓數(shù)據(jù)庫來處理how淘正，來替我們?nèi)フ椅覀兿胍臄?shù)據(jù)摆马。如果需要用到索引(假設(shè)我們建了索引)，數(shù)據(jù)庫知道如何使用索引鸿吆，這樣性能又有了大的提升囤采。如果在此不久之前它執(zhí)行過相同的查詢，它也許會從緩存里立即找到伞剑。通過放手how斑唬，讓機器來做這些有難度的事，我們不需要掌握數(shù)據(jù)庫原理就能輕松的完成任務(wù)黎泣。
聲明式編程：d3.js
另外一個能體現(xiàn)出聲明式編程的真正強大之處地方是用戶界面、圖形缤谎、動畫編程抒倚。
開發(fā)用戶界面是有難度的事。因為有用戶交互坷澡，我們希望能創(chuàng)建漂亮的動態(tài)用戶交互方式托呕，通常我們會用到大量的狀態(tài)聲明和很多相同作用的代碼，這些代碼實際上是可以歸納提煉出來的频敛。
d3.js 里面一個非常好的聲明時歸納提煉的例子就是它的一個工具包项郊，能夠幫助我們使用JavaScript和SVG來開發(fā)交互的和動畫的數(shù)據(jù)可視化模型。
第一次(或第5次斟赚，甚至第10 ＝次)你開發(fā)d3程序時可能會頭大着降。跟SQL一樣，d3是一種可視化數(shù)據(jù)操作的強大通用工具拗军，它能提供你所有how方法任洞，讓你只需要說出你想要什么蓄喇。
下面是一個例子(我建議你看一下這個演示)。這是一個d3可視化實現(xiàn)交掏，它為data數(shù)組里的每個對象畫一個圓妆偏。為了演示這個過程，我們每秒增加一個圓盅弛。
里面最有趣的一段代碼是：
//var data = [{x: 5, y: 10}, {x: 20, y: 5}]
var circles = svg.selectAll('circle')
.data(data)
circles.enter().append('circle')
.attr('cx', function(d) { return d.x })
.attr('cy', function(d) { return d.y })
.attr('r', 0)
.transition().duration(500)
.attr('r', 5)
沒有必要完全理解這段代碼都干了什么(你需要一段時間去領(lǐng)會)钱骂，但關(guān)鍵點是：
首先我們收集了svg里所有的圓，然后把data數(shù)組數(shù)據(jù)綁定到對象里挪鹏。
D3對每個圓都綁定了那些點數(shù)據(jù)有一個關(guān)系表见秽。最初我們只有兩個點，沒有圓狰住，我們使用.enter()方法獲取數(shù)據(jù)點张吉。這里，我們的意圖是畫一個圓催植，中心是x和y肮蛹，初始值是0 ，半秒后變換成半徑為5创南。
為什么我說這很有意思伦忠？
從頭再看一遍代碼，想一想稿辙，我們是在聲明我們想要的圖案是什么樣子昆码，還是在說如何作圖。你會發(fā)現(xiàn)這里根本沒有關(guān)于how的代碼邻储。我們只是在一個相當(dāng)高的層面描述我們想要的是什么：
我要畫圓赋咽，圓心在 data 數(shù)據(jù)里，當(dāng)增加新圓時吨娜，用動畫表示半徑的增加脓匿。
這太神奇了，我們沒有寫任何循環(huán)宦赠，這里沒有狀態(tài)管理陪毡。畫圖操作通常是很難寫，很麻煩勾扭，很讓人討厭毡琉，但這里，d3歸納提取了一些常用的操作妙色，讓我們專注于描述我們想要的是什么桅滋。
現(xiàn)在再看，d3.js很容易理解嗎燎斩？不是虱歪，它絕對需要你花一段時間去學(xué)習(xí)蜂绎。而學(xué)習(xí)的過程基本上需要你放棄去指明如何做事的習(xí)慣，而去學(xué)會如何描述我想要的是什么笋鄙。
最初师枣，這可能是很困難的事，但經(jīng)過一些時間的學(xué)習(xí)后萧落，一些神奇的事情發(fā)生了——你變得非常非常有效率了践美。通過歸納提取how，d3.js能讓你真正的專注說明你想要看到的是什么找岖，讓你在一個個更高的層面解決問題陨倡，解放你的創(chuàng)作力。
聲明式編程的總結(jié)
聲明式編程讓我們?nèi)ッ枋鑫覀兿胍氖鞘裁葱聿迹尩讓拥能浖?計算機/等去解決如何去實現(xiàn)它們兴革。
在很多情況中，就像我們看到的一樣蜜唾，聲明式編程能給我們的編程帶來真正的提升杂曲，通過站在更高層面寫代碼，我們可以更多的專注于what袁余，而這正是我們開發(fā)軟件真正的目標(biāo)擎勘。
問題是，程序員習(xí)慣了去描述how颖榜，這讓我們感覺很好很舒服——強力——能夠控制事情的發(fā)生發(fā)展棚饵，不放走任何我們不能看見不能理解的處理過程。
有時候這種緊盯著how不放的做法是沒問題的掩完。如果我需要對代碼進行更高性能的優(yōu)化噪漾，我需要對what進行更深一步的描述來指導(dǎo)how。有時候?qū)τ谀硞€業(yè)務(wù)邏輯沒有任何可以歸納提取的通用實現(xiàn)且蓬，我們只能寫命令式編程代碼怪与。
但大多數(shù)時候，我們可以缅疟、而且應(yīng)該尋求聲明式的寫代碼方式，如果沒有發(fā)現(xiàn)現(xiàn)成的歸納提取好的實現(xiàn)遍愿，我們應(yīng)該自己去創(chuàng)建存淫。起初這會很難，必定的沼填，但就像我們使用SQL和D3.js桅咆， 我們會長期從中獲得巨大的回報！
非常感謝 @srbaker, @maniacyak 和 @jcoglan 對這篇文章的的建議和補充坞笙。
中文原文出處：（https://kb.cnblogs.com/page/181030/）
