快捷導(dǎo)航

JavaScript流程控制與數(shù)組實(shí)戰(zhàn)練習(xí)案例

更新時(shí)間：2026年01月07日 11:05:25 作者：Han.miracle

這篇文章主要介紹了JavaScript流程控制與數(shù)組的相關(guān)資料,其中包括了算術(shù)運(yùn)算符、比較運(yùn)算符、邏輯運(yùn)算符、位運(yùn)算符等的介紹,以及if、else、switch語(yǔ)句的使用方法,需要的朋友可以參考下

運(yùn)算符

JavaScript 中的運(yùn)算符和 Java 用法基本相同，此處不做詳細(xì)介紹了。

算術(shù)運(yùn)算符

+
-
*
/
%

賦值運(yùn)算符 & 復(fù)合賦值運(yùn)算符

=
+=
-=
*=
/=
%=

自增自減運(yùn)算符

++: 自增 1
--: 自減 1

比較運(yùn)算符

<
>
<=
>=
==：比較相等（會(huì)進(jìn)行隱式類型轉(zhuǎn)換）
!=
===：比較相等（不會(huì)進(jìn)行隱式類型轉(zhuǎn)換）
!==

邏輯運(yùn)算符

用于計(jì)算多個(gè) boolean 表達(dá)式的值。

&&：與（一假則假）
||：或（一真則真）
!：非

位運(yùn)算

&：按位與
|：按位或
~：按位取反
^：按位異或

移位運(yùn)算

<<：左移
>>：有符號(hào)右移（算術(shù)右移）
>>>：無(wú)符號(hào)右移（邏輯右移）

條件語(yǔ)句

if 語(yǔ)句

基本語(yǔ)法格式條件表達(dá)式為 true，則執(zhí)行 if 的{}中的代碼

// 形式1
if (條件) {
    語(yǔ)句
}

// 形式2
if (條件1) {
    語(yǔ)句1
} else {
    語(yǔ)句2
}

// 形式3
if (條件1) {
    語(yǔ)句1
} else if (條件2) {
    語(yǔ)句2
} else if ...... {
    語(yǔ)句...
} else {
    語(yǔ)句N
}

練習(xí)案例

代碼示例 1: 判定一個(gè)數(shù)字是奇數(shù)還是偶數(shù)

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

注意！不能寫成num % 2 == 1就是奇數(shù)，負(fù)的奇數(shù) %2 結(jié)果可能是 - 1。

代碼示例 2: 判定一個(gè)數(shù)字是正數(shù)還是負(fù)數(shù)

var num = 10;
if (num > 0) {
    console.log("num 是正數(shù)");
} else if (num < 0) {
    console.log("num 是負(fù)數(shù)");
} else {
    console.log("num 是 0");
}

代碼示例 3: 判定某一年份是否是閏年

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

三元表達(dá)式

是if else的簡(jiǎn)寫寫法。

條件 ? 表達(dá)式1 : 表達(dá)式2

條件為真，返回表達(dá)式 1 的值；條件為假，返回表達(dá)式 2 的值。注意，三元表達(dá)式的優(yōu)先級(jí)是比較低的。

switch

更適合多分支的場(chǎng)景。

switch (表達(dá)式) {
    case 值1:
        語(yǔ)句1;
        break;
    case 值2:
        語(yǔ)句2;
        break;
    default:
        語(yǔ)句N;
}

用戶輸入一個(gè)整數(shù)，提示今天是星期幾

var day = prompt("請(qǐng)輸入今天星期幾:");
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("輸入有誤");
}

循環(huán)語(yǔ)句

重復(fù)執(zhí)行某些語(yǔ)句

while 循環(huán)

while (條件) {
循環(huán)體;
}

執(zhí)行過(guò)程:

先執(zhí)行條件語(yǔ)句
條件為 true，執(zhí)行循環(huán)體代碼
條件為 false，直接結(jié)束循環(huán)

代碼示例 1: 打印 1-10

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

代碼示例 2: 計(jì)算 5 的階乘

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

continue

結(jié)束這次循環(huán)（比如：吃五個(gè)李子，發(fā)現(xiàn)第三個(gè)李子有蟲子，扔掉這個(gè)，繼續(xù)吃下一個(gè)）

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

輸出結(jié)果:

我在吃第1個(gè)李子
我在吃第2個(gè)李子
我在吃第4個(gè)李子
我在吃第5個(gè)李子

代碼示例：找到 100-200 中所有 3 的倍數(shù)

var num = 100;
while (num <= 200) {
    if (num % 3 == 0) {
        num++; // 這里的++不要忘記！否則會(huì)死循環(huán)
        continue;
    }
    console.log("找到了3的倍數(shù)，為:" + num);
    num++;
}

break

結(jié)束整個(gè)循環(huán)（比如：吃五個(gè)李子，發(fā)現(xiàn)第三個(gè)有蟲子，剩下的也不吃了）

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

輸出結(jié)果

我在吃第1個(gè)李子
我在吃第2個(gè)李子

代碼示例：找到 100-200 中第一個(gè) 3 的倍數(shù)

執(zhí)行結(jié)果:

找到了3的倍數(shù)，為:102

for 循環(huán)

for (表達(dá)式1; 表達(dá)式2; 表達(dá)式3) {
    循環(huán)體
}

表達(dá)式 1: 用于初始化循環(huán)變量
表達(dá)式 2: 循環(huán)條件
表達(dá)式 3: 更新循環(huán)變量

執(zhí)行過(guò)程:

先執(zhí)行表達(dá)式 1，初始化循環(huán)變量
再執(zhí)行表達(dá)式 2，判定循環(huán)條件
如果條件為 false，結(jié)束循環(huán)
如果條件為 true，則執(zhí)行循環(huán)體代碼
執(zhí)行表達(dá)式 3，更新循環(huán)變量

代碼示例：計(jì)算 5 的階乘

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

數(shù)組

創(chuàng)建數(shù)組

使用 new 關(guān)鍵字創(chuàng)建

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

使用字面量方式創(chuàng)建（常用）

var arr = [];
var arr2 = [1, 2, 'haha', false]; // 數(shù)組中保存的內(nèi)容稱為“元素”

注意: JS 的數(shù)組不要求元素是相同類型。這一點(diǎn)和 C、C++、Java 等靜態(tài)類型語(yǔ)言差別很大，但是 Python、PHP 等動(dòng)態(tài)類型語(yǔ)言也是如此。

獲取數(shù)組元素

使用下標(biāo)的方式訪問(wèn)數(shù)組元素（從 0 開始）

var arr = ["小狐佩奇", "小豬喬治", "小羊蘇西"];
console.log(arr);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
arr[2] = "小狐凱迪";
console.log(arr);

如果下標(biāo)超出范圍讀取元素，則結(jié)果為 undefined:

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

注意：不要給數(shù)組名直接賦值，此時(shí)數(shù)組中的所有元素都沒(méi)了。（相當(dāng)于本來(lái) arr 是一個(gè)數(shù)組，重新賦值后變成字符串了）

var arr = ["小狐佩奇", "小豬喬治", "小羊蘇西"];
arr = "小狐凱迪";

新增數(shù)組元素

通過(guò)修改 length 新增相當(dāng)于在末尾新增元素，新增的元素默認(rèn)值為 undefined

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

輸出結(jié)果:

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

通過(guò)下標(biāo)新增如果下標(biāo)超出范圍賦值元素，則會(huì)給指定位置插入新元素

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

此時(shí)這個(gè)數(shù)組的 [0] 和 [1] 都是 undefined，輸出結(jié)果:

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

使用 push 進(jìn)行追加元素代碼示例：給定一個(gè)數(shù)組，把數(shù)組中的奇數(shù)放到一個(gè) 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);

刪除數(shù)組中的元素

使用 splice 方法刪除元素

var arr = [9, 5, 2, 7];
// 第一個(gè)參數(shù)表示從下標(biāo)為 2 的位置開始刪除，第二個(gè)參數(shù)表示要?jiǎng)h除的元素個(gè)數(shù)是 1 個(gè)
arr.splice(2, 1);
console.log(arr);
// 結(jié)果
[9, 5, 7]

目前咱們已經(jīng)用到了數(shù)組中的一些屬性和方法:

arr.length: length 使用的時(shí)候不帶括號(hào)，此時(shí) length 就是一個(gè)普通的變量（稱為成員變量，也叫屬性）
arr.push()、arr.splice(): 使用的時(shí)候帶括號(hào)，并且可以傳參數(shù)，此時(shí)是一個(gè)函數(shù)（也叫做方法）