入门 - 条件判断 ¶

• 作者：KK

• 发表日期：2016.2.17

程序中经常要用到条件判断,先看例子:

var age = 29;
if(age > 17){
	alert('你已经满18岁喔');
	alert('花括号里面可以写无限句代码');
}

上面的代码就是判断a变量的值是不是大于18,是的话就执行花括号{里面的内容},如果你将age的值改成小于18的数字,就不会执行alert语句提示满18岁

条件判断的主要写法就是

if(条件){
	//程序语句1
	//程序语句2
	//更多程序语句
	//当条件成立时,执行被花括号包住的这些语句
}

if是固定的代码关键字,后面加一对圆括号(),圆括号里面写条件(条件的写法后面再介绍),然后再加一对花括号,里面可以像平时那样写程序语句代码,但是当条件成立的时候就会执行这个花括号里面的代码,如果不成立就不会执行

上面演示的条件是用大于号比较作为条件,比较age变量的值是不是大于数字17

再来一个例子:

var age = 17;
//这是第1个条件判断代码
if(age >= 18){
	alert('你成年了');
}

if(age < 18){ //这是第2个条件判断代码,而//号写备注也可以写到花括号后面不会报错哦
	alert('哦你还未成年!');
}

这段代码运行起来就会提示"哦你还未成年",因为后面第2个条件比较age < 18是成立的,而第1个条件age >= 18是不成立的

这个条件判断语句代码我们都叫它if语句

条件最终只要为true ¶

if括号里面的条件其实只要一个结果为true的计算结果,前面比较运算符的章节中已经说明了各种比较都是计算出一个true值或者false值,就是布尔值

所以if条件可以直接给逻辑值,来看代码:

var age = 18;
var 成年 = age >= 18; //其实变量可以用中文名哦!但一般不提倡这样用,业界全部都是用英数字下划线命名变量的,用中文只是为了演示说明
alert('计算结果是:' + 成年); //注意加法后面的"是否成年"是一个变量,因为它没有引号引住,所以不是字符串
if(成年){
	alert('满18岁了');
}

成年 = false;
if(成年){ //由于 成年 的值是 false,所以判断不成立,不会进入花括号运行
	alert('又满18岁了');
}

成年 = true;
if(成年){
	alert('这是第3次alert提示');
}

//------例子分割线,下面再来------
if(1888 > 999){
	alert('不用变量比较,直接拿两个数字做比较反正能算出一个true就行哦');
	var xx = 1 - 99;
	alert('我在if里又加了些代码计算了一些东西,你看看:' + xx);
	//你还可以做更多事情
}

if(1 + 1 == 11){
	alert('还可以用计算表达式,先1+1算出结果,得2,然后再用2==11来比较,那么2不等于11,所以不进来这里');
}

if(1 + 1 == (11 - 3) * (7 / 9)){
	alert('复杂点带括号的计算公式都可以,再次强调,只要你的比较表达式能算出一个true来');
}

if(true){
	alert('-_- 你直接放个true作为条件值都可以,于是就直接成立了');
}

if(false){
	alert('所以你放false这个值,由于不是true,不成立就不进来了');
}

以上例子可以看出,只要括号里的结果经过计算机计算后能得出true那么就可以运行花括号里面的代码

else语句(否则) ¶

else语句用于实现否则的逻辑,前面的例子中,如果大于18岁就提示成年,后面又加了一次判断如果小于18就提示未成年,但实际上可以直接用else语句来做,例子:

var age = 17;
if(age >= 18){
	alert('成年了');
}else{
	alert('哦你' + '未成年!');
}

上面代码中age是17,判断大于等于18失败,结果为false,所以不会运行alert('成年了');

然后在第1对花括号的结束部分加了个else再来一对花括号包住了一个alert语句,条件不成立时,就会执行这个语句

else if语句(又如果) ¶

程序中还会经常存在一种"如果...又如果...又如果...否则..."这样的逻辑来做事情,反正跟人思考是一样的啦,要实现又如果则需要通过else if语句来实现,例子:

var time = '2015-01-01';
if(time == '2015-01-06'){
	alert('今天爸爸生日'); //不会运行这里
}else if(time == '2015-01-01'){
	alert('今天妈妈生日'); //会运行这里
}
//上面的代码

alert('来来来,准备下一个例子!');

//也可以跟else语句一起用
if(time == '2015-01-06'){
	alert('今天爸爸生日');
}else if(time == '2015-11-13'){
	alert('今天妈妈生日');
}else if(time == '2015-05-22'){ //可以多次else if
	alert('今天弟弟生日');
}else{ //最后接一个else,上面所有if和else if都不成立时就会进入else
	alert('今天没人生日');
}

我想备注已经说明得很清楚else if语句的作用和用法了,但是你要注意3点:

1. else后面必须写个空格再写if,是else if而不是elseif

2. else if语句必须排在if后面,不能作为第1个判断条件

3. else语句和if,else if语句一起用的时候,else必须排在最后,这样当前面所有if判断都不成立的时候才执行else里面的语句

懒人写法 ¶

可以用? :这套运算符来代替简单的if,else逻辑,先看下面这个代码:

var a = 9,
	b; //暂时不定义b的值

if(a > 8){
	b = 17;
}else{
	b = 99;
}
alert(b); //提示17,因为a为9,大于8,所以b被赋值为17

上面的代码通过? :运算符可以简写成下面的代码:

var a = 9,
	b; //暂时不定义b的值

b = a > 8 ? 17 : 99;
alert(b); //得到17

这个运算符的意思是如果?号左边的表达式结果为true,那么就将:号左边的值赋值给变量b;如果?号左边的表达式结果为false,那么就将:号右边的值赋值给变量b

写条件判断时老是要写if(xxxx){}else{}这样的话在某种情况下是挺麻烦的,所以有人会用? :这个运算符来进行简写,但如果代码太长太复杂的话也不要这样写咯,不然自己都看不清楚呢

条件成立的原则 ¶

if表示条件要成立才能执行花括号里面的内容,而括号里面的表达式无论它怎么千变万化,最终都要结果为true才算成立

在JS中的if,有些代码条件看上去结果并不是true,但依然成立,比如

var a = 1;
if(a){
	alert('条件值是数字1,成立');
}

a = 'fdsafds';
if(a){
	alert('条件值是字符串"fdsafds",也成立');
}

a = '0';
if(a){
	alert('条件值是字符串"0",也成立');
}

a = 0;
if(a){
	alert('条件值是数字0,不会进来');
}else{
	alert('条件值是数字0,没成立,所以进了else');
}

a = '';
if(a){
	alert('条件值是空字符串,不会进来');
}else{
	alert('条件值是空字符串,没成立,所以进了else');
}

a = null;
if(a){
	alert('条件值是null,不会进来');
}else{
	alert('条件值是null,没成立,所以进了else');
}

a = undefined;
if(a){
	alert('条件值是undefined,不会进来');
}else{
	alert('条件值是undefined,没成立,所以进了else');
}

呵呵,上面这些条件判断都不是true/false的结果,怎么也能走进if else里呢,起码报个错嘛?

其实当它遇到不是true/false的内容是,你可以想像在底层,它会自动转换成true/false的

true 一般代表"是"、"有东西"、"真"
false一般代表"否"、"没东西"、"假"

在部分编程语言(包括JS)中,如果遇到数字0就会自动转换成false,非0就转换成true(包括负数)

空字符串、空字符串、null、undefined这些都会自动转换成false,其它就会转换成true

比如下面这块代码判断是不是双数,是双数就提示

var a = 7;
if(a % 2){ //有余数,于是大于0,非0就成立
	alert(a + '是单数');
}

var b = 8;
if(!(b % 2)){ //没有余数,结果是0,变成 !0 ,0被转换成false,再 !false 结果为true,于是最终成立
	alert(b + '是双数');
}