从无到有的学习JavaScript———第三篇（流程控制语句）

1. 语句块

最基本的语句是用于组合语句的语句块，JS中使用大括号构成语句块 。ES6之前语句块是没有作用域的，从ES6开始支持块作用域，let只能在块作用域中可见。

{
   statement_1;   
   statement_2;
   statement_3;
   .
   .
   .
   statement_n;
}

function hello(){
    let a = 1;
    var b = 2;
    c = 3
}

if (1){
    let d = 4;
    var e = 5;   // 提升变量
    f = 6

    if(true){
        console.log(d)  // 4
        console.log(e)  // 5
        console.log(f)  // 6
        console.log('~~~~~~~~~~~~~')
        g = 10
        var h = 11
    }
}

// console.log(a)
// console.log(b)
// console.log(c)  // 函数作用域声明的局部变量，不可见
// console.log(d)  // 块作用域使用let声明，不可见
console.log(e)  // 5
console.log(f)  // 6
console.log(g)  // 10
console.log(h)  // 11

2. 流程控制

2.1 条件分支

if(cond1){
    语句体1
}else if(cond2){
    语句体2
}else if(cond3){
    语句体3
}
esle{
    语句体4
}

等效为false的有：false、undefined、null、0、NaN、空字符串，其他的都等效为true。特别的，[], {}等效为true，这一点与python不同。

2.2 switch...case分支语句

    case label_1:
        语句体1;
        [break;]
    case label_2:
        语句体2;
        [break;]
    ...
    default:
        语句体;
        [break;]
}

程序首先查找一个与 expression 匹配的 case 语句，然后将控制权转移到该子句，执行相关的语句。如果没有匹配值， 程序会去找 default 语句，如果找到了，控制权转移到该子句，执行相关的语句。如果没有找到 default，程序会继续执行 switch 语句后面的语句。default 语句通常出现在switch语句里的最后面，当然这不是必须的。

let x = 1
switch(x){
    case 0:
        console.log('zero');
        break;
    case 1:
        console.log('one');
    case 2:
        console.log('two');
    case 3:
        console.log('three')
        break;
    case 5:
    case 4:
        console.log('four')
    default:
        console.log('other')
}

/*
*one
*two
*three
*/

2.3 for循环

// C风格for循环
for(let i = 0; i < 10; i++){
    console.log(i)
}
console.log('~~~~~~~~~~~~~~')

for(var x = 0, y = 9; x < 10; x++, y--){
    console.log(x * y)
}
console.log('================')

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

2.4 while循环和do ...while循环

while(condition){
    循环体；
}

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

do{
    {循环体；
    }
while(condition)
}

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

练习：使用JS实现九九乘法表的打印

for(let i = 1; i < 10; i++){
    line = '';
    for(let j = 1; j <= i; j++){
        line += `${j} * ${i} = ${i * j} `  // 注意最后的花括号后有一个空格
    }
    console.log(line)
}

2.5 for ...in循环

对象操作语句for...in用来遍历对象的属性。

for(variable in object){
    statements
}

// 数组
let arr = [10, 20, 30, 40]

console.log(arr[1])

for(let x in arr){
    console.log(x)  // x 为数组的索引
}

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

//C风格
for(let i = 0; i < arr.length; i++){
    console.log(arr[i])
}

// 对象
let obj = {
    a: 1,
    b: 'magedu',
    c: true
};
console.log(obj.a)  // 1
console.log(obj['b'])  // magedu
console.log(obj.d)  // undefined
console.log('~~~~~~~~~~~~~~~~')

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

for(let key in obj){
    console.log(`${key}: ${obj[key]}`)
}

注意：for...in循环返回的是索引或key，需要间接访问到值。数组反正返回的是索引，C风格for循环操作可能简便些。

2.6 for... of循环

ES6的新语法

// for of
let arr = [1, 2, 3, 4, 5];
let obj ={
    a: 3,
    b: 'sun',
    c: false
};
for(let i of arr){
    console.log(i)  // 拿到的是数组的元素
}

for(let j of obj){
    console.log(j)  // 异常不可迭代，只能通过键拿到值
}

注意： for ... of 不能迭代对象原因是，of后面必须是一个迭代器。

break、continue:break终止当前循环，continue中断当前循环，直接进入下一次循环。