JavaScript命令式和聲明式代碼有哪些區別

這篇文章主要介紹“JavaScript命令式和聲明式代碼有哪些區別”，在日常操作中，相信很多人在JavaScript命令式和聲明式代碼有哪些區別問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JavaScript命令式和聲明式代碼有哪些區別”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

什么是命令式和聲明式代碼?

我們可以把我們寫代碼的方式歸為傾向于兩種風格中的一種。

要說明的是，一個人的代碼從來不會嚴格地歸為一類或另一類，但它是一種有用的方式，指的是我們的代碼方式，根據誰或什么最適合。

編寫的代碼有兩種，稱為命令式代碼或聲明式代碼。這些聽起來很復雜的詞代表了非常簡單的概念：命令式代碼是指我們編寫的代碼更適合計算機，而聲明式代碼是指對人更容易讀懂的代碼。

更具體地說，命令式代碼是指我們告訴JavaScript(或任何你正在編碼的語言)要做什么以及如何做。

命令式代碼以及為什么應避免使用它

命令式編碼是你應該避免的一種樣式。

假設我們有很多人想寫一個生日派對的邀請。先創建我們的人員列表。

接下來，我們也要保存每個書面邀請，因此我們為要放置的邀請函(invitations)創建一個邀請數組。

const people = [‘Doug’, ‘Fred’, ‘Jane’]; const invitations = [];

你可能已經猜到了，我們需要遍歷此數組以實現我們的目標。首先，我們將按照JavaScript生命周期中大部分時間都需要使用的方式：使用for循環。如下：

for (let i = 0; i < people.length; i++) {   invitations[i] = `Hi ${people[i]}, come to my party!`; }

根據我提到的步驟，我們要對一個數組進行循環(迭代)，得到每一個元素，一個人的名字，我們將其添加到一個消息(上面的字符串)中，然后將其添加到一個新的數組中。

但是代碼講的是同樣的故事嗎?

如果我們要讀這段代碼，我們是將一個變量 i 設置為0，檢查它是否小于數組的當前長度，在 i 上加1，將數組的第 i  個值賦值為一個字符串，并將其放在新數組的相同索引中。

這些都是必須的，我們告訴JavaScript做什么和怎么做。所有這些代碼都是正確的。

如果我們運行它，我們將收到所有消息，就像我們想要的一樣。

然而，你對這段代碼的第一直覺(就像我們許多人第一次看到for循環一樣)可能是它看起來不太對。

盡管如此，它無疑是該語言生命周期中最流行的遍歷數組的方式。然而，閱讀和記憶是必要的和具有挑戰性的。

聲明式代碼以及為什么要以聲明式風格編寫

如果我們以聲明性的方式編寫它，那會是什么樣?

聲明式代碼則不同。正如名稱所示，我們用它來聲明我們想要完成的內容，JavaScript會完成它——就這么簡單。

換句話說，它對我們人類是可讀的，而不僅僅是對計算機。事實上，它對其他開發者的可讀性正是我們試圖用更多的聲明式寫作所追求的。

讓我們用一種你可能一開始就想使用的風格重寫我們的代碼，如果你熟悉很多JavaScript有用的數組方法的話。

這是為一系列人員創建一系列邀請的一種(多種)聲明式方法。

const invitations = people.map((person) => `Hi ${person}, come to my party!`);

這一切都在一條線上，但同時也更容易理解。它更加簡潔，易于書寫(和記憶)，同時又非常清晰。

這就是追求聲明式代碼風格所能提供的。

與第一個例子不同的是，我們不需要創建任何混亂的變量(如  i)，也不需要告訴JavaScript如何通過數組。我們只需對數組進行映射(或迭代)，將每個人的名字添加到我們的邀請函中，然后返回給我們。

到此，關于“JavaScript命令式和聲明式代碼有哪些區別”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！