第6章_JS流程控制与数组

授课语音

掌握数组基本使用和常用方法

在 JavaScript 中，数组是一种非常常用的数据结构，它能够存储多个值，并提供了多种方法来对这些值进行操作。掌握数组的基本使用及常用方法是前端开发中不可或缺的技能。

1. 数组的基本使用

1.1 创建数组

有几种常见的方式可以创建数组：

let arr1 = [1, 2, 3, 4];  // 使用字面量创建数组
let arr2 = new Array(5);   // 使用构造函数创建数组，创建一个包含5个空位的数组
let arr3 = new Array(1, 2, 3); // 使用构造函数创建并初始化数组

中文注释：

数组字面量（[]）是最常用且简洁的方式。
使用 new Array() 创建数组时，如果传入一个数字参数，则会创建一个指定长度的空数组。如果传入多个参数，则创建一个包含这些元素的数组。

1.2 访问数组元素

数组的元素通过索引进行访问，数组索引从 0 开始：

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

中文注释：

数组的索引从 0 开始，因此第一个元素的索引是 0，第二个元素的索引是 1，依此类推。

2. 常用数组方法

JavaScript 提供了许多内置的数组方法，可以用来操作数组。以下是一些常用的数组方法。

2.1 `push()` 和 `pop()` 方法

push()：将一个或多个元素添加到数组的末尾，并返回新的数组长度。
pop()：移除数组末尾的元素，并返回被移除的元素。

let arr = [1, 2, 3];
arr.push(4);  // 添加元素 4
console.log(arr);  // [1, 2, 3, 4]

let removedElement = arr.pop();  // 移除最后一个元素
console.log(removedElement);  // 4
console.log(arr);  // [1, 2, 3]

中文注释：

push() 可以向数组末尾添加元素，pop() 用于移除数组末尾的元素，并返回移除的元素。

2.2 `shift()` 和 `unshift()` 方法

shift()：移除数组的第一个元素，并返回被移除的元素。
unshift()：将一个或多个元素添加到数组的开头，并返回新的数组长度。

let arr = [1, 2, 3];
arr.unshift(0);  // 在数组开头添加元素 0
console.log(arr);  // [0, 1, 2, 3]

let removedElement = arr.shift();  // 移除第一个元素
console.log(removedElement);  // 0
console.log(arr);  // [1, 2, 3]

中文注释：

unshift() 用于在数组的开头添加元素，shift() 用于移除数组的第一个元素。

2.3 `concat()` 方法

concat() 方法用于合并两个或多个数组，返回一个新数组。

let arr1 = [1, 2];
let arr2 = [3, 4];
let arr3 = arr1.concat(arr2);  // 合并 arr1 和 arr2
console.log(arr3);  // [1, 2, 3, 4]

中文注释：

concat() 不修改原数组，而是返回一个新的数组。

2.4 `slice()` 方法

slice() 方法用于从数组中提取出一部分元素，返回一个新的数组。它接受两个参数：起始索引和结束索引（不包含结束索引）。

let arr = [1, 2, 3, 4, 5];
let slicedArr = arr.slice(1, 3);  // 提取索引 1 到 3（不包含 3）
console.log(slicedArr);  // [2, 3]

中文注释：

slice() 返回的是一个新数组，不会修改原数组。它不包括结束索引。

2.5 `splice()` 方法

splice() 方法用于添加、删除或替换数组中的元素。它会直接修改原数组。

let arr = [1, 2, 3, 4];
arr.splice(1, 2, 'a', 'b');  // 从索引 1 开始，删除 2 个元素，并插入 'a' 和 'b'
console.log(arr);  // [1, 'a', 'b', 4]

中文注释：

splice() 的第一个参数是起始索引，第二个参数是要删除的元素个数，后面的参数是要添加的元素。
它会改变原数组。

2.6 `forEach()` 方法

forEach() 方法用于遍历数组中的每个元素，并对每个元素执行指定的函数。

let arr = [1, 2, 3];
arr.forEach(function(element, index) {
  console.log(index + ': ' + element);
});
// 输出：
// 0: 1
// 1: 2
// 2: 3

中文注释：

forEach() 方法不会返回新的数组，只会对每个元素执行回调函数。

2.7 `map()` 方法

map() 方法用于创建一个新数组，其中每个元素是调用指定函数处理后的结果。

let arr = [1, 2, 3];
let doubledArr = arr.map(function(element) {
  return element * 2;
});
console.log(doubledArr);  // [2, 4, 6]

中文注释：

map() 返回一个新数组，不修改原数组。它通过指定的函数处理每个元素，并将结果存储在新数组中。

2.8 `filter()` 方法

filter() 方法用于创建一个新数组，其中包含所有符合条件的元素。

let arr = [1, 2, 3, 4, 5];
let evenArr = arr.filter(function(element) {
  return element % 2 === 0;
});
console.log(evenArr);  // [2, 4]

中文注释：

filter() 返回一个新数组，包含所有符合条件的元素，不修改原数组。

2.9 `reduce()` 方法

reduce() 方法用于数组元素的累加，通常用于求和、求积等操作。

let arr = [1, 2, 3, 4];
let sum = arr.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);  // 初始值为 0
console.log(sum);  // 10

中文注释：