64ES6_流程控制

?

?

目錄

語法：... 1

流程控制：... 2

for循環(huán)：... 3

while循環(huán)、do...while循環(huán)：... 4

for ... in循環(huán)：... 5

for ... of循環(huán)：... 6

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

break、continue：... 8

?

?

?

?

語法：

?

語句塊：

js使用大括號構(gòu)成語句塊；

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

?

函數(shù)內(nèi)的let、var、隱式聲明都對外不可見；

塊作用僅對let有效（即用let定義的對外不可見，var和隱式聲明的對外可見）；

?

例：

function hello() {?? //函數(shù)內(nèi)的let、var、隱式聲明都對外不可見

??? 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等效：undefined、null、0、NaN、''（空字串）；其它值都被視為true；

?

?

switch...case分支語句：

所有的switch...case都能轉(zhuǎn)為if...else；

另switch...case支持模式；

穿透問題，要恰當(dāng)?shù)氖褂?/span>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循環(huán)：

C風(fēng)格；

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

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

???????? statement

}

?

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

for (;;) {}?? //死循環(huán)

?

例：

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循環(huán)、do...while循環(huán)：

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

?

while (condition) {?? //條件滿足，進(jìn)入循環(huán)，條件為真，繼續(xù)循環(huán)；大括號內(nèi)語句只有一句，大括號可省

???????? statement

}

?

do { ??//先進(jìn)入循環(huán)，然后判斷，為真就繼續(xù)循環(huán)

???????? 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循環(huán)：

對象操作語句，用來遍歷對象的屬性，另數(shù)組中索引也是屬性；

數(shù)組用for ... in返回的是索引；

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

根據(jù)個人喜好，或用C風(fēng)格的for循環(huán)，或用for ... in都可；

?

注：

js的對象，與py的字典類似；

?

例：

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

// let arr = {?? //數(shù)組可理解為像對象這種定義方式，但不能用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循環(huán)：

ES6新語法，for ... of不能迭代對象，of后面必須是一個迭代器，可類比py的for in，如for i in []；

遍歷數(shù)組中的values，即數(shù)組中的元素，適合取數(shù)組的所有元素，若有條件在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);?? //返回數(shù)組元素，而不是索引

}

?

// for (let i of obj) {?? //error，ReferenceError: 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或?qū)ο髮傩?/span>

??????? 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++) {?? //自定義索引數(shù)值遍歷

??????? 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

?

?

?

break、continue：

break，結(jié)束當(dāng)前循環(huán)；

continue，中斷當(dāng)前循環(huán)，直接進(jìn)入下一次循環(huán)；

?

?

?

?