写在前面

SAST2020前端组授课——JavaScript基础学习教程系列

常见流程控制

if-else

1
2
3
4
5
if ( someFactors ) {
    // true
} else {
    // false
}

do-while、while

1
2
3
while ( someFactors ) {
	// true
}

当条件成立，继续执行，直到while的条件不成立。

1
2
3
do {
    // true
} while ( someFactors )

do-while和while的区别就在于，第一次迭代的时候，while要先判断，do-while会先执行，然后再判断是否满足条件。

for、for-in、for-of

for：

1
2
3
for (语句 1; 语句 2; 语句 3) {
    // 要执行的代码块
}

和C++一样

for-in：枚举对象的属性，返回给迭代变量。

1
2
3
for (x in Object){
    // 要执行的代码块
}

如：

1
2
3
4
5
6
7
8
9
10
var data = new Object({
    name: "ZLH",
    age: 20,
    gender: "male",
    birth: new Date("2000-10-6"),
    height: 180
});
for (let x in data) {
    console.log(data[x]);
}

for-of

在ES6中,增加了一个for of循环,使用起来很简单：

1
2
3
4
5
6
7
8
array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for (let x of array) {
    console.log(x);
};
let s = "Hello,SAST!";
for (let c of s) {
    console.log(c);
}

for in总是得到对象的属性或数组、字符串的下标。

for of是直接得到数组或字符串的值，但是不能对对象用。

break和continue

break语句可以跳出当前的循环；

continue用于退出当前循环返回循环起始继续执行

如：获取所有偶数，所有奇数使用 continue 跳过

1
2
3
4
for (let i = 1; i <= 10; i++) {
if (i % 2) continue;
console.log(i);
}

switch

1
2
3
4
5
6
7
8
9
10
switch(表达式) {
     case n:
        代码块
        break;
     case n:
        代码块
        break;
     default:
        默认代码块
}
  • 计算一次 switch 表达式
  • 把表达式的值与每个 case 的值进行对比
  • 如果存在匹配，则执行关联代码

语法形式和C++等语言一样，但是不同于其他语言，JavaScript中的switch有自己的特性：

  • switch语句可以使用任意的数据类型（例如字符串和对象）

  • 每一个case的值不仅仅可以是常量，还可以是变量和表达式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var num = 10;
    switch (true) {
        case num <= 20:
            console.log("<=20");
            break;
        case num > 20:
            console.log(">20");
            break;
        default:
            console.log("Out of order");
    }

function

1
2
3
4
5
6
function functionName (arg1, arg2, ..., argN) {
    ststements;
}
// 定义
functionName(arg1, arg2, ..., argN);
// 调用

函数调用：

函数中的代码将在其他代码调用该函数时执行：

  • 当事件发生时（当用户点击按钮时）
  • 当 JavaScript 代码调用时
  • 自动的（自调用）

ECMAScript arguments 对象

JavaScript函数传递的参数和其他大多数语言的函数传参有所不同。JS不介意传递的参数的数量以及类型。

在JS的解释器执行中，函数的参数，是作为一个数组传递进去的，至于数组中有多少参数（如果有参数的话），在语句执行中，解释器是不会去关注的。

这个参数数组是内置的对象：arguments

例如，在函数 sayHi() 中，第一个参数是 message。用 arguments[0] 也可以访问这个值，即第一个参数的值（第一个参数位于位置 0，第二个参数位于位置 1，依此类推）。

因此，无需明确命名参数，就可以重写函数：

1
2
3
4
5
6
7
8
9
10
11
function sayHi() {
 if (arguments[0] == "bye") {
     console.log("GoodBye!")
     return;
 }
 console.log(arguments[0]);
}
sayHi("hi");   
sayHi("bye");
// hi
// GoodBye

这个特点可以用来做什么？

  • 传递参数动态化（可以用arguments.length查看传递的参数的个数）

  • 模拟函数的重载：

    用 arguments 对象判断传递给函数的参数和类型，即可模拟函数重载：

    1
    2
    3
    4
    5
    6
    7
    8
    function overLoadAdd() {
        var sum = 0;
        for (var i = 0; i < arguments.length; i++) {
            sum += arguments[i];
        }
        return sum;
    }
    console.log(overLoadAdd(1, 2, 3, 4, 5, 6, 7, 8, 9, 10));