Luna's Blog

宣告式 vs 命令式的差別

接續上篇的函式導向程式設計，函式導向是屬於宣告式程式設計的一個分支。

宣告式程式設計：它們建造電腦程式的結構和元素，表達計算的邏輯而不用描述它的控制流程。
命令式程式設計：最大的特點是其每行代碼都是一條具體的指令，讓計算機執行具體的操作，通過一系列指令的疊加完成複雜的任務。差異在於宣告式注重於表達「該做何事(What)」，而命令式則是「如何達成(How)」。

舉例說明：

下列這段程式碼，我要讓陣列裡的每個元素乘於 2，並返回新陣列，所以用 for 迴圈逐一檢查陣列中的元素，並預設一個空陣列把乘好的數字加進新陣列裡，這就是命令式風格關注的重點在於程式該如何達成這個目的，然而當程式碼出現一堆 for、if 等邏輯，通常不太容易了解程式的目的，因此命令式風格必須仰賴大量的註解，才能較好的維護。

const list = [1, 2, 3, 4, 5];
let result = [];
for (let i = 0; i < list.length; i++) {
  result.push(list[i] * 2);
}
console.log(result); //[ 2, 4, 6, 8, 10 ]

同樣的想把陣列裡的每個元素乘於 2，如果用宣告式的方式，你會看到使用了 Array.map()這個方法，透過呼叫 Array.map()，來對陣列裡的每個元素做事，並且 Array.map()會回傳一個新的陣列，所以我不需要預設空陣列。實際上宣告式描述該做何事(What)，然而該任務的細節(How)隱藏在.map()的抽象層之下，對閱讀程式碼的人而言，宣告式的語法通常容易理解，因為它描述了程式碼做了什麼，而非對任務的細節。

const result = (arr) => {
  return arr.map((num) => num * 2);
};
const list = [1, 2, 3, 4, 5];
console.log(result(list)); // [2, 4, 6, 8, 10]

架設想要建構一個 DOM，命令式的實作如下：

const target = document.getElementById("target");
const wrapper = document.createElement("div");
const headline = document.createElement("h1");

headline.innerText = "Hello World";
wrapper.appendChild(headline);
target.appendChild(wrapper);

在上述的程式碼中，先抓取目標再建構元素，接著把建構的元素一一加入 DOM 中。這樣的程式碼必然難以作出修改、也難以維護，甚至難以閱讀。

接著透過宣告式的 React 元件來建構 DOM:

const { render } = ReactDOM;
const Welcome = () => (
  <div>
    <h1>Hello World</h1>
  </div>
);
render(<Welcom />, document.getElementById("target"));

在以上程式碼，Welcome 描述了我們想要建構的元素，接著 render()呼叫 Welcome 建構出元素並加入 DOM，隱藏所有操作巢狀結構的實作細節。

React-在開始使用React要了解的事之三「宣告式程式設計」

宣告式 vs 命令式的差別

舉例說明：