在 JavaScript 編程的世界里，數組是一種極為重要的數據結構，它就像是一個有序的 “收納盒”，能夠將多個值整齊地存儲起來。而流程控制語句則像是 “指揮官”，能夠按照特定的邏輯對數組進行遍歷和操作。接下來，就讓我們深入了解 JavaScript 數組與流程控制的相關知識。

一、數組的概念與創建?

1.1 數組的定義與特點?

數組是用于存儲多個值的有序集合，它具有以下特點：?

• 有序：每個值都有一個索引，索引從 0 開始，就像書架上的書編號一樣，通過編號能快速找到對應的書。?

• 異構：可以存儲不同類型的值，無論是數字、字符串，還是復雜的對象，都能被數組容納。?

• 數組是引用類型，屬于對象的一種，這意味著在傳遞和操作數組時，實際上操作的是對數組對象的引用。?

1.2 創建數組的方式?

• 使用字面量：這是最常用的創建數組的方式，簡潔直觀。

let arr = [1, 2, 3];

• 使用構造函數：可以通過構造函數創建數組，有兩種常見形式。

// 常規寫法，創建包含指定元素的數組
let arr = new Array(1, 2, 3);
console.log(arr);
// 創建長度為5的空數組
let emptyArr = new Array(5);
console.log(emptyArr.length);

運行結果：

1.3 數組類型判斷?

在編程過程中，有時需要判斷一個對象是否為數組，常用的判斷方式有：?

• 對象 instanceof Array：通過instanceof運算符判斷對象是否是Array的實例。?

let arr = [1, 2, 3];
console.log(arr instanceof Array); // true

• Array.isArray (對象)：這是 JavaScript 提供的專門用于判斷數組的方法，更加準確和便捷。?

let arr = [1, 2, 3];
console.log(Array.isArray(arr)); // true

二、數組元素的基礎操作

2.1 數組的基本操作方法

方法	描述
push(value)	在數組末尾添加新元素
pop()	刪除并返回數組最后一個元素
unshift(value)	在數組開頭添加新元素
shift()	刪除并返回數組第一個元素
slice(start, end)	返回數組的一個副本（不修改原數組）
splice(index, deleteCount, items...)	刪除或插入元素（修改原數組）

2.2?增加元素

末尾添加：push ()：push()方法可以在數組末尾添加一個或多個元素，并返回數組新的長度。

let arr = [1, 2, 3];
let newLength = arr.push(4, 5);
console.log(arr); // [1, 2, 3, 4, 5]
console.log(newLength); // 5

開頭添加：unshift ()：unshift()方法用于在數組開頭添加一個或多個元素，并返回數組新的長度。

let arr = [1, 2, 3];
let newLength = arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]
console.log(newLength); // 4

指定位置添加：splice (index, count=0, 新增元素)：splice()方法從指定索引位置開始，刪除count個元素（count為 0 時不刪除元素），并插入新增元素。

let arr = [1, 3, 4];
arr.splice(1, 0, 2);
console.log(arr); // [1, 2, 3, 4]

2.3?刪除元素?

末尾刪除：pop ()：pop()方法用于刪除數組的最后一個元素，并返回被刪除的元素。

let arr = [1, 2, 3];
let removedElement = arr.pop();
console.log(arr); // [1, 2]
console.log(removedElement); // 3

開頭刪除：shift ()：shift()方法用于刪除數組的第一個元素，并返回被刪除的元素。

let arr = [1, 2, 3];
let removedElement = arr.shift();
console.log(arr); // [2, 3]
console.log(removedElement); // 1

指定位置刪除：splice (index, count>0)：從指定索引位置開始，刪除count個元素。

let arr = [1, 2, 3, 4, 5];
arr.splice(1, 2);
console.log(arr); // [1, 4, 5]

2.4?修改元素

直接通過索引賦值修改：通過數組的索引直接對元素進行重新賦值。

let arr = [1, 2, 3];
arr[1] = 10;
console.log(arr); // [1, 10, 3]

通過splice (index, count, 修改元素)修改：通過數組的索引直接對元素進行重新賦值。

let arr = [1, 2, 3];
arr.splice(1, 1, 10, 20);
console.log(arr); // [1, 10, 20, 3]

2.5?查找元素

根據索引查找：直接通過索引訪問數組元素。

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

查找是否存在：includes ()：includes()方法用于判斷數組中是否包含指定元素，返回true或false。

let arr = [1, 2, 3];
console.log(arr.includes(2)); // true

查找索引：indexOf () /lastIndexOf ()：indexOf()返回指定元素在數組中第一次出現的索引，lastIndexOf()返回指定元素在數組中最后一次出現的索引，若元素不存在則返回 -1。

let arr = [1, 2, 3, 2];
console.log(arr.indexOf(2)); // 1
console.log(arr.lastIndexOf(2)); // 3

2.5 數組切片

數組切片是指從現有數組中提取一部分元素，創建一個新數組。切片不會改變原來的數組，會創建一個新的數組，JavaScript 提供了slice()方法來實現這一功能。

語法：

arr.slice(startIndex, endIndex);

• startIndex：開始索引（包含），若為負數則從數組末尾開始計算。
• endIndex：結束索引（不包含），可選參數，默認為數組長度。

實例代碼：

let arr = [10, 20, 30, 40, 50];// 從索引1到索引3（不包含）
let sliced = arr.slice(1, 3);
console.log(sliced); // [20, 30]// 從索引2到末尾
let slicedToEnd = arr.slice(2);
console.log(slicedToEnd); // [30, 40, 50]// 使用負數索引
let slicedFromEnd = arr.slice(-3, -1);
console.log(slicedFromEnd); // [30, 40]

注意事項：

1. slice()方法不會修改原數組，而是返回一個新數組。
2. 若省略endIndex，則切片會包含從startIndex到數組末尾的所有元素。
3. 當索引超出數組范圍時，slice()會自動處理邊界，不會拋出錯誤。

三、遍歷數組

3.1 for 循環遍歷

for循環是最基礎的遍歷方式，通過控制循環條件和索引來訪問數組的每個元素。

let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {console.log(arr[i]);
}

3.2 while 循環遍歷

while循環同樣可以實現數組的遍歷，需要手動控制索引的遞增。

let arr = [1, 2, 3, 4, 5];
let i = 0;
while (i < arr.length) {console.log(arr[i]);i++;
}

3.3 for - of 循環遍歷

for - of循環是 ES6 引入的新特性，它更加簡潔直觀，直接遍歷數組的元素值。

let arr = [1, 2, 3, 4, 5];
for (let element of arr) {console.log(element);
}

四、數組的進階用法

4.1 map 方法?

map()方法可以對數組中的每個元素進行映射轉換，生成一個新數組，原數組不會被修改。它接收一個回調函數作為參數，回調函數的返回值會組成新數組。

let numbers = [1, 2, 3, 4];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]
console.log(numbers); // [1, 2, 3, 4]

4.2 filter 方法?

filter()方法用于篩選出符合條件的元素，返回一個包含所有滿足條件元素的新數組。

let numbers = [1, 2, 3, 4];
let evenNumbers = numbers.filter(num => num % 2 === 0)
console.log(evenNumbers);
console.log(numbers);

4.3 reduce 方法?

reduce()方法能對數組元素進行累加、匯總等操作。它接收一個回調函數和一個初始值，回調函數接收四個參數（累加器、當前值、當前索引、原數組），通過不斷執行回調函數，將數組 “化簡” 為一個值。

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((acc, crr) => acc + crr, 0);
console.log(sum); // 10

4.4 forEach 方法?

forEach()方法用于遍歷數組，對數組中的每個元素執行一次提供的函數，但它沒有返回值，主要用于執行一些副作用操作，如打印數組元素。

let numbers = [1, 2, 3, 4];
let fruits = ['apple', 'banana', 'cherry'];
fruits.forEach(fruit => console.log(fruit));

4.5 some 方法?

some()方法用于檢測數組中是否至少有一個元素滿足指定條件，只要有一個元素滿足條件，就返回true，否則返回false。

let numbers = [1, 2, 3, 4];
let hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true

4.6 every 方法?

every()方法用于檢測數組中的所有元素是否都滿足指定條件，只有所有元素都滿足條件，才返回true，否則返回false。

let numbers = [1, 2, 3, 4];
let allPositive = numbers.every(num => num % 2 === 0);
console.log(allPositive); // true

五、綜合案例：學生成績統計

let scores = [85, 90, 78, 92, 88];
let sum = 0;
let max = scores[0];
let min = scores[0];
for (let score of scores) {sum += score;if (score > max) {max = score;}if (score < min) {min = score;}
}
let average = sum / scores.length;
console.log("平均成績：", average);
console.log("最高分：", max);
console.log("最低分：", min);