重构心得分享----拆分循环

最新推荐文章于 2024-01-22 20:18:41 发布

原创最新推荐文章于 2024-01-22 20:18:41 发布 · 3.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#重构for循环 #拆分for循环

重构学习专栏收录该内容

1 篇文章

订阅专栏

本文通过《重构-改善既有代码的设计》一书，介绍了一种代码优化技巧——循环拆分。通过将单一循环中执行的多个任务拆分为独立的函数，不仅提高了代码的可读性和可维护性，还利用了JavaScript的内置方法如reduce和Math.min，进一步简化了代码。这种重构方法有助于避免业务逻辑间的相互影响，使代码更加清晰和高效。

最近自己再看《重构-改善既有代码的设计》，这是一本关于如何让大家去发现需要重构的代码和如何去进行重构。

先分享一个今天刚刚看的，标题叫拆分循环，作者认为一个循环里面尽可能的只做一件事情。

举一个粒子，比如一个循环里面有两件事，一个是计算收入总值（数据累加），一个是找出最小收入

let total = 0
let data = [15, 25, 3, 65, 15]
let min = data[0]
for (let i = 0; i < data.length; i++) {
 total += data[i]
 if (data[i] < min) {
 min = data[i]
 }
}
console.log(total, min)

对于这样代码，我们首先认为既然可以一次性作为两件事为什么要写两个for循环去做这件事呢？

我先给大家看一下重构后的代码在给大家讲解它那样做的好处是什么

第一次重构如下

function totalData() {
 let total = 0
 for (let i = 0; i < data.length; i++) {
 total += data[i]
 }
 return total
}

function minData() {
 let min = data[0]
 for (let i = 0; i < data.length; i++) {
 if (data[i] < min) {
 min = data[i]
 }
 }
 return min
}

将两件事拆开了，并且封装成了函数

第二次重构

function totalData() {
 return data.reduce((total, p) => total + p)
}

function minData() {
 return Math.min(...data)
}

到这一步在和第一次对比你就会明显发现没有了for循环了取而代之的是管道的形式

这样做的好处是当你需要重新修改某一件事情，你就可以直接写个改件是的业务逻辑，而不用去看这个修改会不会影响到第二件事情。同时使用管道方法替代for循环也是一种代码的提升。