JavaScript 条件判断使用技巧详解

目录
  • 引言
  • 避免直接使用字符串作为条件
  • 使用 Object
  • 不符合预期，提前 return
  • 使用 Map 配合 Object
  • Map 也可以存储函数
  • 尽量避免三目表达式和 switch

引言

本文花费很短的时间来介绍一下在 JavaScript 中如何编写更简单的条件判断，帮助你编写更简洁的代码和可读性更高的代码。

假如我们有一个颜色值转换十六进制编码的函数。

function convertToHex(color) {
  if (typeof color === 'string') {
    if (color === 'slate') {
      return '#64748b'
    } else if (color === 'gray') {
      return '#6b7280'
    } else if (color === 'red') {
      return '#ef4444'
    } else if (color === 'orange') {
      return '#f97316'
    } else if (color === 'yellow') {
      return '#eab308'
    } else if (color === 'green') {
      return '#22c55e'
    } else {
      return '#ffffff'
    }
  } else {
    return '#ffffff'
  }
}

这个函数的作用很简单，就是传入颜色字符串，然后返回对应的十六进制，如果传入的不是一个字符串，或者什么都没传递，那么返回白色的十六进制。

接下来我们就开始对这段代码进行优化。

避免直接使用字符串作为条件

直接使用字符串作为条件有个问题，就是当我们拼写错误时，就会很尴尬。

convertToHex("salte")

为了避免这种错误，我们可以使用常量。

const Colors = {
	SLATE: 'slate',
  GRAY: 'gray',
  // ...
}
function convertToHex(color) {
  if (typeof color === 'string') {
    if (color === Colors.SLATE) {
      return '#64748b'
    } else if (color === Color.GRAY) {
      return '#6b7280'
    }
    // ...
  } else {
    return '#ffffff'
  }
}
convertToHex(Colors.SLATE)

如果你是用 typescript 的话，那么可以直接使用枚举。

使用 Object

其实从上面的代码中不难发现，我们可以直接把十六进制的值存储到对象的 value 中。

const Colors = {
	SLATE: '#64748b',
  GRAY: '#6b7280',
  // ...
}
function convertToHex(color) {
  if (color in Colors) {
    return Colors[color]
  } else {
    return '#ffffff'
  }
}
convertToHex(Colors.SLATE)

这样代码将会更加简洁易读。

不符合预期，提前 return

还有一个最佳实践是，我们可以把不符合预期的情况写到函数的最前面提前 return，避免忘记 return。

const Colors = {
	SLATE: '#64748b',
  GRAY: '#6b7280',
  // ...
}
function convertToHex(color) {
  if (!color in Colors) {
    return '#ffffff'
  }
  return Colors[color]
}
convertToHex(Colors.SLATE)

这样连 else 都不需要了。巧用这种技巧，我们可以消灭代码中大量的 else。

使用 Map 配合 Object

使用 map 更加专业，因为 map 可以存储任意类型的 key，而且它继承自 Map.prototype，具有更多方便的方法和属性。

而 Object 访问属性更加方便，我们可以继续使用 Object 实现枚举的作用。

const ColorsEnum = {
	SLATE: 'slate',
  GRAY: 'gray',
  // ...
}
const Colors = new Map()
Colors.set(ColorsEnum.SLATE, '#64748b')
Colors.set(ColorsEnum.GRAY, '#6b7280')
// ...
Colors.set('DEFAULT', '#ffffff')
function convertToHex(color) {
  if (!Colors.has(color)) {
    return Colors.get('DEFAULT')
  }
  return Colors.get(color)
}
convertToHex(Colors.SLATE)

Map 也可以存储函数

假设我们存储的颜色非常多，高达上千种，而且还要支持后端配置，通过某种运算过程才可以得到结果。

那么我们可以使用 Map 来存储函数。

return Colors.get(color)()

尽量避免三目表达式和 switch

三目表达式虽然简介，但是可读性大大降低，如果是多级条件的话，会非常难以阅读。

switch 和 if 相比没有明显优势，反而有时容易 return 导致代码不按预期执行。

以上就是JavaScript 条件判断使用技巧详解的详细内容，更多关于JavaScript 条件判断的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • JavaScript中的条件判断语句使用详解

    在写一个程序,可能有一种情况,当你需要采用一个路径出给定两个路径.所以,需要使用条件语句,让程序来做出正确的决策和执行正确的行动. JavaScript支持其用于执行根据不同的条件不同的操作条件语句.在这里,我们将解释if..else语句. JavaScript支持if..else语句的形式如下: if 语句 if...else 语句 if...else if... 语句. if 语句: if语句是基本的控制语句,它允许JavaScript来作出决定,有条件地执行语句. 语法: if (expr

  • javascript if条件判断方法小结

    条件语句用于基于不同的条件来执行不同的动作. 条件语句 通常在写代码时,您总是需要为不同的决定来执行不同的动作.您可以在代码中使用条件语句来完成该任务. 在 JavaScript 中,我们可使用以下条件语句: •if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码•if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码•if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行•switch 语句 - 使用

  • js利用与或运算符优先级实现if else条件判断表达式

    复制代码 代码如下: <script type="text/javascript"> /******************************************************************* 利用运算符优先级实现ifelse表达式 result = expression1 && expression2 当且仅当两个表达式的值都等于 True 时, result 才是 True. 如果任一表达式的值等于 False, 则 res

  • JS中比Switch...Case更优雅的多条件判断写法

    前言 前几天,本人负责编写网站上线的环境判断功能,其中涉及到大量多条件判断的code.对于多条件判断写法,大部分程序员都是采用if...else if...else或者switch...case的写法,但是有一种多条件判断写法,比传统写法更加有趣且优雅--对象属性判断法. 实例展示 废话不多说了,下面直接用三个实例,给大家分别展示三种不同的多条件判断写法. 1. if...else if...else function whatFood(mealtime) { let food = ''; if

  • JavaScript条件判断_动力节点Java学院整理

    JavaScript使用if () { ... } else { ... }来进行条件判断.例如,根据年龄显示不同内容,可以用if语句实现如下: var age = 20; if (age >= 18) { // 如果age >= 18为true,则执行if语句块 alert('adult'); } else { // 否则执行else语句块 alert('teenager'); } 其中else语句是可选的.如果语句块只包含一条语句,那么可以省略{}: var age = 20; if (a

  • JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)

    我们在编写 JS 代码时,经常会遇到逻辑判断复杂的情况.一般情况下,可以用 if/else 或 switch 来实现多个条件判断,但会出现一个问题:随着逻辑复杂度的增加,代码中的 if/else 和 switch 会越来越臃肿.本文将带你尝试写出更优雅的判断逻辑. 比如说下面这样一段代码: const onButtonClick = (status) => { if (status == 1) { sendLog('processing') jumpTo('IndexPage') } else

  • JavaScript 条件判断使用技巧详解

    目录 引言 避免直接使用字符串作为条件 使用 Object 不符合预期,提前 return 使用 Map 配合 Object Map 也可以存储函数 尽量避免三目表达式和 switch 引言 本文花费很短的时间来介绍一下在 JavaScript 中如何编写更简单的条件判断,帮助你编写更简洁的代码和可读性更高的代码. 假如我们有一个颜色值转换十六进制编码的函数. function convertToHex(color) { if (typeof color === 'string') { if (

  • python不相等的两个字符串的 if 条件判断为True详解

    今天遇到一个非常基础的问题,结果搞了好久好久.....赶快写一篇博客记录一下: 本来两个不一样的字符串,在if 的条件判断中被判定为True,下面是错误的代码: test_str = 'happy' if test_str == 'good' or 'happy': #这样if判断永远是True,写法错误 print('aa') else: print('bbbb') 这是正确的代码: test_str = 'happy' if test_str == 'good' or test_str ==

  • es6中使用map简化复杂条件判断操作实例详解

    本文实例讲述了es6中使用map简化复杂条件判断操作.分享给大家供大家参考,具体如下: 复杂逻辑判断时需要写很多if/else,代码可读性较差,可以用es6新增的Map来简化代码 列举六种实例,逐步简化 /** * 按钮点击事件 * @param {number} status 活动状态:1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消 */ const onButtonClick = (status) => { if (status == 1) { sendLog('pr

  • shell脚本语言之if条件判断语句实例详解

    目录 1.单分支if条件语句 1.1举例:判断目录是否存在,不存在则创建 2.双分支if条件语句 2.1举例:监听并自动重启apache服务脚本 3.多分支if条件语句 3.1举例:判断用户输入的是文件还是目录 4.case条件语句 4.1举例:创建启动脚本,让service命令管理apache 4.2举例:创建启动脚本,让service命令管理nginx 总结 1.单分支if条件语句 then后面跟符合条件之后执行的程序,可以放在[]之后,用;分隔.也可以换行写入, 就不需要“;”了. 比如:

  • JavaScript中BOM和DOM详解

    目录 BOM(浏览器对象模型) 1. window 获取浏览器c窗口尺寸 2. screen 获取电脑屏幕大小 3. window 开启关闭窗口 4. 浏览器事件 5. location 6. history 7. navigator 获取浏览器相关信息 8. 弹窗 DOM (文档对象模型) DOM 分类 DOM对象 Document文档对象 element文档对象 DOM事件操作 鼠标事件 键盘事件 触屏事件 特殊事件 表单事件 浏览器兼容处理 兼容性写法,封装工具 BOM(浏览器对象模型)

  • JavaScript 中断请求几种方案详解

    目录 1 Promise 中断调用链 中断Promise 包装abort方法--仿照Axios的CancelToken 2 RXJS的unsubscribe方法 3 Axios的CancelToken 1 Promise Promise有一个缺点是一旦创建无法取消,所以本质上Promise是无法被终止的. 但是我们可以通过中断调用链或中断Promise来模拟请求的中断. 中断调用链 中断调用链就是在某一个then/catch执行之后,后续的链式调用(包括then,catch,finally)不再

  • php安全攻防利用文件上传漏洞与绕过技巧详解

    目录 前言 文件上传漏洞的一些场景 场景一:前端js代码白名单判断.jpg|.png|.gif后缀 场景二:后端PHP代码检查Content-type字段 场景三:代码黑名单判断.asp|.aspx|.php|.jsp后缀 场景四:代码扩大黑名单判断 绕过方式--htaccsess: 绕过方式--大小写绕过: 场景五:一些复合判断 空格.点绕过(windows) ::$DATA绕过(windows) 双写绕过 %00截断 %0a绕过 图片马绕过 二次渲染绕过 条件竞争 /.绕过 前言 文件上传漏

  • 基于JavaScript实现游戏购物车效果详解

    基于JavaScript实现游戏购物车效果详解

    目录 项目展示 登陆界面 注册界面 主界面 项目展示 登陆界面 登陆界面html和js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit

  • Performance 内存监控使用技巧详解

    Performance 内存监控使用技巧详解

    目录 Performance 介绍 使⽤ 内存问题的具体体现 监控内存的⼏种⽅式 TimeLine Performance 介绍 为什么使⽤Performance呢?GC 的⽬的是为了实现内存空间的良性循环,⽽良性循环的基⽯是合理的使⽤内存空间. 由于 ECMAScript 并没有提供操作内存的 API,所以内存分配是否合理我们不可知.Performance 提供了多种⽅式,在程序运⾏时可以时时监控,确定内存分配是否合理. 使⽤ 具体步骤 打开浏览器输⼊⽬标⽹址 进⼊开发⼈员⼯具⾯板 开启录制功

随机推荐