JavaScript如何將重復的代碼移到同個位置

這篇文章主要介紹了JavaScript如何將重復的代碼移到同個位置，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

將重復的代碼移到同個位置

我們應該將重復的代碼提取出來，合并放到同個位置，這樣當有需要修改的，我們只需要改一個地方即可，同時也減少犯錯率。

假設我們有可能很寫出下面的代碼：

const button = document.querySelector('button'); let toggled = true; button.addEventListener('click', () => {   toggled = !toggled;   if (toggled) {     document.querySelector("p").style.color = 'red';   } else {     document.querySelector("p").style.color = 'green';   } })

上面代碼中有兩個document.querySelector(“p”)，我們可以這樣優化，把document.querySelector(“p”)  保存到一個變量中，然后使用該變量即可，如下所示：

const button = document.querySelector('button'); const p = document.querySelector("p"); let toggled = true; button.addEventListener('click', () => {   toggled = !toggled;   if (toggled) {     p.style.color = 'red';   } else {     p.style.color = 'green';   } }

這樣我們就不必寫長長的document.querySelector("p")，只需寫個變量 p 就行了。

另一個常見的代碼實例中的數字，光看數字我們很難知道其表示的含義：

let x = 1; let y = 1; let z = 1;

我們不知道上面這三個一表示什么，所以我們可以移除重復的代碼，并用一個合適的變量名來表示，如下所示：

const numPeople = 1; let x = numPeople; let y = numPeople; let z = numPeople;

這樣我們就可以知道 numPeople 的值為1，其表示的人的數量。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“JavaScript如何將重復的代碼移到同個位置”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!