64ES6_流程控制

 

 

目錄

語法:... 1

流程控制:... 2

for循環:... 3

while循環、do...while循環:... 4

for ... in循環:... 5

for ... of循環:... 6

三種for迭代的差別:... 7

breakcontinue... 8

 

 

 

 

語法:

 

語句塊:

js使用大括號構成語句塊;

ES6之前語句塊是沒有作用域的,ES6開始支持作用域,let只能在塊作用域中可見

 

函數內的letvar、隱式聲明都對外不可見;

塊作用僅對let有效(即用let定義的對外不可見,var和隱式聲明的對外可見);

 

例:

function hello() {   //函數內的letvar、隱式聲明都對外不可見

    let a = 1;

    var b = 2;

    c = 3;

}

 

// let d = 100;

 

if (1) {   //塊作用域僅對let有效(即用let定義的對外不可見,var和隱式聲明的對外可見)

    let d = 4;

    var e = 5;

    f = 6;

    if (true) {

        console.log(d,e,f);

        g = 7;

        var h = 8;

    }

}

 

// console.log(a);   //error

// console.log(b);   //error

// console.log(c);   //error

// console.log(d);   //error,塊作用域中的不可見;最外層的可見

console.log(e);

console.log(f);

console.log(g);

console.log(h);

輸出:

4 5 6

100

5

6

7

8

 

 

 

 

流程控制:

 

條件分支:

if (cond) {

}

else if (cond2) {

}

else if (cond3) {

}

else {

}

 

條件的false等效:undefinednull0NaN''(空字串);其它值都被視爲true

 

 

switch...case分支語句:

所有的switch...case都能轉爲if...else

switch...case支持模式;

穿透問題,要恰當的使用break,如果沒有break,會一直走下去,直至碰到break

default段不是必須;

switch (expression) {

         case label_1:

                   statement1

                   [break;]

         case label_2:

                   statement2

                   [break;]

         ...

         default:   //不是必須

                   statement_def

                   [break;]

}

 

例:

let a = 1;

switch (a) {

    case 1:

        console.log('1');

        // break;

    case 2:

        console.log('2');

        break;

    default:

        console.log('null');

        break;

}

輸出:

1

2

 

 

 

for循環:

C風格;

大括號中只1條語句時,大括號可省,如if (1) return;等價於if (1) {return ;}

for ([initialExpression]);[condition];[incrementExpression]) { 

         statement

}

 

for (let i=0;i<arr.length;) {}   //死循環

for (;;) {}   //死循環

 

例:

let arr = [10,20,30,40,50];

for (let i=0;i<arr.length;i++) {

    console.log(i,arr[i])

}

輸出:

0 10

1 20

2 30

3 40

4 50

 

 

 

while循環、do...while循環:

一般用while (true) {},有條件退出用for

 

while (condition) {   //條件滿足,進入循環,條件爲真,繼續循環;大括號內語句只有一句,大括號可省

         statement

}

 

do {   //先進入循環,然後判斷,爲真就繼續循環

         statement

} while (condition);

 

例:

let i = 10;

while (i--) {

    console.log(i);

}

 

do {

    console.log(i)

} while (i++ < 10)

 

例,99乘法表:

for (let x=1;x<10;x++) {

    line = '';

    for (let y=1;y<=x;y++) {

        line += `${y}*${x}=${x*y} `;   //插值

        if (x == y)

            console.log(line);

    }

}

 

 

for ... in循環:

對象操作語句,用來遍歷對象的屬性,另數組中索引也是屬性;

數組用for ... in返回的是索引;

對象用for ... in返回的是key

根據個人喜好,或用C風格的for循環,或用for ... in都可;

 

注:

js的對象,與py的字典類似;

 

例:

let arr = [10,20,30,40,50];

// let arr = {   //數組可理解爲像對象這種定義方式,但不能用arr.0這樣訪問,不能這樣操作

//     0:10,

//     1:20,

//     2:30

// }

 

for (i in arr) {

    console.log(i, arr[i]);

}

輸出:

0 10

1 20

2 30

3 40

4 50

 

 

例:

function add(x,y) {

    return x + y

}

 

var obj = {   //py字典訪問一樣

    p1 : 100,

    p2 : 'abc',

    p3 : [1,2,3],

    p4 : add

}

 

console.log(obj['p4'](4,5));   //屬性要用字符串,obj['p4']obj[p4]不可以,p4 is not defined

 

for (let key in obj) {

    console.log(`${key} : ${obj[key]}`);   //插值

}

輸出:

9

p1 : 100

p2 : abc

p3 : 1,2,3

p4 : function add(x,y) {

    return x + y

}

 

 

 

for ... of循環:

ES6新語法,for ... of不能迭代對象,of後面必須是一個迭代器,可類比pyfor in,如for i in []

遍歷數組中的values,即數組中的元素,適合取數組的所有元素,若有條件在for ... in中作判斷;

 

例:

let arr = [10,20,30,40,50];

let obj = {

    p1 : 100,

    p2 : 'abc',

    p3 : [1,2,3]

}

 

for (let i of arr) {

    console.log(i);   //返回數組元素,而不是索引

}

 

// for (let i of obj) {   //errorReferenceError: obj is not defined,不能迭代對象,of後必須是迭代器

//     console.log(i);

// }

console.log(typeof(obj));   //object

輸出:

10

20

30

40

50

object

 

 

 

三種for迭代的差別:

 

function sum(arr) {

    for (let x in arr) {   //遍歷index或對象屬性

        console.log(x, typeof(x), arr[x]);

    }

    for (let x of arr) {   //遍歷元素

        console.log(x, typeof(x));

    }

    for (let x=0;x<arr.length;x++) {   //自定義索引數值遍歷

        console.log(x, typeof(x), arr[x]);

    }

}

 

sum([3,6,9]);

輸出:

0 string 3

1 string 6

2 string 9

3 'number'

6 'number'

9 'number'

0 'number' 3

1 'number' 6

2 'number' 9

 

 

 

breakcontinue

break,結束當前循環;

continue,中斷當前循環,直接進入下一次循環;

 

 

 

 


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章