我们的代码里会大量的需要各种判断。比如:如果用户没有登录,如果用户输入的密码错误,如果求助有人应答……这时候就需要使用:
if...else
中文就是:如果(if)...否则(else)……的意思
假设我们要判断一个数是不是正数:
var a = -1; //或者 a = 1 if (a > 0) { console.log('正数'); }
断点演示:程序执行流程
注意:圆括号里“应该”是一个结果值为bool值的表达式,
我们这里用的是“应该”而不是“必须”,因为:
这里JavaScript会把任何变量或表达式转换成bool值!
if(value):如果value不是bool值,除了 '', null,0,undefined,NaN,其他都是true。所以,再次开启神奇之旅吧:
if (3 - 2 > 0) { if (3 - 2) { if (2 - 3 < 0) { if (2 - 3) { if (3 - 3) { if ('飞哥真帅') { if ('0') { if ('0'+0) { if ('0'-0) { if ('') { if (' ') { if (''+'') { if (''-'') { if (a = 986) { //var a = 896; if('源栈'-986){ console.log(true); }
事实上,在实际开发中,因为输入值的不确定性,这一规则会带来无穷无尽的麻烦和bug……
所以,再次牢记:书写JavaScript代码一定要规范规范再规范!
else
在上述需求(大于0显示为正数)的基础上再加一个判断:小于0显示为负数。该怎么写?
if (a > 0) { console.log('正数'); } if (a < 0) { console.log('负数'); }
这样写运行结果没有错,但是有一个 性能 上的问题:
假设 a = 100,它通过了 a > 0 的判断,输出:正数。正数就永远不可能为负数,还需要再走一次 a < 0 的判断么?
断点演示:
所以,这种情况,我们应该使用 else:
if (a > 0) { console.log('正数'); }else { console.log('负数'); }
这里的else不会进行判断:只要没有满足前面的if条件,马上就会进入else分支。
花括号{}
注意上面所有代码,无论是 if() 还是 else ,后面都跟了{}。
如果if/else后面只有一句话,也可以(但强烈不建议!原因同C#)省略掉这个{}
演示:添加一句
console.log('over!');
条件运算符
上面的if...else...可以进一步重构:
var result; if (a > 0) { result = '正数'; } else { result ='负数'; } console.log(result);
重构:在不改变代码运行结果的前提下,对代码进行调整优化,是提高代码质量的重要手段!
@想一想@:这算是优化么?还多了一行呢……
因为这种if...else...的情形非常常见,JavaScript(包括很多C系语言)提供了这种写法:
var result = a > 0 //条件 ? '大于等于0' //条件为真时取值 : '小于0'; //条件为假时取值
注意这个由问号(?)和冒号(:)组成的三元运算符只能用于赋值,不能用于其它。
常见菜鸟写法
if(result == true)
if (condition) { return true; } else { return false; }
嵌套组合
上面的例子我们忽略了一点:如果 a=0,那么a既不是负数,也不是整数,我们应该直接输出“零”,这怎么实现?
- 方案一:循环嵌套
if (a === 0) { console.log('零'); } else { if (a > 0) { console.log('正数'); } else { console.log('负数'); } }
- 方案二:else if()
if (a === 0) { console.log('零'); } else if (a > 0) { console.log('正数'); } else { console.log('负数'); }
复杂业务需求
利用if...else的嵌套组合,就可以完成复杂的需求。
比如,源栈可以根据学习时间打折优惠:
- 4周以下:原价每周888元
- 25周(满课时):包学会,定价19888元
- 12周以上:8折
- 8周以下:9折
代码如何实现?_(一起写)_
if (weeks < 4) { console.log(学费是:${888 * weeks}
); } else if (weeks === 25) { console.log(学费是:${17888}
); } else if (weeks > 12) { console.log(学费是:${888 * weeks * 0.8}
); } else if (weeks < 8) { console.log(学费是:${888 * weeks * 0.9}
); }
菜鸟 vs 老鸟
凡是拿着需求就开始写的,都是菜鸟!
上述需求是有问题的:
- 4周8周以上以下包含不包含4周8周本身?
- 4周到8周如何处理?
- 如果week<0,或者weeks>25,甚至是一些非数值输入怎么办?
- ……
写代码之前,首先明确需求——这就是老鸟和菜鸟的区别!
你以后大概率上会发现:作为一个程序员在工作中伤你最深的、你最最头痛和痛苦的,不是“技术”,而是“需求”——模糊不清的需求、千变万化的需求、稀奇古怪的需求……
整理
补充完善好需求之后,再经过整理(尤其注意顺序/层级)后的代码如下所示:
if (!isNaN(weeks)) { console.log(${weeks}不是数字
); } else if (weeks > 25 || weeks < 0) { console.log("${weeks}只能在0和25之间
"); } else { if (weeks < 4) { console.log(学费是:${888 * weeks}
); } else if (weeks < 8) { console.log(学费是:${888 * weeks * 0.7}
); } else if (weeks < 12) { console.log(学费是:${888 * weeks * 0.8}
); } else if (weeks < 25) { console.log(学费是:${888 * weeks * 0.9}
); } else { console.log(学费是:${17888}
); } }
if...else的整理,是程序员的基本功。从一开始就要严格要求自己:
程序不是能跑就行,一定要干净整洁通畅……或者总结为:可读性强!
swith...case
也可以算是if...else...的另一种写法:
var weekday = 3; switch (weekday) { case 1: //if(weekday == 1) console.log('星期一'); break; //:和break类似于 {} case 2: //else if(weekday == 1) console.log('星期二'); break; //省略.... case 6: console.log('星期六'); break; case 7: console.log('星期天'); break; default: //兜底的else
console.log('什么鬼?'); break; }
注意:
- 不要忘记break;
- 推荐总是用default兜底
- 只能做 “等值” 比较,没有什么
case weekday > 1: //不会报错,但你猜是什么运行效果?
- 也没有什么“逻辑”运算,比如:
case 6 || 7: //同样不会报错,但更加的古怪……
如果你真想6和7都输出为“周末”,可以:
case 6: case 7: console.log('周末'); break;
作业
- 写一段代码,能根据一起帮用户的帮帮点(bCredit)输出他对应的等级(可适度精简)
一起帮用户被分为5种,每种都有一个整数代号:
- 0:访客
- 1:注册用户
- 2:文章发布者
- 3:管理员
- 4:超级管理员
写一段代码,用switch...case将代号转换成文字输出,但3和4都统称“管理员”即可