6 / 15

JavaScript 数组 | 自在学

数组

数组是JavaScript中最重要的数据结构之一，它为我们提供了一种有序存储和操作数据集合的强大方式。与其他编程语言中的数组概念类似，JavaScript数组允许我们将多个值组织在一起，并通过数字索引来访问这些值。然而，JavaScript数组的灵活性远超传统意义上的数组，它们实际上是特殊的对象，具有许多独特的特性和强大的内置方法。

理解数组对于JavaScript编程至关重要，因为无论是处理用户界面中的元素列表，还是管理从服务器获取的数据，数组都是不可或缺的工具。 JavaScript数组不仅支持基本的存储和访问操作，还提供了丰富的方法来进行搜索、排序、过滤、转换等高级操作，这些功能让数据处理变得既简单又高效。

数组的创建

创建数组是使用数组的第一步。在JavaScript中，数组可以通过多种方式进行创建，主要包括数组字面量、Array构造函数、Array.of、Array.from等方法。最常见和最推荐的方式是使用数组字面量（即用方括号[]包裹元素），因为它语法简洁、易读且高效，非常适合绝大多数开发场景。

数组字面量

数组字面量使用方括号来包围数组元素，元素之间用逗号分隔。

|
// 创建不同类型的数组
let fruits = ['苹果', '香蕉', '橘子'];
let numbers = [1, 3, 5, 7];
let mixedData = [42, '文本', true];
 
console.log("水果:", fruits);
console.log("数字:", numbers);
console.log("混合数据:", mixedData);

|
水果: [ '苹果', '香蕉', '橘子' ]
数字: [ 1, 3, 5, 7 ]
混合数据: [ 42, '文本', true ]

Array构造函数

除了数组字面量，我们还可以使用 Array 构造函数来创建数组。Array 构造函数的用法有两种主要形式：

传入一个数字参数：
如果只传入一个数字参数（如 new Array(5)），则会创建一个具有指定长度但内容为空（即稀疏数组，所有索引位置都是空槽）的数组。这在需要预先分配一定长度、后续再填充数据的场景下非常有用。例如，批量生成占位数组、后续通过循环赋值等。
传入多个参数或非数字参数：
如果传入多个参数（如 new Array(1, 2, 3)），或者传入的参数不是单一数字（如 new Array('a')），则会将这些参数作为数组的元素依次填入数组中。这种方式等价于使用数组字面量，但语法上不如字面量直观。

|
// 创建一个指定长度的空数组
let emptySlots = new Array(3);
console.log("指定长度的数组:", emptySlots);
console.log("长度:", emptySlots.length);
 
// 创建包含指定元素的数组
let colors = new Array('红', '绿', '蓝');
console.log("包含元素的数组:", colors);

|
指定长度的数组: [ <3 empty items> ]
长度: 3
包含元素的数组: [ '红', '绿', '蓝' ]

数组元素的访问和修改

在 JavaScript 中，数组是一组有序的数据集合。每个数组元素都通过一个数字索引进行标识，这个索引从 0 开始递增。例如，第一个元素的索引是 0，第二个元素的索引是 1，以此类推。我们可以使用"方括号语法"来访问和修改数组中的元素：写作 数组名[索引]。如果要读取某个位置的值，只需写 array[索引]，要修改某个元素的值，也可以直接通过赋值语句 array[索引] = 新值 来完成。例如，arr[2] = 100 会把数组中索引为 2 的元素修改为 100。需要注意的是，如果访问的索引超出了数组的实际长度，返回的结果是 undefined。此外，使用方括号语法还可以通过变量动态指定索引，非常灵活。这种基于索引的访问和修改方式，是数组操作最基础、最常用的方法。

|
let cityList = ['北京', '上海', '广州'];
 
// 访问元素
console.log("第一个城市:", cityList[0]);
 
// 修改元素
cityList[1] = '深圳';
console.log("修改后的数组:", cityList);
 
// 添加新元素
cityList[3] = '杭州';
console.log

|
第一个城市: 北京
修改后的数组: [ '北京', '深圳', '广州', '杭州' ]
添加后的数组: [ '北京', '深圳', '广州', '杭州' ]

在 JavaScript 中，数组的每个元素其实是以属性的形式存储在对象中的，其属性名是字符串类型的索引。例如，arr[1] 实际上等价于 arr['1']，因为数字索引会被自动转换为字符串。这意味着数组本质上是一种特殊的对象，除了可以用数字索引访问元素外，还可以像对象一样为数组添加任意的自定义属性（如 arr['foo'] = 123）。不过，只有那些可以被解析为非负整数的属性名（如 '0', '1', '2' 等）才会被计入数组的 length 属性，其他字符串属性不会影响数组的长度。因此，理解数组索引与对象属性之间的这种自动转换和区别，对于正确操作和遍历数组非常重要。

|
let testArray = ['A', 'B'];
testArray['description'] = '这是一个测试';
 
console.log("通过数字索引访问:", testArray[0]);
console.log("通过字符串索引访问:", testArray['1']);
console.log("自定义属性:", testArray.description);
console.log("数组长度:", testArray.length);

|
通过数字索引访问: A
通过字符串索引访问: B
自定义属性: 这是一个测试
数组长度: 2

数组长度与动态特性

数组的 length 属性是数组最核心和独特的特性之一。它不仅仅表示数组当前实际包含的元素数量（即最大索引+1），而且可以被程序员手动修改，从而动态地扩展或截断数组。例如，当你通过索引为数组添加新元素时，length 会自动增长以反映新的最大索引；反之，如果直接减少 length 的值，数组中对应索引及其之后的元素会被自动删除。需要注意的是，length 只统计那些以非负整数为索引的元素，其他通过字符串或负数索引添加的属性不会影响 length 的值。理解 length 的这些行为，对于正确地操作、遍历和管理数组非常关键，尤其是在需要动态调整数组大小或清空数组时。

|
let items = ['物品1', '物品2', '物品3'];
console.log("原始长度:", items.length);
 
// 截断数组
items.length = 2;
console.log("截断后的数组:", items);
console.log("截断后的长度:", items.length);
 
// 扩展数组 (创建空槽)
items.length = 4

|
原始长度: 3
截断后的数组: [ '物品1', '物品2' ]
截断后的长度: 2
扩展后的数组: [ '物品1', '物品2', <2 empty items> ]
扩展后的长度: 4
访问空槽: undefined

数组元素的添加和删除

JavaScript 提供了多种方法来添加和删除数组元素，常见的有 push、pop、unshift、shift、splice 等。每种方法的操作位置、返回值和对原数组的影响都不相同。例如，push 和 pop 分别在数组末尾添加和删除元素，而 unshift 和 shift 则在数组开头进行操作。 splice 方法则可以在任意位置插入、删除或替换元素。合理选择这些方法，可以根据实际需求灵活地管理数组内容，使代码更加清晰、简洁和高效。了解每种方法的具体行为和适用场景，有助于避免常见的数组操作错误。

末尾操作

push() 方法和 pop() 方法是操作数组末尾元素最常用的两种方法。

push() 用于将一个或多个元素添加到数组的末尾，并返回新数组的长度。它会直接修改原数组。例如：arr.push(元素1, 元素2)。
pop() 用于移除数组末尾的最后一个元素，并返回被移除的元素。如果数组为空，则返回 undefined。同样会修改原数组。

|
let stack = [];
 
// 使用 push 添加元素
stack.push('A');
stack.push('B');
console.log("添加后:", stack);
 
// 使用 pop 移除元素
let removed = stack.pop();
console.log("移除的元素:", removed);
console.log("移除后:", stack);

|
添加后: [ 'A', 'B' ]
移除的元素: B
移除后: [ 'A' ]

开头操作

unshift() 方法用于在数组的开头插入一个或多个元素，所有原有元素的索引会依次向后移动。例如，arr.unshift('a') 会将 'a' 添加到数组最前面。 shift() 方法则用于移除数组的第一个元素，并返回被移除的元素，其余元素的索引会依次向前移动。由于这两种操作每次都需要移动数组中的所有元素，因此在数组较大或频繁操作的场景下，可能会带来性能开销，建议在性能敏感的应用中谨慎使用。

|
let queue = ['任务2', '任务3'];
 
// 使用 unshift 在开头添加
queue.unshift('任务1');
console.log("添加后:", queue);
 
// 使用 shift 从开头移除
let currentTask = queue.shift();
console.log("处理的任务:", currentTask);
console.log("剩余任务:", queue);

|
添加后: [ '任务1', '任务2', '任务3' ]
处理的任务: 任务1
剩余任务: [ '任务2', '任务3' ]

通用操作

splice() 方法是数组操作中最强大和灵活的方法之一。它可以对数组进行"原地"修改，支持以下三种主要操作：

删除元素：可以删除任意位置的一个或多个元素。例如，arr.splice(2, 1) 会从索引 2 开始删除 1 个元素。
插入元素：可以在任意位置插入一个或多个新元素。例如，arr.splice(1, 0, '新元素') 会在索引 1 处插入 '新元素'，原有元素向后移动。
替换元素：可以用新元素替换指定位置的元素。例如，arr.splice(3, 2, 'A', 'B') 会从索引 3 开始删除 2 个元素，并插入 'A' 和 'B'。

|
let letters = ['a', 'b', 'c', 'd', 'e'];
 
// 删除: 从索引2开始删除2个元素
let deleted = letters.splice(2, 2);
console.log("删除后:", letters);
console.log("被删除的元素:", deleted);
 
// 插入: 在索引1处插入 'x', 'y'
letters.splice(1

|
删除后: [ 'a', 'b', 'e' ]
被删除的元素: [ 'c', 'd' ]
插入后: [ 'a', 'x', 'y', 'b', 'e' ]
替换后: [ 'a', 'x', 'z', 'b', 'e' ]

数组的遍历和迭代

遍历数组是数组操作中最基础也是最重要的技能之一。在JavaScript中，数组遍历的方法非常丰富，主要包括以下几类：

传统for循环：可以精确控制遍历的起止位置和步长，适合需要访问索引或进行复杂控制的场景。
for...of循环：ES6引入的新语法，语法简洁，直接获取数组元素值，适合只关心元素本身的情况。
forEach方法：数组的内置方法，采用回调函数对每个元素进行操作，代码简洁，常用于对数组每一项执行相同操作。

传统循环方法

for循环是最基础、最常用的数组遍历方法。它允许你手动设置循环的起始索引、结束条件和每次迭代的步长，因此在需要跳跃遍历、部分遍历、反向遍历或在遍历过程中动态修改数组时都非常灵活。

|
let scores = [88, 95, 76];
 
for (let i = 0; i < scores.length; i++) {
    console.log(`第 ${i + 1} 项的分数是: ${scores[i]}`);
}

|
第 1 项的分数是: 88
第 2 项的分数是: 95
第 3 项的分数是: 76

for...of循环是ES6（ECMAScript 2015）引入的一种新的遍历语法。它专门用于遍历可迭代对象（如数组、字符串、Set、Map等），语法简洁，易于阅读。

|
let tools = ['Hammer', 'Wrench', 'Screwdriver'];
 
for (const tool of tools) {
    console.log("工具:", tool);
}

|
工具: Hammer
工具: Wrench
工具: Screwdriver

现代函数式方法

forEach() 方法是数组遍历的现代化选择。与传统的 for 或 for...of 循环相比，forEach() 会将每个元素的处理逻辑作为回调函数传递进来，这样可以让遍历过程更加清晰、简洁。

|
const colors = ['red', 'green', 'blue'];
 
colors.forEach(function(color, index) {
    console.log(`索引 ${index}: ${color}`);
});

|
索引 0: red
索引 1: green
索引 2: blue

数组沙盒实验室

数组的搜索和排序

在实际开发中，数组的搜索和排序是非常常见且重要的操作。为此，JavaScript 提供了多种内置方法，如 indexOf、includes、find、filter、sort 等。

搜索方法

在日常开发中，我们经常需要在数组中查找特定的数据。JavaScript 提供了多种强大的数组搜索方法，例如 indexOf、includes 用于基础类型的查找，find、findIndex、filter 等方法则可以根据自定义条件在对象数组中进行复杂搜索。

|
let numbers = [10, 20, 30, 40, 50, 30];
let users = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}];
 
// indexOf: 查找值的索引
console.log("30的索引:", numbers.indexOf(30));
 
// includes: 检查是否包含某个值
console.log

|
30的索引: 2
是否包含20: true
找到的用户: { id: 2, name: 'Bob' }
所有30: [ 30, 30 ]

排序方法

数组排序是数据处理中的另一个重要操作。JavaScript 提供了内置的 sort() 方法来实现这一功能。sort() 方法不仅可以对简单类型（如数字、字符串）排序，还可以通过自定义比较函数，对对象数组按照某个属性进行复杂排序。

|
let numbers = [4, 2, 5, 1, 3];
let students = [
    { name: "Bob", age: 22 },
    { name: "Alice", age: 20 }
];
 
// 数字升序排序
numbers.sort((a, b) => a - b);

|
数字升序: [ 1, 2, 3, 4, 5 ]
按年龄排序: [ { name: 'Alice', age: 20 }, { name: 'Bob', age: 22 } ]

数组的转换和处理

数组转换是函数式编程的核心概念之一。在JavaScript中，我们可以使用多种内置方法（如map、filter、reduce等）对数组进行灵活的转换和处理。

map方法：数组转换

map()方法是最常用的数组转换方法。它会遍历原数组中的每一个元素，并对每个元素执行一次指定的回调函数，将回调函数的返回值组成一个新的数组。

|
const numbers = [1, 4, 9];
const roots = numbers.map(num => Math.sqrt(num));
 
console.log("平方根数组:", roots);

|
平方根数组: [ 1, 2, 3 ]

filter方法：数组过滤

filter() 方法会遍历原数组，对每个元素执行你提供的回调函数（测试函数），并将所有使回调返回 true 的元素收集到一个新数组中。

|
const words = ['spray', 'limit', 'elite', 'exuberant'];
const longWords = words.filter(word => word.length > 5);
 
console.log("长单词:", longWords);

|
长单词: [ 'spray', 'exuberant' ]

reduce方法：数组归约

reduce() 方法是 JavaScript 数组中最强大、最灵活的处理方法之一。它会遍历数组中的每一项，将其与累加器（上一次归约的结果）进行处理，最终"归约"为一个单一的值。

|
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
 
console.log("数组总和:", sum);

|
数组总和: 10

多维数组和嵌套结构

虽然JavaScript本身并没有内置真正意义上的多维数组类型，但我们可以通过在数组中嵌套数组的方式，灵活地模拟和操作二维、三维甚至更高维度的数据结构。

|
// 创建二维数组：学生成绩表
let gradeMatrix = [
    ['姓名', '数学', '英语'],
    ['张三', 92, 78],
    ['李四', 88, 85]
];
 
// 访问二维数组元素
console.log("李四的数学成绩:", gradeMatrix[2][1]);
 
// 遍历二维数组
gradeMatrix.

|
李四的数学成绩: 88
姓名	数学	英语
张三	92	78
李四	88	85

类数组对象与字符串

在 JavaScript 中，除了标准的 Array 实例（即真正的数组对象），还存在一些"类数组对象"（array-like object）。这些对象虽然不是 Array 类型，但它们拥有一组连续的以数字为键的属性（如 0、1、2……），并且具有 length 属性，表现得很像数组。

|
// 函数的 arguments 对象是一个类数组对象
function printArgs() {
    console.log("arguments对象:", arguments);
    
    // 转换为真数组来使用数组方法
    const argsArray = Array.from(arguments);
    console.log("转换后的数组:", argsArray);
    argsArray.forEach(arg => console.log("参数:", arg));
}
 
printArgs

|
arguments对象: { '0': 'a', '1': 'b', '2': 'c' }
转换后的数组: [ 'a', 'b', 'c' ]
参数: a
参数: b
参数: c
字符串长度: 5
第一个字符: h
字符数组: [ 'h', 'e', 'l', 'l', 'o' ]

练习

创建JavaScript数组最常用的方法是什么？

JavaScript数组的索引从哪个数字开始？

push()方法可以用来做什么？

以下哪个方法不会返回新数组？

splice()方法可以执行哪种删除操作？

完成以下数组操作代码：

|
let numbers = [1, 2, 3, 4, 5];
 
// 在末尾添加元素6
numbers._______(6);
 
// 在开头添加元素0  
numbers._______(0);
 
// 删除最后一个元素
let last = numbers._______();
 
// 删除第一个元素
let first = numbers._______

|
let numbers = [1, 2, 3, 4, 5];
 
// 在末尾添加元素6
numbers.push(6);
 
// 在开头添加元素0  
numbers.unshift(0);
 
// 删除最后一个元素
let last = numbers.pop();
 
// 删除第一个元素
let first = numbers.shift

填写数组方法：

|
let scores = [85, 92, 78, 96, 88];
 
// 找出所有大于85的分数
let highScores = scores._______(score => score > 85);
 
// 将所有分数乘以1.1
let boostedScores = scores._______(score => score * 1.1);
 
// 计算总分

|
let scores = [85, 92, 78, 96, 88];
 
// 找出所有大于85的分数
let highScores = scores.filter(score => score > 85);
console.log(highScores);  // [92, 96, 88]
 
// 将所有分数乘以1.1
let boostedScores = scores.map(score => score

完成数组搜索代码：

|
let fruits = ['苹果', '香蕉', '橘子', '葡萄'];
 
// 查找'香蕉'的索引
let index = fruits._______('香蕉');
 
// 检查是否包含'橘子'
let hasOrange = fruits._______('橘子');
 
// 找到第一个长度为2的水果
let shortFruit = fruits._______(fruit => fruit.

|
let fruits = ['苹果', '香蕉', '橘子', '葡萄'];
 
// 查找'香蕉'的索引
let index = fruits.indexOf('香蕉');
console.log(index);  // 1
 
// 检查是否包含'橘子'
let hasOrange = fruits.includes('橘子');
console.log(hasOrange);  // true
 
// 找到第一个长度为2的水果

填写排序和反转：

|
let numbers = [3, 1, 4, 1, 5, 9, 2, 6];
 
// 升序排列
let ascending = numbers._______((a, b) => a - b);
 
// 反转数组
let reversed = numbers._______();

|
let numbers = [3, 1, 4, 1, 5, 9, 2, 6];
 
// 升序排列（注意：sort会修改原数组）
let ascending = [...numbers].sort((a, b) => a - b);
console.log(ascending);  // [1, 1, 2, 3, 4, 5, 6, 9]

编写一个学生成绩管理系统，要求创建包含学生信息的数组，实现添加、删除、修改学生功能，计算每个学生的平均分和总分，实现按总分排序功能：

|
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>学生成绩管理系统</title>
</head>
<body>
    <script>
        // 学生信息数组
        let students = [
            { name: "张三"