提问:

1.为什么要使用switch方法  ==> (替换冗长的if和else判断)

2.什么场景下使用 ==> (在判断布尔值的)

3.switch有什么优点 ==> (简化了代码,语法更清晰)

4.switch有什么缺点 ==> (太多的case和break关键字,出现bug时难于调试)

5.还有什么更好的替换方法吗  ==> (使用对象字面量)

6.object literal有什么优点 ==> (可扩展性,可维护性,和更好的调试);

1.switch语法(替换冗长的if和else判断)

(function(){
var type = "coke";
var drink;
switch(type){
case "coke" :
drink = "coke";
break;
case "pepsi":
drink = "pepsi";
break;
default :
drink = "unknown drink"
}
console.log(drink);
}());

2.if和else做太多判断,语句太冗长

(function(){
var type = "coke";
if(type === "coke"){
type = "coke";
}else if(type === "pepsi"){
type = "pepsi";
}else{
type = "Unknown drink";
}
}());

3.使用对象字面量

(function(){
function getDrink(type){
var drinks = {
"coke" : "Coke",
"pepsi" : "Pepsi",
"lemoande" : "Lemonade",
"default" : "Default item"
};
return "The drink i chose was " + (drinks[type] || drinks["default"]);
}
var drink = getDrink("pepsi"); //有选择参数
var drink2 = getDrink(); //默认
console.log(drink);
console.log(drink2);
}());

4.返回函数调用

(function(){
var type = "coke";
var drinks = {
coke : function(){
return "Coke";
},
pepsi : function(){
return "Pepsi";
},
lemoande : function(){
return "Lemoande";
}
}
console.log(drinks[type]());
}());

5.返回有“默认值”函数调用

(function(){
function getDrink(type){
var fn;
var drinks = {
coke : function(){
return "Coke";
},
pepsi : function(){
return "Pepsi";
},
lemoande : function(){
return "Lemoande";
},
default : function(){
return "Default item";
}
};
if(drinks[type]){
fn = drinks[type];
}else{
fn = drinks["default"];
}
return fn();
}
var drink = getDrink("lemoande");
var drink2 = getDrink();
console.log(drink); //Lemoande
console.log(drink2); //Default item
}());

6.使用||表达式来返回“默认值”函数调用

(function(){
function getDrink(type){
var drinks = {
coke : function(){
return "Coke";
},
pepsi : function(){
return "Pepsi";
},
lemoande : function(){
return "Lemoande";
},
default : function(){
return "Default item";
}
};
return (drinks[type] || drinks["default"])();
}
var drink = getDrink("lemoande");
var drink2 = getDrink();
console.log(drink); //Lemoande
console.log(drink2); //Default item
}());

7.有其他返回值的时候

(function(){
function getDrink(type){
var item;
var drinks = {
coke : function(){
item = "Coke";
},
pepsi : function(){
item = "Pepsi";
},
lemoande : function(){
item = "Lemoande";
},
default : function(){
item = "Default item";
}
}; //invoke it
(drinks[type] || drinks["default"])(); //return something
return 'The drink I chose was ' + item;
} var drink = getDrink("lemoande");
var drink2 = getDrink();
console.log(drink); //Lemoande
console.log(drink2); //Default item
}());

8.当有多个case同一个条件的switch

(function(){
var type = "coke";
var snack;
switch(type){
case "coke" :
case "pepsi" :
snack = "Drink";
break;
case "cookies" :
case "crisps" :
snack = "Food";
break;
default :
snack = "Unknown type!";
}
console.log(snack);
}());

9.使用对象直接量替换switch

(function(){
function getSnack(type){
var snack;
function isDrink(){
return snack = "Drink";
}
function isFood(){
return snack = "Food";
}
var snacks = {
"coke" : isDrink,
"pepsi" : isDrink,
"cookies" : isFood,
"crisps" : isFood
};
return snacks[type]();
}
var drink = getSnack("coke");
console.log(drink);
}());

10.总结

1.switch有太多case和break关键字,且太散乱,出现bug时难于调试。

2.对象字面量有更多的可扩展性,可维护性,和更好的调试,可以包含函数和任何其他对象类型,非常有灵活性,且可以产生闭包,返回闭包。

PS:原文参考:https://toddmotto.com/deprecating-the-switch-statement-for-object-literals/

使用object literal替换switch的更多相关文章

  1. JavaScript Patterns 3.1 Object Literal

    Basic concept Values can be properties: primitives or other objects methods: functions User-defined ...

  2. C#中一种替换switch语句更优雅的写法

    今天在项目中遇到了使用switch语句判断条件,但问题是条件比较多,大概有几十个条件,满屏幕的case判断,是否有更优雅的写法替代switch语句呢? 假设有这样的一个场景:商场经常会根据情况采取不同 ...

  3. initialize myObject by calling a function that returns an object literal

    w作用域控制变量的可见范围. JavaScript: The Good Parts Instead of initializing myObject with an object literal, w ...

  4. object literal对象字面量

    <JavaScript高级程序设计(第3版)>有个陌生的新词:对象字面量,无法理解.看了一下英文原版,英文是object literal ,还是不太理解.后来想明白了,主要是literal ...

  5. 用Dictionary替换switch case

    用switch case处理一个很长的判断,例如56个民族01代表汉族,02代表藏族,03代表壮族...,当传入数字想获取民族名称时就得写56个case,当传入民族获取背后的数字时,又得再写56个ca ...

  6. Nuxt / Vue.js in TypeScript: Object literal may only specify known properties, but 'components' does not exist in type 'VueClass'

    项目背景, Nuxt(vue), TypeScript 生成完项目框架, 添加测试demo页面. 在生成的模板代码中添加layout配置如下: <script lang="ts&quo ...

  7. input 等替换元素的baseline问题

    行内标签和设置为block:inline;形式的标签与input并排放置时,为何会错位?例如下面的. 因为在同一行中,所有行内元素默认 baseline 对齐.但是,input(还有textarea. ...

  8. html元素两种分类。替换元素和不可替换元素;块级元素和行内元素

    根据元素本身特点来分类: 替换元素替换元素根据其标签和属性来决定元素的具体显示内容.有<img><input><textarea><select>< ...

  9. JVM Object Query Language (OQL) 查询语言

    Object Query Language (OQL) OQL is SQL-like query language to query Java heap. OQL allows to filter/ ...

随机推荐

  1. iOS彩票项目--第三天,搭建竞技场和发现,搭建幸运选号和我的彩票界面

    一.竞技场搭建--UISegmentedControl的使用 // 重写 自定义控制器的view - (void)loadView { UIImageView *imgView = [[UIImage ...

  2. Entity Framework应用:Loading Entities

    Entity Framework允许控制对象之间的关系,在使用EF的过程中,很多时候我们会进行查询的操作,当我们进行查询的时候,哪些数据会被加载到内存中呢?所有的数据都需要吗?在一些场合可能有意义,例 ...

  3. js学习笔记31----工厂方式

    工厂方式构造对象: 1.原料---构造函数,创建一个对象 “构造函数”,就是专门用来生成“对象”的函数.它提供模板,作为对象的基本结构.一个构造函数,可以生成多个对象,这些对象都有相同的结构.   2 ...

  4. JS下拉图片Demo3

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. thinkphp 使用原生mysql语句 联合查询

    <?php class DelAction extends Action { public function ml(){ // 实例化一个空模型,没有对应任何数据表 $Dao = M(); // ...

  6. 关于C语言底层

    1.C语言和java C语言难在需要清楚底层的实现原理一错可能就内存泄露之类语法不难,原理很难 C语言和java数组是指一段连续的内存空间一个int 4字节一旦声明必须确定长度无法变长数组在数据结构里 ...

  7. C++測量一段代码的执行时时间

    在电脑里发现的一段C++代码,尽管自己不做C++开发了.还是贴出来,给须要的人 LARGE_INTEGER BegainTime ; LARGE_INTEGER EndTime ; LARGE_INT ...

  8. JMeter使用记录2 -- Web測试

    Web測试用例 新建线程组.配置起3线程,循环1次.1秒启动全部线程.进行login.循环1个主要页面的读写,并对另外一个主要页面进行读操作,最后logout并在aggregate graph/gra ...

  9. Fastqc 碱基质量分布图

    横坐标代表每个每个碱基的位置,反映了读长信息,比如测序的读长为150bp,横坐标就是1到150: 纵坐标代表碱基质量值, 图中的箱线图代表在每个位置上所有碱基的质量值分布, 中间的红线代表的是中位数 ...

  10. 【MongoDB】数组长度查询

    db.groupedInfo.count({'surveyInfo.surveyAndUserID.0':{$exists:1}})