日常开发之重构

简介: 作为开发人员,应该让重构贯穿于你的开发日常的每一刻。

作为开发人员,应该让重构贯穿于你的开发日常的每一刻。


为什么这么说?

重构是为了改善软件的设计、结构和实现,同时保留其现有的功能。 重构的潜在优势包括提高代码的可读性和降低复杂度。 这些都可以提高源代码的可维护性,并创建一个更简单、更干净或更有表现力的内部架构或对象模型,从而提高程序的可扩展性。


原因我觉得有两方便,一个是客观的因素,随着技术的不断更新迭代,语言的特性也在更新(朝着更高效便捷的方向)。另一个则是人为因素,不同的人由于开发水平的不同写出来的代码也各尽不同。


在一个团队中你除了要写自己的代码,而且还要接手别人的代码,作为一个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']
]

没有问题,两种不同的代码都得到了最终的结果。但是重构后的代码量明显比之前的少了很多,而且结构更严谨。

写代码的过程中要学会举一反三,及时拥抱语言的新特性能给我们带来更好的编程体验。




目录
相关文章
|
机器学习/深度学习 人工智能 监控
2000 张人脸眼部检测数据集 | 标注规范、数据划分与应用场景
本 人脸眼部检测数据集(2000 张图片已划分、已标注),以中小规模的精细化标注为核心,兼顾多样性与实用性,能够满足从学术研究到工程落地的多种需求。无论是初学者进行深度学习实验,还是科研人员做算法对比,抑或企业在产品开发阶段进行原型验证,该数据集都能提供坚实的数据支撑。
|
物联网 智能硬件
物联卡是什么
物联卡,专为物联网设计的通信介质,由运营商提供给企业用户,用于智能终端联网。基于物联网专网,支持短信、数据、语音等服务。广泛应用于共享单车、移动支付等领域。具备流量池管理功能,可作为身份验证。购买时需注意真伪,确保合法合规使用。它是物联网技术的关键,保障了设备间稳定可靠的数据通信。
物联卡是什么
|
数据采集 分布式计算 大数据
Pandas数据清洗:缺失值处理
本文详细介绍了Pandas库中处理缺失值的方法,包括检测缺失值、删除缺失值、填充缺失值和插值法填充缺失值。通过基础概念和代码示例,帮助读者理解和解决数据清洗中常见的缺失值问题。
1460 80
|
Oracle 关系型数据库 Java
银河麒麟v10安装达梦数据库
银河麒麟v10安装达梦数据库
3165 1
|
测试技术 调度 C语言
大并发下的高性能编程 – 改进的(用户态)自旋锁
前言 多线程程序中,锁的使用往往成为系统性能的关键。在做地址可视化项目的时候,由于内存管理部分需要频繁的更新内存的引用计数,所以产生了使用自旋锁的想法,这篇文章我们从自旋锁的性能开始说起,由浅入深的给出了一种改进的自旋锁的实现。
2436 0
|
存储 关系型数据库 MySQL
【高频】什么是索引的下推和覆盖
【高频】什么是索引的下推和覆盖
1088 2
|
机器学习/深度学习 算法框架/工具 计算机视觉
经典神经网络 | ResNet 论文解析及代码实现
经典神经网络 | ResNet 论文解析及代码实现
经典神经网络 | ResNet 论文解析及代码实现
|
存储 设计模式 Java
第18篇:Java的类变量、类方法;static 关键字;静态导入;初始化块;静态初始化块;单例模式
☘️ 被static修饰的成员变量可叫做:类变量、静态变量、静态字段 ☘️ 类变量在程序运行过程中只占用一份固定的内存(存储在方法区) ☘️ 可通过类名访问 ☘️ 可通过引用变量名访问(不推荐)
316 0
第18篇:Java的类变量、类方法;static 关键字;静态导入;初始化块;静态初始化块;单例模式
|
芯片
第六次笔记:ROM
第六次笔记:ROM
156 0
第六次笔记:ROM
|
JavaScript 前端开发
重学Vue【createElement函数做了什么?】
重学Vue源码,根据黄轶大佬的vue技术揭秘,逐个过一遍,巩固一下vue源码知识点,毕竟嚼碎了才是自己的,所有文章都同步在 公众号(道道里的前端栈) 和 github 上。
364 0