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

前言

前几天，本人负责编写网站上线的环境判断功能，其中涉及到大量多条件判断的code。对于多条件判断写法，大部分程序员都是采用if...else if...else或者switch...case的写法，但是有一种多条件判断写法，比传统写法更加有趣且优雅——对象属性判断法。

实例展示

废话不多说了，下面直接用三个实例，给大家分别展示三种不同的多条件判断写法。

1. if...else if...else

function whatFood(mealtime) {
 let food = '';

 if (mealtime === 'breakfasttime') {
  food = 'egg';
 } else if (mealtime === 'lunchtime') {
  food = 'vegetable'
 } else if (mealtime === 'dinnertime') {
  food = 'fruit'
 } else {
  food = 'cookie'
 }

 return food;
}

2. switch...case

function whatFood(mealtime) {
 let food = '';

 switch (mealtime) {
  case 'breakfasttime':
   food = 'egg';
   break;
  case 'lunchtime':
   food = 'vegetable';
   break;
  case 'dinnertime':
   food = 'fruit';
   break;
  default:
   food = 'cookie';
 }

 return food;
}

3. 对象属性判断法

function whatFood(mealtime) {

 const food = {
  breakfasttime: 'egg',
  lunchtime: 'vegetable',
  dinnertime: 'fruit'
 }

 return food[mealtime] ? food[mealtime] : 'cookie';
}

总结

相信你通过上面三个实例，已经看到了不同写法孰优孰劣，如果你有更好的多条件判断写法，欢迎留言讨论，祝工作顺利，生活愉快。

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • Vue.js实现多条件筛选、搜索、排序及分页的表格功能

    Vue.js实现多条件筛选、搜索、排序及分页的表格功能

    与上篇实践教程一样,在这篇文章中,我将继续从一种常见的功能--表格入手,展示Vue.js中的一些优雅特性.同时也将对filter功能与computed属性进行对比,说明各自的适用场景,也为vue2.0版本中即将删除的部分filter功能做准备. 需求分析 还是先从需求入手,想想实现这样一个功能需要注意什么.大致流程如何.有哪些应用场景. 表格本身是一种非常常用的组件,用于展示一些复杂的数据时表现很好. 当数据比较多时,我们需要提供一些筛选条件,让用户更快列出他们关注的数据. 除了预设的一些筛选条

  • JavaScript switch case 的用法实例[范围]

    几个例子: 复制代码 代码如下: function case1(num){ switch(num){ case 1: document.writeln("show 1!!"); break; case 2: document.writeln("show 2!!"); break; case 3: document.writeln("show 3!!"); break; default: document.writeln("show ot

  • js中switch case循环实例代码

    复制代码 代码如下: switch (objNameType) { case 'PD': valueUD = obj.id; id = objName; var loadVUD = UserData.load(exam, id); if (loadVUD == null || loadVUD == undefined || loadVUD == '') { var tmpTGId = obj.id.substr(0, obj.id.indexOf('_')); qNoTotalD[qIdNoSt

  • js switch case default 的用法示例介绍

    复制代码 代码如下: switch(tagName){ case "span": node = element.parent().parent(); element = element; break; case "td": node = element.parent(); element = element.find("span"); break; default: node = element; break; } 以上语句等同于 if(tagN

  • javascript 从if else 到 switch case 再到抽象

    我的答案是,超过两个 else 的 if ,或者是超过两个 case 的 switch .可是在代码中大量使用 if else 和 switch case 是很正常的事情吧?错!绝大多数分支超过两个的 if else 和 switch case 都不应该以硬编码( hard-coded )的形式出现. 复杂分支从何而来 首先我们要讨论的第一个问题是,为什么遗留代码里面往往有那么多复杂分支.这些复杂分支在代码的首个版本中往往是不存在的,假设做设计的人还是有点经验的话,他应该预见将来可能需要进行扩展

  • javascript使用switch case实现动态改变超级链接文字及地址

    代码很简单,我这里就不多废话了,小伙伴们直接看源码吧. 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="te

  • 使用JavaScript switch case 另类写法

    习惯了C#的语法,遇到多分支调用的情况,除了最简单的if-else,那么就是switch-case了,所以使用JavaScript的时候就很容易会写出下面这样的代码: 复制代码 代码如下: // JScript source code //something的值是1.2.3... switch (something) { case 1: todoA(); break; case 2: todoB(); break; case 3: todoC(); break; //... } 这样的代码本身也

  • 基于JavaScript实现前端数据多条件筛选功能

    基于JavaScript实现前端数据多条件筛选功能

    有时候也会需要在前端进行数据筛选,增强交互体验.当数据可用的筛选条件较多时,把逻辑写死会给后期维护带来很大麻烦.下面是我自己写的一个简单的筛选器,筛选条件可以根据数据包含的字段动态设置. 仿照京东的筛选条件,这里就取价格区间和品牌作为测试. 代码 代码中主要使用js的过滤器Array.prototype.filter,该方法会对数组元素进行遍历检查,返回一个符合检查条件的新数组,不会改变原数组. // filter() var foo = [0,1,2,3,4,5,6,7,8,9]; var f

  • JS实现微信弹出搜索框 多条件查询功能

    JS实现微信弹出搜索框 多条件查询功能

    效果图如下所示: JS实现微信弹出搜索框 多条件查询功能的实现代码如下所示: <!--<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ include file="/WEB-INF/views/include/mtaglib.jsp"%>--> <!DOCTYPE html> <

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

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

  • Swift编程中的switch...case语句实例解析

    Swift中的switch...case语句可以判断对象类型, Objective-C中则必须是整数. 不可以穿透,可以不写break, var rank = "A" switch rank{ case "A": //相当于if print("优") case "B": // 相当于else if print("优") case "C": // 相当于else if print(&quo

  • java中的switch case语句使用详解

    java中的switch case语句 switch-case语句格式如下: switch(变量){ case 变量值1: //; break; case 变量值2: //...; break; ... case default: //...; break; } swtich()变量类型只能是int.short.char.byte和enum类型(JDK 1.7 之后,类型也可以是String了).当进行case判断时,JVM会自动从上到小扫描,寻找匹配的case,可能存在以下情况: 情况一:若未

  • js 中的switch表达式使用示例

    前言 switch 这种表达式在很多语言中都有,比如java, C等待, 使用switch比使用if else 来得方便,来得清晰. 使用语法很简单: 复制代码 代码如下: switch(n) { case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; default: n 与 case 1 和 case 2 不同时执行的代码 } 各种语言的使用基本类似. 需要特别提出的时,在java 1.6 及以下版本, 变量(n)只能是整型.在java 7 之后支持Str

  • C#中的switch case使用介绍

    C#中的switch case使用介绍

    在C#中 复制代码 代码如下: switch(type) { case tpye1: break; case tpye2: break; case tpye3: break; case tpye4: break; }; 其中type可以是数字,也可以是字符串:

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

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

  • java中switch case语句需要加入break的原因解析

    java中switch case语句需要加入break的原因解析            java 中使用switch case语句需要加入break 做了具体的实例分析,及编译源码,在源码中分析应该如何使用,大家可以参考下: 假设我们有如下这样一个switch语句: public static void test(int index) { switch (index) { case 1: System.out.println(1); case 2: System.out.println(2);

  • Java 如何在switch case语句中声明变量

    Java 如何在switch case语句中声明变量

    目录 在switch case语句中声明变量 第一种情况常见的场景为 第二种情况常见的场景为 Java switch-case语句用法及例题 原理归原理,下面是一个例题 在switch case语句中声明变量 Java中使用switch case语句时很容易出现以下两个报错: 1.Duplicate local veriable out. (局部变量重复) 2.The local veriable out may not have been initialized. (局部变量可能未被初始化)

  • 如何让js中的if判断如丝般顺滑详解

    目录 前言 代码实现 思路一 思路二 总结 参考文档 前言 项目中的一个小需求点,点击按钮,验证几十个条件框,判断所有条件框是否填写(选择)过数据(至少有一个条件判断为真)再执行对应操作 判断的条件框包含 Radio 单选框,Checkbox 多选框,Input 输入框,InputNumber 计数器, Select 选择器, Switch 开关等 项目使用的 Element 组件库  V2.15.6 不同条件对应的数据类型以及默认值 Radio 单选框  string  '' Checkbox

  • Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程

    前言 最近在做一个项目改版,第一次在项目中真正使用Angular,和平时自己写写小demo,做做练习的感觉还是非常不同的,感觉非常的新鲜.有几个指令是经常用到的,这里由于这几个有点共性,所以一起介绍一下ng-if,ng-show/ng-hide,ng-switch 这几个指令.下面来看看详细的介绍: 共性 1.这里个指令都是Angular框架提供给我们的设置页面内容显示和隐藏的方法,使用起来非常方便,尤其是做业务逻辑. 2.都是通过一个表达式的值来实现切换显示的,只不过 ng-switch 可以

随机推荐