有哪几种语言做的网站,外贸企业网站,镇江专业网站制作,体育网站建设规划作为开发人员#xff0c;应该让重构贯穿于你的开发日常的每一刻。
为什么这么说#xff1f; 重构是为了改善软件的设计、结构和实现#xff0c;同时保留其现有的功能。 重构的潜在优势包括提高代码的可读性和降低复杂度。 这些都可以提高源代码的可维护性#xff0c;并创建…作为开发人员应该让重构贯穿于你的开发日常的每一刻。
为什么这么说 重构是为了改善软件的设计、结构和实现同时保留其现有的功能。 重构的潜在优势包括提高代码的可读性和降低复杂度。 这些都可以提高源代码的可维护性并创建一个更简单、更干净或更有表现力的内部架构或对象模型从而提高程序的可扩展性。 原因我觉得有两方便一个是客观的因素随着技术的不断更新迭代语言的特性也在更新朝着更高效便捷的方向。另一个则是人为因素不同的人由于开发水平的不同写出来的代码也各尽不同。
在一个团队中你除了要写自己的代码而且还要接手别人的代码作为一个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及时运行调试工具中运行更佳
