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如何将重复的代码移到同个位置”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!