使用object literal替换switch
提问:
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的更多相关文章
- JavaScript Patterns 3.1 Object Literal
Basic concept Values can be properties: primitives or other objects methods: functions User-defined ...
- C#中一种替换switch语句更优雅的写法
今天在项目中遇到了使用switch语句判断条件,但问题是条件比较多,大概有几十个条件,满屏幕的case判断,是否有更优雅的写法替代switch语句呢? 假设有这样的一个场景:商场经常会根据情况采取不同 ...
- 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 ...
- object literal对象字面量
<JavaScript高级程序设计(第3版)>有个陌生的新词:对象字面量,无法理解.看了一下英文原版,英文是object literal ,还是不太理解.后来想明白了,主要是literal ...
- 用Dictionary替换switch case
用switch case处理一个很长的判断,例如56个民族01代表汉族,02代表藏族,03代表壮族...,当传入数字想获取民族名称时就得写56个case,当传入民族获取背后的数字时,又得再写56个ca ...
- 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 ...
- input 等替换元素的baseline问题
行内标签和设置为block:inline;形式的标签与input并排放置时,为何会错位?例如下面的. 因为在同一行中,所有行内元素默认 baseline 对齐.但是,input(还有textarea. ...
- html元素两种分类。替换元素和不可替换元素;块级元素和行内元素
根据元素本身特点来分类: 替换元素替换元素根据其标签和属性来决定元素的具体显示内容.有<img><input><textarea><select>< ...
- JVM Object Query Language (OQL) 查询语言
Object Query Language (OQL) OQL is SQL-like query language to query Java heap. OQL allows to filter/ ...
随机推荐
- MySQL5.7远程连接和增加密码
主要是5.7的很多操作和以前版本不一样,所以踩了很多坑. 1. 远程连接cant connect to mysql (10061) 一开始以为是权限问题,所以参考了详解 MySQL 5.7 新的权限与 ...
- 在传统以太网中,为什么要有最小帧长度(64 bytes)和最大帧长度(1500 bytes)的限制?
遇到的问题:以太网的数据帧封装如下图所示,包含在IP数据报中的数据部分最长应该是( )字节? A.1434 B.1460 C.1480 D.1500 答案:C 原因: 以太网(IEEE 802.3)帧 ...
- java分布式集群
http://blog.csdn.net/guzicheng/article/details/11580841
- 页面装载js及性能分析方法
一.装载 先装载静态页面的引用js文件,然后查找引用文件中是否包含onload函数,比如main.js中包含onload函数,在main.js中查找是否有对其他js文件的引用,优先装载引用js文件,被 ...
- 关于Unity中UI中的RawImage节点以及制作地图滚动效果
一.贴图的Texture Type属性类型 Texture:会把贴图的大小转换为最相近的2的n次方,比如400X1369会转换为512X1024. Sprite 2D:是贴图的原始大小. 二.RawI ...
- 关于用Cocos2d-x.3.10运行别人游戏项目的步骤
1.首先打开Cocos那个一体化软件. 2.创建工程,取名字,选择路径. 3.用VS2013打开新建的项目. 4.打开cocosdata(我自己放游戏项目的文件目录)的相应项目(自己刚创建的). 5. ...
- nodejs基础 -- 事件循环
Node.js 事件循环 Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高. Node.js 的每一个 API 都是异步的,并作为一个独立线程运行,使用异步函数调用, ...
- Asp.net mvc中应用autofac
1.nuget安装依赖
- NPOI帮助类(Excel转DataTable、DataTable转Excel)
using System; using System.Collections.Generic; using System.Linq; using System.Text; using NPOI.SS. ...
- js上传本地图片遇到的问题
1.改变页面文件上传默认的样式 <input type="text" size="20" id="upfile" style=&quo ...