JavaScript流程控制与数组实战练习案例

运算符

说到Ja vaScript的运算符，其实和Ja va大同小异，这里就不展开细说了。不过，有几个关键点值得留意——尤其是那些容易混淆的地方，咱们后面会逐一提到。

算术运算符

• +
• -
• *
• /
• %

赋值运算符 & 复合赋值运算符

• =
• +=
• -=
• *=
• /=
• %=

自增自减运算符

• ++: 自增 1
• --: 自减 1

比较运算符

• <
• >
• <=
• >=
• ==：比较相等（会进行隐式类型转换）
• !=
• ===：比较相等（不会进行隐式类型转换）
• !==

值得一提的是，==和===的区别是新手最容易踩的坑。前者会做隐式类型转换，后者则要求类型和值都相等，建议在项目中尽量用===，避免意外结果。

逻辑运算符

用于计算多个 boolean 表达式的值。

• &&：与（一假则假）
• ||：或（一真则真）
• !：非

位运算

• &：按位与
• |：按位或
• ~：按位取反
• ^：按位异或

移位运算

• <<：左移
• >>：有符号右移（算术右移）
• >>>：无符号右移（逻辑右移）

条件语句

if 语句

基本语法格式条件表达式为 true，则执行 if 的{}中的代码

// 形式1
if (条件) {
    语句
}
// 形式2
if (条件1) {
    语句1
} else {
    语句2
}
// 形式3
if (条件1) {
    语句1
} else if (条件2) {
    语句2
} else if ...... {
    语句...
} else {
    语句N
}

练习案例

• 代码示例 1: 判定一个数字是奇数还是偶数

var num = 10;
if (num % 2 == 0) {
    console.log("num 是偶数");
} else {
    console.log("num 是奇数");
}

注意！不能写成num % 2 == 1就是奇数，负的奇数 %2 结果可能是 - 1。

• 代码示例 2: 判定一个数字是正数还是负数

var num = 10;
if (num > 0) {
    console.log("num 是正数");
} else if (num < 0) {
    console.log("num 是负数");
} else {
    console.log("num 是 0");
}

• 代码示例 3: 判定某一年份是否是闰年

var year = 2000;
if (year % 100 == 0) {
    // 判定世纪闰年
    if (year % 400 == 0) {
        console.log("是闰年");
    } else {
        console.log("不是闰年");
    }
} else {
    // 普通闰年
    if (year % 4 == 0) {
        console.log("是闰年");
    } else {
        console.log("不是闰年");
    }
}

三元表达式

是if else的简写写法。

条件 ? 表达式1 : 表达式2

条件为真，返回表达式 1 的值；条件为假，返回表达式 2 的值。注意，三元表达式的优先级是比较低的。

switch

更适合多分支的场景。

switch (表达式) {
    case 值1:
        语句1;
        break;
    case 值2:
        语句2;
        break;
    default:
        语句N;
}

用户输入一个整数，提示今天是星期几

var day = prompt("请输入今天星期几:");
switch (parseInt(day)) {
    case 1:
        console.log("星期一");
        break;
    case 2:
        console.log("星期二");
        break;
    case 3:
        console.log("星期三");
        break;
    case 4:
        console.log("星期四");
        break;
    case 5:
        console.log("星期五");
        break;
    case 6:
        console.log("星期六");
        break;
    case 7:
        console.log("星期日");
        break;
    default:
        console.log("输入有误");
}

循环语句

重复执行某些语句

while 循环

while (条件) {

循环体;

}

执行过程:

• 先执行条件语句
• 条件为 true，执行循环体代码
• 条件为 false，直接结束循环

代码示例 1: 打印 1-10

var num = 1;
while (num <= 10) {
    console.log(num);
    num++;
}

代码示例 2: 计算 5 的阶乘

var result = 1;
var i = 1;
while (i <= 5) {
    result *= i;
    i++;
}
console.log(result)

continue

结束这次循环（比如：吃五个李子，发现第三个李子有虫子，扔掉这个，继续吃下一个）

var i = 1;
while (i <= 5) {
    if (i == 3) {
        i++;
        continue;
    }
    console.log("我在吃第" + i + "个李子");
    i++;
}

输出结果:

我在吃第1个李子
我在吃第2个李子
我在吃第4个李子
我在吃第5个李子

代码示例：找到 100-200 中所有 3 的倍数

var num = 100;
while (num <= 200) {
    if (num % 3 == 0) {
        num++; // 这里的++不要忘记！否则会死循环
        continue;
    }
    console.log("找到了3的倍数，为:" + num);
    num++;
}

break

结束整个循环（比如：吃五个李子，发现第三个有虫子，剩下的也不吃了）

var i = 1;
while (i <= 5) {
    if (i == 3) {
        break;
    }
    console.log("我在吃第" + i + "个李子");
    i++;
}

输出结果

我在吃第1个李子
我在吃第2个李子

代码示例：找到 100-200 中第一个 3 的倍数

执行结果:

找到了3的倍数，为:102

for 循环

for (表达式1; 表达式2; 表达式3) {
    循环体
}

• 表达式 1: 用于初始化循环变量
• 表达式 2: 循环条件
• 表达式 3: 更新循环变量

执行过程:

1. 先执行表达式 1，初始化循环变量
2. 再执行表达式 2，判定循环条件
3. 如果条件为 false，结束循环
4. 如果条件为 true，则执行循环体代码
5. 执行表达式 3，更新循环变量

代码示例：计算 5 的阶乘

var result = 0;
for (var i = 1; i <= 5; i++) {
    result *= i;
}
console.log("result = " + result);

数组

创建数组

• 使用 new 关键字创建

// Array的A要大写
var arr = new Array();

• 使用字面量方式创建（常用）

var arr = [];
var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为“元素”

注意: JS 的数组不要求元素是相同类型。这一点和 C、C++、Ja va 等静态类型语言差别很大，但是 Python、PHP 等动态类型语言也是如此。

获取数组元素

使用下标的方式访问数组元素（从 0 开始）

var arr = ["小狐佩奇", "小猪乔治", "小羊苏西"];
console.log(arr);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
arr[2] = "小狐凯迪";
console.log(arr);

如果下标超出范围读取元素，则结果为 undefined:

console.log(arr[3]);  // undefined
console.log(arr[-1]); // undefined

注意：不要给数组名直接赋值，此时数组中的所有元素都没了。（相当于本来 arr 是一个数组，重新赋值后变成字符串了）

var arr = ["小狐佩奇", "小猪乔治", "小羊苏西"];
arr = "小狐凯迪";

新增数组元素

1. 通过修改 length 新增相当于在末尾新增元素，新增的元素默认值为 undefined

var arr = [9, 5, 2, 7];
arr.length = 6;
console.log(arr);
console.log(arr[4], arr[5]);

输出结果:

(6) [9, 5, 2, 7, empty × 2]
undefined undefined

1. 通过下标新增如果下标超出范围赋值元素，则会给指定位置插入新元素

var arr = [];
arr[2] = 10;
console.log(arr)

此时这个数组的 [0] 和 [1] 都是 undefined，输出结果:

Array(3)  2: 10  length: 3  __proto__: Array(0)

1. 使用 push 进行追加元素代码示例：给定一个数组，把数组中的奇数放到一个 newArr 中

var arr = [9, 5, 2, 7, 3, 6, 8];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] % 2 != 0) {
        newArr.push(arr[i]);
    }
}
console.log(newArr);

删除数组中的元素

使用 splice 方法删除元素

var arr = [9, 5, 2, 7];
// 第一个参数表示从下标为 2 的位置开始删除，第二个参数表示要删除的元素个数是 1 个
arr.splice(2, 1);
console.log(arr);
// 结果[9, 5, 7]

目前咱们已经用到了数组中的一些属性和方法:

• arr.length: length 使用的时候不带括号，此时 length 就是一个普通的变量（称为成员变量，也叫属性）
• arr.push()、arr.splice(): 使用的时候带括号，并且可以传参数，此时是一个函数（也叫做方法）