05-JavaScript基礎-流程控制語句
阿新 • • 發佈:2018-11-15
文章配套視訊
1.什麼是程式碼塊
簡介
程式是由一條一條語句構成的,
語句是按照自上向下的順序一條一條執行的,
在JS中可以使用{}來為語句進行分組
同一個{}中的語句我們稱為是一組語句,
它們要麼都執行,要麼都不執行。
使用
JS中的程式碼塊,
只具有分組的的作用,
沒有其他的用途,
程式碼塊裡面的內容,
在外部是完全可見的。
列如:
javascript { var name = '撩課學院'; console.log("itlike.com"); document.write("喜歡IT, 就上撩課!"); } javascript console.log("name = " + name);
2. 流程控制語句
基本概念
預設情況下,
程式的執行流程是這樣的:
執行程式後,
系統會按書寫從上至下順序
執行程式中的每一行程式碼,
但是這並不能滿足
我們所有的開發需求
如下圖:
實際開發中,
我們需要根據
不同的條件執行
不同的程式碼或者
重複執行某一段程式碼
為了方便我們控制程式的執行流程, JavaScript提供3種流程結構, 不同的流程結構可以實現不同的執行流程。 這3種流程結構分別是 順序、選擇、迴圈: 三種基本控制結構構造. 順序結構 預設的流程結構。按照書寫順序從上至下執行每一條語句 選擇結構 對給定的條件進行判斷,再根據判斷結果來決定執行哪一段程式碼 迴圈結構 在給定條件成立的情況下,反覆執行某一段程式碼
if語句
如果條件表示式為真,執行語句塊1,否則不執行
if(條件表示式) { 語句塊1 } 後續語句;
if(age > 18)
{
console.log("可以上網");
}
````
如果條件表示式為真,則執行語句塊1,否則執行語句塊2
if(條件表示式)
{
語句塊1
}else{
語句塊2
}
if(age > 18)
{
console.log("可以上網");
}else{
console.log("你媽媽喊你吃飯");
}
特點
if和else後面的程式碼塊({})只有一個會被執行 如果條件表示式1為真,則執行語句塊1, 否則判斷條件表示式2, 如果為真執行語句塊2, 否則再判斷條件表示式3, 如果真執行語句塊3, 當表示式1、2、3都不滿足,會執行最後一個else語句
程式碼如下:
if(條件表示式1)
{
語句塊1
}else if(條件表示式2){
語句塊2
}else if(條件表示式3){
語句塊3
}else{
語句塊4
if(age>40)
{
console.log("老年人");
}else if(age>25){
console.log("中年人");
}else if(age>18){
console.log("成年人");
}else{
console.log("未成年");
}
特點
這麼多大括號中只有一個大括號中的內容會被執行
當執行到後面條件的時候證明前面的條件不滿足
else if可以只有一個, 也可以有多個, 但是都必須新增在if和else之間
注意事項
如果只有一條語句時if後面的大括號可以省略
if(age > 18)
console.log("成年人");
注意:受到if管制的只有緊跟其後的那條語句
開發中儘量不要省略大括號
if(false)
console.log("語句1");
console.log("語句2"); // 語句2會被輸出
分號“;”也是一條語句, 空語句
if(4 > 6);
{
console.log("4 > 6");
}
// 輸出結果: 4 > 6, if管制的緊跟其後的那個分號
// {}在JS中僅僅代表告訴系統裡面的語句是一個整體, 沒有別的用途,不會影響程式碼的執行
if else是一個整體, else匹配if的時候匹配離它最近的一個if
if(0)
if(1)
console.log("A");
else
console.log("B");
else
if (1)
console.log("C");
else
console.log("D");
對於非Boolean型別的值,會先轉換為Boolean型別後再判斷
if (0) {
console.log("itlike\n"); // 不會被執行
}
```
判斷變數與常量問題
但凡遇到比較一個變數等於或者不等於某一個常量的時候,把常量寫在前面
// if(a = 0) // 錯誤寫法, 但不會報錯
if (0 == a) {
console.log("a的值是0\n");
}else{
console.log("a的值不是0\n");
}
/*
本來是先判斷變數a儲存的值是否等於0,
但是如果不小心寫成a=0,代表把0儲存到a中.
為了避免這種問題判斷是否相等時把常量寫前面,
因為等號左邊只能是變數, 所以如果少寫一個等號會報錯
*/
if語句可以巢狀使用
var num = 20;
if (num >= 10)
{
if(num <= 30)
{
console.log("一個10~30之間的數")
}
}
習題訓練
從鍵盤輸入一個整數,判斷其是否是偶數,如果是偶數就輸出YES,否則輸出NO
// 1.定義一個變數儲存使用者輸入的整數
var temp;
// 2.利用window.prompt()接收使用者輸入資料
// window.prompt返回給我們的是一個字串, 需要轉換為Number
temp = +(window.prompt("請輸入一個整數"));
// 3.對使用者輸入的資料進行安全校驗
if(isNaN(temp)){
alert("你是SB嗎?");
}else{
// 3.判斷使用者輸入的資料是否是偶數, 然後根據判斷結果輸出YES/NO
/*
if(temp % 2 == 0){
alert("YES");
}else{
alert("NO");
}
*/
(temp % 2 == 0) ? alert("YES") : alert("NO");
}
接收使用者輸入的1~7的整數,根據使用者輸入的整數,輸出對應的星期幾?
// 1.定義變數儲存使用者輸入的資料
var day;
// 2.利用window.prompt()接收使用者輸入資料
day = +(window.prompt("輸入的1~7的整數"));
// 3.判斷當前是星期幾
if(day == 1){
console.log("星期一");
}else if(day == 2){
console.log("星期二");
}else if(day == 3){
console.log("星三");
}else if(day == 4){
console.log("星期四");
}else if(day == 5){
console.log("星期五");
}else if(day == 6){
console.log("星期六");
}else if(day == 7){
console.log("星期日");
}else{
console.log("滾犢子");
}.
接收使用者輸入的一個整數month代表月份,根據月份輸出對應的季節?
第一種:
// 1.定義變數儲存使用者輸入的資料
var month;
// 2.利用window.prompt()接收使用者輸入資料
month = +(window.prompt("請輸入一個1-12的月份"));
// 3.資料安全校驗
if(isNaN(month)){
alert("火星SB?");
}else{
// 4.根據輸入的資料判斷輸出對應的月份即可
if(month >= 3 && month <= 5){
alert("春季 ");
}else if(month >=6 && month <= 8){
alert("夏季");
}else if(month >=9 && month <= 11){
alert("秋季");
}else if(month == 12 || month == 1 || month == 2){
alert("冬季");
}else{
alert("火星季節");
}
}
第二種:
// 1.定義變數儲存使用者輸入的資料
var month;
// 2.利用window.prompt()接收使用者輸入資料
month = +(window.prompt("請輸入一個1-12的月份"));
// 3.資料安全校驗
if(isNaN(month)){
alert("火星SB?");
}else{
// 4.根據輸入的資料判斷輸出對應的月份即可
if(month < 1 || month > 12){
alert("火星季節");
}else if(month >= 3 && month <= 5){
alert("春季 ");
}else if(month >=6 && month <= 8){
alert("夏季");
}else if(month >=9 && month <= 11){
alert("秋季");
}else{
alert("冬季");
}
}
第三種:
// 1.定義變數儲存使用者輸入的資料
var month;
// 2.利用window.prompt()接收使用者輸入資料
month = +(window.prompt("請輸入一個1-12的月份"));
// 3.資料安全校驗
if(isNaN(month)){
alert("火星SB?");
}else{
// 4.根據輸入的資料判斷輸出對應的月份即可
if(month == 12 || month == 1 || month == 2){
alert("冬季"); // 沒有進入, 剩下的必然是3-11
}else if(month >=9){
alert("秋季"); // 沒有進入, 剩下的必然 3-8
}else if(month >=6){
alert("夏季"); // 沒有進入, 剩下的必然 3-5
}else if(month >= 3){
alert("春季 ");
}else{ // 12 1 2
alert("火星季節");
}
}
從鍵盤輸入2個整數,判斷大小後輸出較大的那個數?
// 1.定義變數儲存三個整數
var a, b;
// 2.利用window.prompt接收使用者輸入的資料
a = +(window.prompt("請輸入內容"));
b = +(window.prompt("請輸入內容"));
// 3.利用if進行兩兩比較
if(a > b){
console.log(a);
}else{
console.log(b);
}
/*
三元運算子好處:可以簡化if else程式碼
弊端 :因為是一個運算子所以運算完必要要有一個結果。
簡單用三元 複雜用if(閱讀性好)
*/
console.log(a > b? a: b);
從鍵盤輸入3個整數,排序後輸出?
常規寫法
// 1.定義變數儲存三個整數
var a, b, c;
// 2.利用window.prompt接收使用者輸入的資料
a = +(window.prompt("請輸入內容"));
b = +(window.prompt("請輸入內容"));
c = +(window.prompt("請輸入內容"));
// 方式1 寫出所有方式
if (a >= b && b >=c) {
console.log(a, b, c);
}else if (a >= c && c >= b) {
console.log(a, c, b);
}else if (b >= a && a >= c) {
console.log(b, a, c);
}else if (b >= c && c >= a) {
console.log(b, c, a);
}else if (c >= a && a >= b) {
console.log(c, a, b);
}else if (c >= b && b >= a) {
console.log(c, b, a);
}
選擇排序
// 1.定義變數儲存三個整數
var a, b, c;
// 2.利用window.prompt接收使用者輸入的資料
a = +(window.prompt("請輸入內容"));
b = +(window.prompt("請輸入內容"));
c = +(window.prompt("請輸入內容"));
// 方式2 選擇排序
var temp;
if (a > b) {
temp = a;
a = b;
b = temp;
}
if (a > c) {
temp = a;
a = c;
c = temp;
}
if ( b > c) {
temp = b;
b = c;
c = temp;
}
console.log(a, b, c);
氣泡排序
// 1.定義變數儲存三個整數
var a, b, c;
// 2.利用window.prompt接收使用者輸入的資料
a = +(window.prompt("請輸入內容"));
b = +(window.prompt("請輸入內容"));
c = +(window.prompt("請輸入內容"));
// 方式3 氣泡排序
var temp;
if (a > b) {
temp = a;
a = b;
b = temp;
}
if (b > c) {
temp = b;
b = c;
c = temp;
}
if ( a > b) {
temp = a;
a = b;
b = temp;
}
console.log(a, b, c);
石頭剪子布實現?
// 定義 0.剪刀 1.石頭 2.布
// 1、定義變數 玩家和電腦
var player,computer = 0;
// 2、讓電腦先出拳
var temp = Math.random() * 3;
// 3、使用者出拳
var player = window.prompt("請出拳:0.剪刀 1.石頭 2.布");
// 資料合法性的校驗
if (player<0||player>2) {
window.prompt("請重新出拳:0.剪刀 1.石頭 2.布");
}else{
// 4、判斷比較 //先判斷使用者贏的情況
if((player==0&&computer==2)||
(player==1&&computer==0)||
(player==2&&computer==1)){
window.alert("我靠,你贏了!\n");
}else if((computer==0&&player==2)||
(computer==1&&player==0)||
(computer==2&&player==1)){
window.alert("很遺憾,你輸了!\n");
}else{
window.alert("平局\n");
}
}
3. 迴圈
迴圈結構是程式中一種很重要的結構。其特點是,在給定條件成立時,反覆執行某程式段, 直到條件不成立為止。
給定的條件稱為迴圈條件,反覆執行的程式段稱為迴圈體
迴圈結構簡單來說就是:一次又一次的執行相同的程式碼塊
現實生活中的循壞
JavaScript中的循壞
while語句
do-while語句
for語句
while迴圈
格式
while ( 條件表示式 ) {
語句1;
語句2;
....
}
執行流程
判斷條件表示式是否為真, 如果為真執行後面大括號中的內容
執行完畢再次判斷條件表示式是否還為真,如果為真執行後面大括號中的內容
重複上述過程,直到條件不成立就結束while迴圈
var num = 0;
while (num < 10){
console.log(num);
num++;
}
構成迴圈結構的幾個條件
迴圈控制條件(條件表示式)
迴圈退出的主要依據,來控制迴圈到底什麼時候退出
迴圈體(while後面的大括號{})
迴圈的過程中重複執行的程式碼段
迴圈結束語句(遞增,遞減,break等)
能夠讓迴圈條件為假的依據,否則退出迴圈
while迴圈特點
如果while中的條件一開始就不成立,那麼迴圈體中的語句永遠不會被執行
var num = 10;
while (num < 10){
alert(num); // 什麼都不彈
num++;
}
while循壞注意點
死迴圈
條件表示式永遠為真, 循壞永遠無法結束,我們稱之為死迴圈
while (true){
alert("itlike.com");
}
任何值都有真假性
對於非Boolean型別的值, 會先轉換為Boolean型別再判斷
while (1){ // 先把1轉換為Boolean, 然後再判斷真假
alert("itlike.com");
}
while 後如果只有一條語句它可以省略大括號
如果省略大括號, while只會管制緊跟其後的那條語句
while (0)
alert("會執行我麼?"); // 不會執行
alert("itlike.com");
分號問題
分號(;)也是一條語句, 代表空語句
while (0);
{
alert("123"); // 會被執行, 因為while管制的是分號(;)
}
最簡單的死迴圈
開發中慎用死迴圈, 會導致程式阻塞
while (1);
while循壞練習
提示使用者輸入一個正整數n, 計算1 + 2 + 3 + ...n的和
// 1.定義變數儲存上一次的和
var sum = 0;
// 2.定義變數儲存遞增的數
var number = 1;
while (number <= 5) {
console.log("sum = "+ sum +" + number = "+ number);
sum = sum + number;
number++;
}
console.log("sum = " + sum);
獲取1~100之間 7的倍數的個數並列印,並統計個數
var count = 1;
var num = 0;
while (count <= 100) {
if (count % 7 == 0) {
console.log("count = " + count);
num++;//計數器
}
count++;
}
console.log("number = "+ num);
break關鍵字
作用
跳出Switch語句
var num = 1;
switch(num){
case 1:
console.log("壹");// 輸出壹
break; // 跳出switch語句, 後面程式碼不會執行
case 2:
console.log("貳");
break;
default:
console.log("非法數字");
break;
}
跳出迴圈語句
var num = 0;
while(true){
console.log(num);
if(3 == num){
break; // 當num等於3時跳出迴圈
}
num++
}
注意點
break關鍵字只能用於迴圈語句和switch語句, 在其它地方沒有意義
break; // 瀏覽器會報錯
alert("我會輸出麼?");
if(true){
break; // 瀏覽器會報錯
alert("我會輸出麼?");
}
```
在多層迴圈中,一個break語句只向外跳一層
while (1){
while (2){
console.log("我是while2"); // 會被輸出多次
break; // 跳出while2,但是不會跳出while1
}
console.log("我是while1");
}
break後面的語句永遠不會被執行
while (1){
break;
alert("會彈出來麼?"); // 不會彈出
}
continue關鍵字
作用
跳過當前迴圈體中剩餘的語句而繼續下一次
var num = 0;
while (num < 10){
num++;
if(num % 2 == 0){
continue;
}
console.log(num); // 1, 3, 5, 7, 9
}
注意點
只能用於迴圈結構, 在其它地方沒有意義
continue後面的語句永遠不會被執行
while (1){
continue;
alert("會彈出來麼?"); // 不會彈出
}
do-while迴圈
格式
do {
語句1;
語句2;
....
} while ( 條件 );
執行流程
首先會執行一次迴圈體中的語句
接著判斷while中的條件表示式是否為真,如果為真再次執行迴圈體中的語句
重複上述過程,直到條件不成立就結束while迴圈
特點
不管while中的條件是否成立,迴圈體中的語句至少會被執行一遍
應用場景
口令校驗
for迴圈
JavaScript中的for語句使用最為靈活,
不僅可以用於迴圈次數已經確定的情況,
而且可以用於迴圈次數不確定而只給出迴圈結束條件的情況,
它完全可以代替while語句。
格式
for(①初始化表示式;②迴圈條件表示式;④迴圈後操作表示式)
{
③執行語句;
}
for迴圈執行流程
for迴圈開始時,會先執行初始化表示式,而且在整個迴圈過程中只執行一次初始化表示式
接著判斷迴圈條件表示式是否為真,如果條件為真,就會執行迴圈體中的語句
迴圈體執行完畢後,接下來會執行迴圈後的操作表示式
執行完迴圈後操作表示式, 然後再次判斷迴圈條件表示式是否為真,如果條件為真,就會執行迴圈體中的語句
重複上述過程,直到條件不成立就結束for迴圈
for(var i = 0; i < 10; i++){
alert(i); // 輸出0-9
}
for迴圈和while迴圈如何選擇?
一般情況下while和for可以互換, 但是如果迴圈執行完畢之後就不需要使用用於控制迴圈的增量, 那麼用for更好
注意點
for迴圈中初始化表示式,迴圈條件表示式,
迴圈後操作表示式都可以不寫
迴圈條件表示式預設為真
for(; ;) 語句相當於while(1), 都是死迴圈
其它注意點和while一樣
迴圈巢狀練習
列印好友列表
好友列表1
好友1
好友2
好友3
好友列表2
好友1
好友2
好友3
for (var i = 1; i <= 2; i++) {
console.log("好友列表"+ i);
for (var j = 1; j <= 3; j++) {
console.log(" 好友"+ j);
}
}
for迴圈巢狀實現:列印99乘法表
<style>
span{
display: inline-block;
border: 1px solid #000;
padding: 10px;
}
</style>
<script>
/*
1.觀察發現有很多行很多列--》迴圈巢狀
2.尖尖朝上,讓內迴圈條件表示式隨著外迴圈i改變
3.輸出的結果等於 內迴圈的變數 * 外迴圈的變數
*/
for (var i = 1; i <= 9; i++) {
for (var j = 1; j <= i; j++) {
document.write("<span>"+j+"*"+i+"="+i*j+"</span>");
}
window.document.write("<br/>");
}
</script>