JavaScript: JavaScript 数组基础
最后更新：2026-10-13
数组就像一排编号的抽屉——每个抽屉有个编号（索引），里面放着东西（数据）。你可以按编号取东西、换东西、往后面加新东西。日常开发中，数组是你用得最多的数据结构。
1. 什么是数组
数组是有序的数据集合，可以存放任意类型的数据：
HTML
<script>
let arr = [1, 'hello', true, null, undefined];
</script>
一个数组里可以混合不同类型，但实际开发中通常放同类型的数据，方便统一处理。
两种方式：
HTML
<script>
// 方式1：字面量（推荐，简洁直观）
let fruits = ['苹果', '香蕉', '橘子'];
// 方式2：Array 构造函数
let nums = new Array(1, 2, 3);
let empty = new Array(5); // 创建长度为5的空数组，不是 [5]！
</script>
⚠️ 注意：
new Array(5) 创建的是一个长度为 5 的空数组，不是包含数字 5 的数组！这个坑踩过的人不少，所以日常用字面量 [] 就好。
3. 访问元素
数组索引从 0 开始，不是从 1。第一个元素是 [0]，第二个是 [1]，依此类推：
HTML
<script>
let fruits = ['苹果', '香蕉', '橘子'];
fruits[0]; // '苹果'
fruits[1]; // '香蕉'
fruits[2]; // '橘子'
</script>
访问不存在的索引不会报错，返回 undefined：
HTML
<script>
fruits[5]; // undefined
</script>
4. length 属性
length 返回数组的长度（元素个数）：
HTML
<script>
let arr = [10, 20, 30];
arr.length; // 3
</script>
length 比 最大索引多 1，因为索引从 0 开始。最后一个元素的索引是 arr.length - 1。
5. 修改元素
直接通过索引赋值就能修改：
HTML
<script>
let fruits = ['苹果', '香蕉', '橘子'];
fruits[1] = '葡萄'; // 把'香蕉'改成'葡萄'
// ['苹果', '葡萄', '橘子']
</script>
也可以通过索引添加新元素（但不推荐，会产生空洞）：
HTML
<script>
fruits[5] = '西瓜';
// ['苹果', '葡萄', '橘子', empty × 2, '西瓜']
</script>
▶ 示例：数组基本操作
▶ 试一试6. 基本方法
数组最常用的增删方法：
| 方法 | 作用 | 返回值 |
|---|---|---|
push() |
末尾添加元素 | 新长度 |
pop() |
末尾删除元素 | 被删的元素 |
unshift() |
开头添加元素 | 新长度 |
shift() |
开头删除元素 | 被删的元素 |
HTML
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>数组方法</title></head>
<body>
<pre id="output"></pre>
<script>
let arr = ['a', 'b', 'c'];
arr.push('d'); // ['a','b','c','d'] 返回 4
arr.pop(); // ['a','b','c'] 返回 'd'
arr.unshift('z'); // ['z','a','b','c'] 返回 4
arr.shift(); // ['a','b','c'] 返回 'z'
document.getElementById('output').textContent = JSON.stringify(arr);
</script>
</body>
</html>
💡 提示： 记忆技巧：
push/pop 操作尾部，unshift/shift 操作头部。p 开头的操作尾部，s 开头的操作头部。un 开头的加、不带的删。
▶ 示例：水果列表操作
▶ 试一试7. 检测数组：Array.isArray() vs typeof
typeof 对数组返回的是 "object"，无法区分数组和普通对象：
HTML
<script>
let arr = [1, 2, 3];
typeof arr; // "object" ← 没用！
Array.isArray(arr); // true ← 正确方式
</script>
⚠️ 注意：
typeof 判断数组靠不住，始终用 Array.isArray()。
8. forEach 基本遍历
forEach 是遍历数组最常见的方法，比 for 循环更声明式：
HTML
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>forEach</title></head>
<body>
<pre id="output"></pre>
<script>
let fruits = ['苹果', '香蕉', '橘子'];
let result = '';
fruits.forEach(function(fruit, index) {
result += index + ' ' + fruit + '\n';
});
document.getElementById('output').textContent = result;
</script>
</body>
</html>
用箭头函数更简洁：
HTML
<script>
fruits.forEach((fruit, index) => {
console.log(index, fruit);
});
</script>
▶ 示例：forEach 遍历展示
▶ 试一试❓ 常见问题
Q
push 和 unshift 的返回值是什么？A 都返回数组的新长度，不是修改后的数组。很多人以为返回数组本身，结果
let arr = [1].push(2) 得到的是 2（长度），不是 [1, 2]。Q
forEach 里能用 break 跳出循环吗？Q 数组越界访问会报错吗？
A 不会。
arr[100] 在越界时返回 undefined，不会抛异常。但这可能掩盖 bug，访问前最好检查索引范围。📖 小节
- 数组用字面量
[]创建，避免用new Array()（容易踩坑） - 索引从 0 开始，最后一个元素索引是
length - 1 push/pop操作尾部，unshift/shift操作头部- 检测数组用
Array.isArray()，typeof返回"object"靠不住 forEach遍历数组比for更声明式，但不能用break中断
📝 作业
- 创建一个数组存放 5 个城市名，用
forEach在页面上列出每个城市的序号和名称 - 写一个"待办清单"：可以输入任务添加到末尾，点击"完成"删除末尾任务，实时显示列表
- 写一个程序：让用户输入 5 个数字存入数组，计算并显示它们的总和和平均值
