JavaScript 数组与流程控制：从基础操作到实战应用

在 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);