Web前端開發工程師知識體系_04_JavaScript基礎（二）

在JavaScript當中，程式的執行方式分為選擇執行、回圈執行、順序執行，通常的程式代碼都是順序執行，

var a = 3;
console.log(a);

比如上面這兩行簡單的代碼，先賦值，再列印，這就是順序執行，

我們這期的重點為選擇執行和回圈執行，選擇執行的典型代表就是流程控制，如if陳述句、if-else陳述句、if-else嵌套、switch-case陳述句，接下來我們將依次進行描述，而回圈執行則是常見的while回圈、do-while回圈、for回圈和回圈嵌套，

一、流程控制（選擇執行）

1.if陳述句

if ( 條件運算式 ) {
      陳述句塊
}

它的格式很簡單，常用來進行判斷，先判斷if之后的條件是否滿足，如果滿足則執行陳述句塊，比如判斷一個人的年齡，是否為成年人，代碼如下：

var age = 30;
if (age >= 18){
	console.log('成年人');//"成年人"
}

定義了年齡為30，使用if進行判斷，30大于18，所以列印“成年人”，

需要注意的是：·如果if后的陳述句塊中只有一行代碼，則 { } 可以省略，

2.if-else陳述句

if ( 條件運算式 ) {
     陳述句塊1
}else{
     陳述句塊2
}

if-else陳述句與if陳述句的區別僅僅在于加了else判斷，先判斷if后的條件是否滿足，如果滿足執行陳述句塊1，不滿足則執行else后的陳述句塊2，再拿上面的成年人來進行判斷：

var age = 12;
if (age >= 18){
	console.log('成年人');
}else{
	console.log('未成年人');
}

定義年齡age為12，12不大于18，所以要執行else后的陳述句，即列印“未成年人”，

3.if-else嵌套

if ( 條件運算式1 ) {
     陳述句塊1
}else if { 條件運算式n ){
     陳述句塊n
}else {
     陳述句塊n+1( 前面全為false才執行此陳述句塊 )
}

if-else嵌套則是多個if-else陳述句的組合，可以對多個條件進行判斷，舉個列印成績的例子：

var f = 75;
if (f > 100 || f < 0){
	console.losg('非法的成績！');
}else if (f >= 90){
	console.log('優秀');
}else if (f >= 80){
	console.log('良好');
}else if (f >= 70){
	console.log('中等');
}else if (f >= 60){
	console.log('及格');
}else{
	console.log('不及格');
}

定義分數為75分，則依次往下進行判斷，直到符合條件執行該條件下的陳述句塊，該題列印結果為“中等”，

4.switch-case陳述句

switch ( 運算式 ){
      case 值1:
        陳述句塊1
        break;（結束執行，跳出當前陳述句）
      case 值n:
        陳述句塊n
        break;
        default:
        陳述句塊n+1( 前面全為false才執行此陳述句塊 )
}

switch-case陳述句的運行方式為：先判斷switch后的運算式的值，看它的值滿足哪一個case的值，如果滿足則執行該case后的陳述句塊，執行結束后直接跳出（break）陳述句，如果前面都不滿足，則執行default之后的陳述句塊，

switch-case陳述句也可用來判斷成績區間：

var score = 90;
if (score < 0 || score > 100){
	console.log('成績錯誤！！！');
}
var end = parseInt(score /= 10);
switch(end){
	case 10:
	case 9:
		console.log('優秀');
	break;
	case 8:
		console.log('良好');
	break;
	case 7:
		console.log('中等');
	break;
	case 6:
		console.log('及格');
	break;
	default:
		console.log('不及格！');
	}
	

switch-case使用程序中需要注意以下幾點：

運算式在與case后面的值比較的時候，用的是全等于（===）即同時判斷值和型別，
switch-case只能是全等于的比較，但結構更為清晰，執行效率更高

二、回圈陳述句（回圈執行）

1.while回圈

初始值
while ( 回圈條件 ){
      回圈體
      增量
}

while回圈的執行為先判斷回圈條件，回圈條件為true，進入回圈，false則跳出，舉一個簡單的小例子：

var i = 1;
while (i <= 10){
	i++;
	console.log('123456');
}

定義i的值為1，條件為i<=10，如果i滿足條件則進入回圈，i自增后列印“123456”，直到i的值大于10為止，該程式結果為列印10次“123456”，

2.do-while回圈

初始值
do {
    回圈體
    增量
} while ( 回圈條件 ) ;

do-while可以認為與while相反，先進行回圈，再判斷回圈條件，結果為true繼續進入回圈，結果為false則結束，

var i = 1;
do{
	console.log(i);
	i++;
}while (i <= 10);

該程式結果為列印1到10，先進行列印，再判斷條件，直到條件判斷為false跳出回圈，

3.for回圈

for ( 初始值 ; 回圈條件 ; 增量 ) {
        回圈體
}

for回圈可能是在編程程序中使用最多的一個回圈，它的執行方式為從初始值開始，判斷回圈條件，結果為true則執行回圈體，最后執行增量，增量之后再執行回圈條件，直至回圈條件為false時回圈結束，

for (var i = 1;i <= 10;i++){
	console.log(i);
}

該例子同樣為列印1到10，

4.回圈嵌套

所謂回圈嵌套就是在一個回圈體內部又出現了其他的回圈，任意兩個回圈之間都可以進行相互嵌套，嵌套后外層回圈控制回圈的行數；內層回圈控制每一行拼接的數量，

//外層回圈
for (var i = 1;i <= 5;i++){
	//內層回圈
	for (var j = 1,str = '';j <= i;j++){
		str = str + '*';
	}
	console.log(str);
}

如上代碼，兩個for回圈嵌套，外層回圈控制該回圈為5行，內層則控制列印的行內容為‘*’且*的數量不斷自增，效果如下：

了解了選擇與回圈陳述句后，我們通過幾道例題來鞏固一下：

//1.一張紙可以折無限次數，紙的厚度為0.03毫米，問：折多少次可以達到珠穆朗瑪峰高度8848米？
var h = 0.00003;//初始化紙的厚度為0.00003
var count = 0;//count用于記錄次數
do
{
	h *= 2;//h = h * 2
	count++;
}
while (h <= 8848);//直到h的值大于8848，跳出回圈
console.log(count);//列印次數

//2.用while函式寫出1~100之間所有偶數的和
var i = 1;
var sum = 0;//sum用于記錄最后的和
while (i <= 100){//判斷條件i為1~100
	if (i % 2 === 0){//與2取余結果為0的則為偶數
		sum += i;
	}
	i++;
}
console.log(sum);
*/

//3.列印九九乘法表
for (i = 9;i >= 1;i--){
	//內層回圈，控制每行列數
	for (j = 9,str = '';j >= i;j--){
		//列 + * + 行 + = + 乘積結果
		str = str + j + '*' + i + '=' + (j*i) + ' ';
		//將第3，4行的第2列后加一個空格
		if (i === 9 && j === 1){
			str = str + '   ';
}
	}
	console.log(str);//每一行拼接結束后即列印
}

//4.列印2000~2100之間前10個閏年
for (var year = 2000,count = 0;year <= 2100;year++){
	//count用于記錄閏年的個數
	if (year % 4 === 0 && year % 100 !== 0 || year % 400 ===0){
		console.log(year);
		count++;
	}
	if (count === 10){
		break;
	}
}
console.log(count);

下期：JavaScript基礎_函式、作用域