ES6 JavaScript 条件循环等控制语句

1、if 条件分支语句

1.1 语法

if (cond1) {
	...
}
else if (cond2) {
	...
}

...

else {
	...
};

1.2 示例

function bigOrSmall(x, y) {
    if (x === y) {
        console.log(`${x} is equal to ${y}.`)
    }
    if (x > y) {
        console.log(`${x} is bigger than ${y}.`)
    }
    if (x < y) {
        console.log(`${x} is samller than ${y}.`)
    }
}

bigOrSmall(2, 3)
bigOrSmall(3, 2)
bigOrSmall(2, 2)

Info: Start process (下午6:02:30)
2 is samller than 3.
3 is bigger than 2.
2 is equal to 2.
Info: End process (下午6:02:30)

2、switch…case 分支语句

• 一定要注意穿透问题，一定要在 case 中恰当的使用 break 语句，否则就会继续向下执行

2.1 语法

switch (expression) {
	case label_1:
		statements_1
		[break;]
	case labe1_2:
		statements_2
		[break;]
	...
	default:
		statements_def
		[break;]
}

2.2 示例

function test(x) {
    switch (x) {
        case 0:
            console.log("I'm Zero!")
            break;
        case 1:
            console.log("I'm One!")
            break;
        default:
            console.log("I'm not either Zero or One!")
    }
};

test(0)
test(1)
test(2)

Info: Start process (下午6:48:30)
I'm Zero!
I'm One!
I'm not either Zero or One!
Info: End process (下午6:48:30)

3、for 循环语句

3.1 语法

for ([initial Expression]; [Condition]; [increment Expression]) {
	statement
}

3.2 示例

for (let i=0; i<3; i++){
    console.log(i)
}

console.log("=".repeat(25))

for (let x=0, y=9; x<3; x++, y--) {
    console.log(x*y)
}

console.log("=".repeat(25))

for (let j=0; j<9; j+=3) {
    console.log(2*j)
}

Info: Start process (下午12:23:06)
0
1
2
=========================
0
8
14
=========================
0
6
12
Info: End process (下午12:23:06)

4、while 循环

4.1 语法

条件满足，进入循环，条件为真，继续循环。

while (condition) ｛
	statement
｝

4.2 示例

let i = 0;
while (i++ < 3) {
    console.log(i)
}

Info: Start process (下午12:27:29)
1
2
3
Info: End process (下午12:27:29)

5、do…while 循环

5.1 语法

先进入循环，然后判断，为真就继续循环。

do ｛
	statement
｝ while (condition);

5.2 示例

let i = 0;
do {
    console.log(i)
} while (++i < 3);

Info: Start process (下午3:46:44)
0
1
2
Info: End process (下午3:46:44)

6、for…in 循环

• 对象操作语句 for…in 用来遍历对象的属性
• for…in 循环返回的是索引或者key，需要间接访问 value
• 如果想需要直接访问 value，可使用 C 风格的 for…in 循环
• 对象使用 for…in 合适

6.1 语法

for （variable in object） {
	statements
}

6.2 数组 — 示例

let arr = [1, 2, 3]
console.log(arr)
console.log(arr[1], arr[2], arr[5])

for (let x in arr) {
    console.log(x);  // 返回索引
};

for (let index in arr) {
    console.log(`${index} : ${arr[index]}`);  // 插值
};

Info: Start process (下午4:23:09)
[ 1, 2, 3 ]
2 3 undefined
0
1
2
0 : 1
1 : 2
2 : 3
Info: End process (下午4:23:09)

6.3 C风格 — 示例

let arr = [1, 2, 3]
console.log(arr)
console.log(arr[0], arr[1], arr[2])

for (let x=0; x<arr.length; x++) {
    console.log(`arr[${x}]=${arr[x]}`);
}

Info: Start process (下午4:29:11)
[ 1, 2, 3 ]
1 2 3
arr[0]=1
arr[1]=2
arr[2]=3
Info: End process (下午4:29:11)

6.3 对象 — 示例

let obj = {
    a:1,
    b:'Lee',
    c:true
};

console.log(obj.a, obj.b, obj.c)            // 引用对象属性
console.log(obj['a'], obj['b'], obj['c'])   // 对象属性当索引访问
console.log("=".repeat(15))

for (let x in obj) {
    console.log(x);     // 属性名
};

for (let key in obj) {  // 注意观察区别
    console.log(`${key} : ${typeof(key)} : ${obj.key}: ${obj[key]}`);
};

Info: Start process (下午4:48:44)
1 'Lee' true
1 'Lee' true
===============
a
b
c
a : string : undefined: 1
b : string : undefined: Lee
c : string : undefined: true
Info: End process (下午4:48:45)

7、for…of 循环

• ES6 新语法
• 注意：for…of 不能迭代一个普通对象
• of 后面必须是一个迭代器
• 可类比 Python 中的 for in， 例如 for x in [ ]

7.1 语法

for （variable in itera） {
	statements
}

7.2 示例

let obj = {
    a:1,
    b:'Lee',
    c:true
};

let arr = [1, 2, 3]

for (let i of arr) {
    console.log(i);
};

for (let i of obj) { // TypeError: obj is not iterable
    console.log(i);
};

Info: Start process (下午5:12:08)
1
2
3
Error: 
f:\VSCODE\node_e76f10dd2d3b3.tmp:13
for (let i of obj) { // TypeError: obj is not i
Error: 
... ...
Info: End process (下午5:12:08)

8、break/continue 说明

• break 结束当前循环
• continue 中断当前循环，直接进入下一次循环

9、for 迭代的差别

function sum(arr) {
    for (let x in arr) {
        console.log(x, typeof(x), arr[x])
    }

    console.log("=".repeat(15))

    for (let x of arr) {
        console.log(x, typeof(x))
    }

    console.log("*".repeat(15))

    for (let x=0; x<arr.length; x++) {
        console.log(x, typeof(x), arr[x])
    }
}

sum([1, 2, 3]);

Info: Start process (下午3:58:03)
0 string 1
1 string 2
2 string 3
===============
1 'number'
2 'number'
3 'number'
***************
0 'number' 1
1 'number' 2
2 'number' 3
Info: End process (下午3:58:03)

10、条件的 True/False 等效

10.1 语法

等效 False ：
		false
		undefined
		null
		0
		NaN
		空字符串
		
其它值都将被视为 True

10.2 示例

if ("") {
    console.log(`"" is True`);
}
else {
    console.log(`"" is False`)
};

if ([]) {
    console.log(`[] is True`);
}
else {
    console.log(`[] is False`)
};

if (null) {
    console.log(`null is True`);
}
else {
    console.log(`null is False`)
};

if (undefined) {
    console.log(`undefined is True`);
}
else {
    console.log(`undefined is False`)
};

if (NaN) {
    console.log(`NaN is True`);
}
else {
    console.log(`NaN is False`)
};

if (0) {
    console.log(`0 is True`);
}
else {
    console.log(`0 is False`)
};

if (1) {
    console.log(`1 is True`);
}
else {
    console.log(`1 is False`)
};

Info: Start process (下午5:37:19)
"" is False
[] is True
null is False
undefined is False
NaN is False
0 is False
1 is True
Info: End process (下午5:37:19)

11、练习 — 使用JS打印九九乘法表

for (let i=1; i<10; i++) {
    line = ''
    for (let j=1; j<=i; j++) {
        line += `${j}*${i}=${j*i} `
    }
    console.log(line)
}

Info: Start process (下午4:09:58)
1*1=1 
1*2=2 2*2=4 
1*3=3 2*3=6 3*3=9 
1*4=4 2*4=8 3*4=12 4*4=16 
1*5=5 2*5=10 3*5=15 4*5=20 5*5=25 
1*6=6 2*6=12 3*6=18 4*6=24 5*6=30 6*6=36 
1*7=7 2*7=14 3*7=21 4*7=28 5*7=35 6*7=42 7*7=49 
1*8=8 2*8=16 3*8=24 4*8=32 5*8=40 6*8=48 7*8=56 8*8=64 
1*9=9 2*9=18 3*9=27 4*9=36 5*9=45 6*9=54 7*9=63 8*9=72 9*9=81 
Info: End process (下午4:09:58)