作为开发人员，应该让重构贯穿于你的开发日常的每一刻。
为什么这么说？
重构是为了改善软件的设计、结构和实现，同时保留其现有的功能。 重构的潜在优势包括提高代码的可读性和降低复杂度。 这些都可以提高源代码的可维护性，并创建一个更简单、更干净或更有表现力的内部架构或对象模型，从而提高程序的可扩展性。
原因我觉得有两方便，一个是客观的因素，随着技术的不断更新迭代，语言的特性也在更新（朝着更高效便捷的方向）。另一个则是人为因素，不同的人由于开发水平的不同写出来的代码也各尽不同。
在一个团队中你除了要写自己的代码，而且还要接手别人的代码，作为一个leader更要去给别人做code review。
所以，重构是如此的必要，而且悄无声息。
举个例子，最近在看到一段代码后，立刻让我产生重构的冲动。
旧代码如下：
首先定义两个常量，对象和数组
const data = {
Angular: 3,
React: 1,
Vue: 2,
Next: 1,
HTML: 2,
Other: 3
};
const colors = [
'#d17a29',
'#da9554',
'#e3af7f',
'#edcaa9',
'#f6e4d4',
'#204e77'
];
利用for操作，取出以上对象的key和value和数组元素组成新的数组
let sortable = [];
let index = 0;
for (let temp in data) {
sortable.push([temp, data[temp], colors[index] ? colors[index] : '#D3D3D3']);
index++;
}
sortable.sort(function(a, b) {
return b[1] - a[1];
});
最终输出结果：
[
['Angular', 3, '#d17a29'],
['Other', 3, '#204e77'],
['Vue', 2, '#e3af7f'],
['HTML', 2, '#f6e4d4'],
['React', 1, '#da9554'],
['Next', 1, '#edcaa9']
]
从逻辑实现上没有任何问题。但总感觉哪里不对，是不是有更高效的实现方式呢？
重构后的代码
也许是写代码的惯性使然，立马想到使用Map方法可以将数据返回你想要的格式。
但是对象数据格式好像不支持Map方法。
所以我们得先将对象转化成数组
const newOutput = Object.entries(data);
我们将得到以下格式的数组
[
['Angular', 3],
['React', 1],
['Vue', 2],
['Next', 1],
['HTML', 2],
['Other', 3]
]
是不是和最终想要的结果有点类似了，数组的元素中还差了一个color的值，以及最终需要将它们排序。
接着我们根据索引将color的值添加到以上输出结果中
const newOutput = Object.entries(data)
.map(
([title, amount], index) => [
title,
amount,
colors[index] || "#fff"]
);
这里或者使用数组解构更容易理解一点
const newOutput = Object.entries(data)
.map((item, index) => [
...item,
colors[index] || '#fff']
)
.sort((a, b) => b[1] - a[1]);
在取不到值的时候我们给添加了一个默认的颜色值
[
['Angular', 3, '#d17a29'],
['React', 1, '#da9554'],
['Vue', 2, '#e3af7f'],
['Next', 1, '#edcaa9'],
['HTML', 2, '#f6e4d4'],
['Other', 3, '#204e77']
]
最后只剩下一步，我们需要按第二项给数组排序，很容易就想到用sort方法
const newOutput = Object.entries(data)
.map(
([title, amount], index) => [
title,
amount,
colors[index] || "#fff"]
)
.sort((a, b) => b[1] - a[1])
以上代码输出：
[
['Angular', 3, '#d17a29'],
['Other', 3, '#204e77'],
['Vue', 2, '#e3af7f'],
['HTML', 2, '#f6e4d4'],
['React', 1, '#da9554'],
['Next', 1, '#edcaa9']
]
没有问题，两种不同的代码都得到了最终的结果。但是重构后的代码量明显比之前的少了很多，而且结构更严谨。
写代码的过程中要学会举一反三，及时拥抱语言的新特性能给我们带来更好的编程体验。
另：以上代码在
【利好工具】JavaScript及时运行调试工具中运行更佳
网友评论