0

0

JavaScript的重构技巧

hzc

hzc

发布时间:2020-06-23 09:35:58

|

2650人浏览过

|

来源于segmentfault

转载

John Au-Yeung来源:medium译者:前端小智
点赞再看,养成习惯

本文 github https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎star和完善,大家面试可以参照考点复习,希望我们一起有点东西。

JavaScript 是一种易于学习的编程语言,编写运行并执行某些操作的程序很容易。然而,要编写一段干净的JavaScript 代码是很困难的。

在本文中,我们将介绍一些优化条件表达式相关的重构思路。

分解条件表达式

我们可以将长的条件表达式分解成有命名的短小条件表达多,这样有利于阅读。例如我们可能会写这样的代码:

let ieIEMac = navigator.userAgent.toLowerCase().includes("mac") && navigator.userAgent.toLowerCase().includes("ie")

上面的代码太过冗长了,不利于阅读,我们可以把它分解成几个短小且有名字的条件表达式,如下所示:

立即学习Java免费学习笔记(深入)”;

let userAgent = navigator.userAgent.toLowerCase();
let isMac = userAgent.includes("mac");
let isIE = userAgent.toLowerCase().includes("ie");
let isMacIE = isMac && isIE;

合并条件表达式

与上面相反的,如果有多个简短的条件表达式,则可以将它们合并成一个。例如我们可能会写这样的代码:

const x = 5;
const bigEnough = x > 5;
const smallEnough = x < 6;
const inRange = bigEnough && smallEnough;

我们可以这样合并:

const x = 5;
const inRange = x > 5 && x < 6;

因为表达式很短,即使把它们组合在一起也不会使表达式变长,所以我们可以这样做。

合并重复的条件片段

如果我们在条件块中有重复的表达式或语句,则可以将它们移出。例如我们可能会写这样的代码:

if (price > 100) {
  //...
  complete();
} else {
  //...
  complete();
}

我们可以把重复的内容移到条件表达式外面,如下所示:

if (price > 100) {
  //...  
} else {
  //...  
}
complete();

这样,我们不必重复不必要地调用complete函数。

删除控制标志

如果我们在循环中使用了控制标志,那应该会这样代码:

let done = false;
while (!done) {
  if (condition) {
    done = true;
  }
  //...
}

在上面的代码中,done 是控制标,在conditiontrue时,将done设置为true停止while循环。

相对于上面,我们可以使用break来停止循环,如下所示:

let done = false;
while (!done) {
  if (condition) {
    break;
  }
  //...
}

用卫语句代替嵌套条件

卫语句就是把复杂的条件表达式拆分成多个条件表达式,比如一个很复杂的表达式,嵌套了好几层的if-then-else语句,转换为多个if语句,实现它的逻辑,这多条的if语句就是卫语句。

嵌套条件语句很难阅读,所以我们可以使用卫语句代替它们。例如我们可能会写这样的代码:

E购-新零售系统
E购-新零售系统

“米烁云货宝”,是一款基于云计算的Saas模式新零售系统。以互联网为基础,通过大数据、人工智能等先进技术,对商品的生产、流通、销售、服务等环节转型升级改造,进而重塑业态结构与生态圈。并对线上交易运营服务、线下体验购买及现代物流进行深度融合,所形成的零售新模式。

下载
const fn = () => {
  if (foo) {
    if (bar) {
      if (baz) {
        //...
      }
    }
  }
}

我们可以这样优化:

  if (!foo) {
    return;
  }
  if (!bar) {
    return;
  }
  if (baz) {
    //...
  }
}

在上面的代码中,卫语句是:

if (!foo) {
  return;
}

if (!bar) {
  return;
}

如果这些条件为假,它们会提前返回函数,这样,我们就不需要嵌套了。

用多态替换条件

我们可以使用switch语句为不同种类的数据创建相同的子类,而不是使用switch语句对不同类型的数据执行相同的操作,然后针对对象的类型使用不同的方法。

例如我们可能会写这样的代码:

class Animal {
  constructor(type) {
    this.type = type;
  }
  getBaseSpeed() {
    return 100;
  }
  getSpeed() {
    switch (this.type) {
      case ('cat'): {
        return getBaseSpeed() * 1.5
      }
      case ('dog'): {
        return getBaseSpeed() * 2
      }
      default: {
        return getBaseSpeed()
      }
    }
  }
}

我们可以这样重构:

class Animal {
  constructor(type) {
    this.type = type;
  }
  getBaseSpeed() {
    return 100;
  }
}
class Cat extends Animal {
  getSpeed() {
    return super.getBaseSpeed() * 1.5;
  }
}
class Dog extends Animal {
  getSpeed() {
    return super.getBaseSpeed() * 2;
  }
}

switch语句很长时,应该为不同类型的对象定制case块。

采用空对象

如果我们重复检查nullundefined,则可以定义一个代表该类的nullundefined版本的子类,然后使用它。

例如我们可能会写这样的代码:

class Person {
  //...
}

我们可以这样重构:

class Person {
  //...
}
class NullPerson extends Person {
  //...
}

然后,我们将Person设置为nullundefined 的对象属性,而不是将其设置为NullPerson实例。

这样就无需使用条件检查这些值。


推荐教程:《JS教程

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

237

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

499

2024.03.01

if什么意思
if什么意思

if的意思是“如果”的条件。它是一个用于引导条件语句的关键词,用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章,供大家免费阅读。

786

2023.08.22

switch语句用法
switch语句用法

switch语句用法:1、Switch语句只能用于整数类型,枚举类型和String类型,不能用于浮点数类型和布尔类型;2、每个case语句后面必须跟着一个break语句,以防止执行其他case的代码块,没有break语句,将会继续执行下一个case的代码块;3、可以在一个case语句中匹配多个值,使用逗号分隔;4、Switch语句中的default代码块是可选的等等。

544

2023.09.21

Java switch的用法
Java switch的用法

Java中的switch语句用于根据不同的条件执行不同的代码块。想了解更多switch的相关内容,可以阅读本专题下面的文章。

424

2024.03.13

while的用法
while的用法

while的用法是“while 条件: 代码块”,条件是一个表达式,当条件为真时,执行代码块,然后再次判断条件是否为真,如果为真则继续执行代码块,直到条件为假为止。本专题为大家提供while相关的文章、下载、课程内容,供大家免费下载体验。

98

2023.09.25

java多态详细介绍
java多态详细介绍

本专题整合了java多态相关内容,阅读专题下面的文章了解更多详细内容。

15

2025.11.27

java多态详细介绍
java多态详细介绍

本专题整合了java多态相关内容,阅读专题下面的文章了解更多详细内容。

15

2025.11.27

AO3官网入口与中文阅读设置 AO3网页版使用与访问
AO3官网入口与中文阅读设置 AO3网页版使用与访问

本专题围绕 Archive of Our Own(AO3)官网入口展开,系统整理 AO3 最新可用官网地址、网页版访问方式、正确打开链接的方法,并详细讲解 AO3 中文界面设置、阅读语言切换及基础使用流程,帮助用户稳定访问 AO3 官网,高效完成中文阅读与作品浏览。

3

2026.02.02

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WEB前端教程【HTML5+CSS3+JS】
WEB前端教程【HTML5+CSS3+JS】

共101课时 | 8.7万人学习

JS进阶与BootStrap学习
JS进阶与BootStrap学习

共39课时 | 3.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号