《JS&jQuery 交互式web前端开发》（四）判断和循环

4 判断和循环

4.1 判断

进行判断

• 使用流程图
  

判断条件、条件语句

• 上述流程图的代码实现：

  if(score>50){           //如果条件为真返回true
  	document.write('恭喜通过了！');       //返回true执行此语句
  }else{									//否则（返回false）
  	document.write('再测一次···');       //执行此语句
  }
  

• 判断条件：通常使用比较操作符对两个值进行比较，返回true或者false
• 条件语句：基于if（如果）then（那么）else（否则）这样的概念工作

比较操作符：判断条件

• 操作符
  • == 等于：比较两个值（数字、字符串、布尔类型）是否相同
  • != 不等于：比较两个值（数字、字符串、布尔类型）是否不相同
  • === 严格等于：比较两个值，检查数据类型、值是否完全相同
  • !== 严格不等于：比较两个值，检查数据类型、值是否完全不相同
  • > 大于
  • < 小于
  • >= 大于等于
  • <=小于等于
• 例外情况
  • 没个值都可以被“当作”true或者false
  • 短路判断中，条件有可能不需要被执行
• 组织比较操作符
  • 语法：(操作数 比较操作符 操作数)
    • 例：(score >= pass)
  • 表达式的结果：一个单一的值，这里是true/false
• 使用比较操作符

  var pass=50;       //通过的分数
  var score=90;      //用户的分数
  //确认用户是否通过测验
  var hasPassed= score>=pass;
  //更新内容，在页面上显示通过情况
  var el=document.getElementById('answer');
  el.textContent='通过情况：'+hasPassed;
  

• 使用表达式：
  • 操作数也可以是表达式，因为每个表达式的结果都是单一的值

    ((score1+score2) > (highScore1+highScore2))
    

  • 比较两个表达式

    var score1=90;
    var score2=95;
    var highScore1=75;
    var highScore2=95;
    //检查总分是否高于目前为止总分的最高分
    //将比较结果赋值给一个变量时，不需要将它包裹在最外面一层小括号中
    var comparison = (score1+score2)>(highScore1+highScore2);
    //将结果显示在页面上
    var el=document.getElementById('answer');
    el.textContent="获得新的最高分："+comparison;
    

逻辑操作符

• 作用：将多个比较操作符的结果放在一起进行比较

  • 例：3个表达式，每个表达式都会得到true/false的结果

    ((5<2) && (2>=3))
    

• 三个逻辑操作符

  • 与 &&：检测多个条件

  表达式	结果
  true&&true	true
  true&&false	false
  false&&false	false
  false&&true	false

  • 或||：检测至少一个条件

  表达式	结果
  false||false	false
  true||true	true
  true||false	true
  false||true	true

  • 非!：操作单一布尔变量，对其取反

  表达式	结果
  !false	true
  !true	false

• 短路条件

  • 逻辑表达式从左到右进行计算，若第一个条件可以为最终结果提供足够信息，则没有必要计算后续条件
  • false && 任何条件：最终结果 false
  • true || 任何条件：最终结果 true

• 使用逻辑操作符示例

  • 与 &&

    //判断用户是否两次均通过测验
    var score1=8;
    var score2=8;
    var pass1=6;
    var pass2=6;
    //检查用户是否两次均通过测验，将结果保存在变量passBoth中
    var passBoth = ((score1>=pass1)&&(score2>=pass2));
    //创建消息
    var msg='两次测验通过情况：'+passBoth;
    //在页面上显示通过消息
    var el=document.getElementById('answer');
    el.textContent=msg;
    

  • 或||、非!

    //判断用户是否至少通过一次测验
    var score1=8;
    var score2=8;
    var pass1=6;
    var pass2=6;
    //检查用户是否至少通过一次测验，将结果保存在变量minPass中
    var minPass = ((score1>=pass1)||(score2>=pass2));
    //创建消息：如果已通过至少一次，则不用再次测验
    var msg='是否要再次测验：'+!(minPass);
    //在页面上显示通过消息
    var el=document.getElementById('answer');
    el.textContent=msg;
    

if语句

• 作用：对条件进行判断，如果该条件结果为true，执行后续代码块中的内容（结果为false则不执行）

  //满足score>=50条件则执行{ }内语句
  if(score>=50){
  	congratulate();
  }
  

• 使用

  • 满足条件：执行{ }内语句

    var score=75;
    var msg;
    if(score>=50){
    	msg='祝贺！';
    	msg+='进入下一环节';
    }
    var el=document.getElementById('answer');
    el.textContent=msg;
    

  • 示例：代码不会按编写顺序执行

    //以上代码的另一个版本
    var score=75;
    var msg;
    
    function congratulate(){
    	msg+='祝贺！';
    }
    
    if(score>=50){
    	congratulate();
    	msg+='进入下一环节';
    }
    var el=document.getElementById('answer');
    el.textContent=msg;
    

• if-else语句

  条件结果	执行内容
  true	第一个代码块
  false	第二个代码块

  if(score>=50){
  	congratulate();      //结果为true时执行的代码
  }else{
  	encourage();        //结果为false时执行的代码
  }
  

  • 使用

    var score=75;
    var pass=50;
    var msg;
    //基于分数，选择显示的消息内容
    if(score>=50){
    	msg='祝贺通过！';
    }else{
    	msg='继续努力！';
    }
    var el=document.getElementById('answer');
    el.textContent=msg;
    

switch语句

• 作用
  • switch语句开头是被称作分支值的变量，每个 case表示一个条件，当条件中的值匹配变量值时，执行后续语句
  • break关键字：告诉JavaScript解释器switch语句执行完毕

    switch(level){            //level：分支值
    	case 'one':           //如果level的字符串是“one”，执行第一个case中的代码
    		title='level 1';
    		break;
    	case 'two':           //如果level的字符串是“two”，执行第二个case中的代码
    		title='level 2';
    		break;
    	case 'three':         //如果level的字符串是“three”，执行第三个case中的代码
    		title='level 3';
    		break;
    	default:              //如果以上都不是，执行default中的代码
    		title='test';
    		break;
    }
    

• 使用

  //根据用户不同级别显示不同信息
  var msg;		 //变量msg用来保存要显示的消息
  var level=2;     //变量level中包含一个数值，表明用户级别，随后被用来当作分支值
  
  //根据不同级别显示信息
  switch(level){
  	case 1:
  		msg='first!';
  		break;
  	case 2:
  		msg='second!';
  		break;
  	case 3:
  		msg='third!';
  		break;
  	default:
  		msg='good luck!';
  }
  

比较 if-else 和 switch

• if-else
  • else非必需
  • 连续使用多个if语句时，即使已经找到匹配，每个if 语句都会被执行检测，因此效率较慢
• switch
  • 使用default处理所有case之外的情况
  • 如果找到一个匹配，执行相应代码，然后break语句停止执行其他分支，相比同样功能的if语句性能较好

强制类型转换和弱类型

• 强制类型转换

  • 含义：如果使用的数据类型不同于JavaScript所需的数据类型，JavaScript会在背后进行数据类型转换
  • 例：('1'>0)中，字符串'1' 会被转换成数字1，使表达式结果为true

• 弱类型：

  • JavaScript被称作弱类型语言，因为值的数据类型可以改变
  • 注意
    • 检测两个值是否相等时，推荐使用更加严格的=== !== 代替== !=（可以同时检测值、类型）

• 真值和假值

  • 真值：被视为true，可以被当作数字1（几乎在假值表以外的所有值都是真值）

  值	描述
  var highScore = true;	传统的布尔值true
  var highScore = 1;	非0数字
  var highScore = 'carrot ';	非空字符串
  var highScore = 10/5;	数字运算（结果非0）
  var highScore = ‘true’;	字符串true
  var highScore = ‘false’;	字符串false
  var highScore = ‘0’;	字符串0

  • 假值：被视为false，可以被当作数字0

  值	描述
  var highScore = false;	传统的布尔值false
  var highScore = 0;	数字0
  var highScore = ’ ';	空字符串
  var highScore = 10/‘score’;	NaN
  var highScore;	没有被赋值的变量

• 检测相等和存在

  • 对象和数组被视为真值，因此常被用来判断页面中的元素是否存在

    if(document.getElementById('header')){
    	//找到元素后进行的操作
    }else{
    	//没找到元素，进行其他操作
    }
    

  • 考虑强制类型转换

    	表达式	结果
    一般情况	false == 0	true
    	false === 0	false
    	false == ' '	true
    	false === ' '	false
    null、undefined (除自身外不等于任何值)	undefined == null	true
    	undefined === null	false
    	null == false、undefined == false	false
    	null == 0、undefined == 0	false
    NaN (不等于任何值)	NaN == null	false
    	NaN == NaN	false

• 短路值

  • 短路：逻辑操作符从左向右运算，当获得确定结果时立刻发生“短路”（停止运算），但是会返回停止运算时的值（不一定是true/false）
  • 例：

    //如果artist有值，返回与artist相同的值
    var artist='rembrandt';
    var artistA = (artist||'unkown');
    
    //如果artist是空字符串，返回字符串unkown
    var artist='';
    var artistA = (artist||'unkown');
    
    //如果artist没有值，可以创建空对象
    var artist='';
    var artistA = (artist||{});
    

    //当脚本执行到逻辑运算的valueB时，该语句会被短路，执行{}中语句
    var valueA=0；
    var valueB=1;        //1被视为真值
    var valueC=2;
    if(valueA||valueB||valueC){
    	//进行一些操作
    }
    

• 使用建议

  • “或”运算中，把最可能返回true的放在第一个位置；“与”运算中，把最可能返回false的放在第一个位置
  • 把最耗时的判断操作放在最后

4.2 循环

三种类型：for、while、do while

• for

  • 作用：将一段代码运行特定的次数，根据计数器检查循环条件

    //当条件i<10不再为true时，循环结束，脚本继续执行后续代码
    for(var i=0;i<10;i++){      //()内为计数器，用来计算循环需要进行多少次
    	document.write(i);      //循环过程中执行的代码
    }
    

  • 循环计数器（以 var i=0;i<10;i++ 为例）
    • 初始化 var i=0;
    • 条件 i<10;
    • 更新 i++
  • 使用：
    • 常被用来遍历数组中的条目

      //将每一轮测验的成绩保存在数组scores中
      var scores=[24,32,17];
      var arrayLength=scores.length;   //通过数组的length属性获取数组条目总数
      var roundNumber=0;               //记录测验当前在第几轮
      var msg='';
      var i;
      for(i=0;i<arrayLength;i++){
      	roundNumber=i+1;
      	msg+='第'+roundNumber+'轮成绩为：'+scores[i];
      }
      document.getElementById('answer').innerHTML=msg;
      

• while

  • 作用：不知道代码要循环多少次时使用，若判断条件为true则一直重复运行对应的代码
  • 使用：

    //显示1～9与5相乘的等式，输出：5的乘法表
    var i=1;
    var msg='';
    while(i<10){
    	msg += i+'x5='+(i*5)+'<br/>';
    	i++;
    }
    document.getElementById('answer').innerHTML=msg;
    

• do while

  • 作用：类似while循环，但在do while循环中，即使条件返回false，对应代码也会运行至少一次
  • 使用：

//即使i=1不满足i<1条件，循环还是会执行一次，输出：1x5=5
var i=1;
var msg='';
do{
	msg += i+'x5='+(i*5)+'<br/>';
	i++;
}while(i<1);

重要概念

• 关键字
  • break：导致循环结束，通知解释器继续执行循环体之外的后续代码
  • continue：通知解释器立即执行下一循环迭代，然后进行条件检查（如果返回true则再次执行）
• 循环和数组：用循环分别为数组中的每个条目执行同样的代码
• 性能考虑：
  • 当浏览器遇到一段JavaScript脚本时，会停下手头所有工作，直到这段脚本运行结束
  • 任何能够在循环之外赋值、在循环过程中不会被改变的变量，都应该在循环外进行赋值

4.3 示例

example4.html文件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>example4</title>
</head>
<body>
	<section id="page">
		<h1>这是加法表！</h1>
		<section id="blackboard"></section>
	</section>
	<script src="example4.js"></script>
</body>
</html>

example4.js文件

//使用判断和循环，显示给定数字的加法表或乘法表
var table=3;
var operator='addition';     //默认为加法
var i=1;
var msg='';

if(operator==='addition'){     //加法表
	while(i<11){
		msg += i+'+'+table+'='+(i+table)+'<br/>';
		i++;
	}
}else{                       //乘法表
	while(i<11){
		msg += i+'x'+table+'='+(i*table)+'<br/>';
		i++;
	}
}

var el=document.getElementById('blackboard');
el.innerHTML=msg;

运行结果