05-array

05 Array：数组基础与数据集合

这是 javascript-development-lab 的第 05 个独立最小实验。

本章只解决一个核心问题：当程序需要保存和管理“一组有顺序的数据”时，JavaScript 如何使用数组？

1. 本章学习目标

理解并实际观察：

• Array
• 数组字面量 []
• 数组索引
• length
• 读取数组元素
• 修改数组元素
• push()
• pop()
• unshift()
• shift()

本章暂时不学习 map()、filter()、find()、reduce()、sort() 等数组高级方法，它们会在第 06 章单独研究。

2. 实验内容

页面包含四个最小实验：

1. 创建一个产品数组，并通过索引读取元素。
2. 修改数组中指定位置的数据。
3. 从数组头部和尾部添加、删除数据。
4. 查看操作完成后的最终数组。

示例数组：

const products = [
  'WPC Decking',
  'Wall Panel',
  'Fence'
];

数组可以理解为：一个按照顺序保存多个值的容器。

3. 核心知识

数组索引从 0 开始

products[0]
products[1]
products[2]

如果数组是：

WPC Decking
Wall Panel
Fence

对应关系是：

索引 0 → WPC Decking
索引 1 → Wall Panel
索引 2 → Fence

这是本章最重要的基础概念之一。

length

products.length

表示数组当前包含多少个元素。

注意：

数组长度 = 3
最后一个元素索引 = 2

因为索引从 0 开始。

修改数组元素

products[1] = 'WPC Cladding';

表示把索引 1 位置的数据替换成新的值。

push() / pop()

操作数组尾部：

products.push('Pergola');
products.pop();

可以理解为：

push() → 尾部添加
pop()  → 尾部删除

unshift() / shift()

操作数组头部：

products.unshift('Accessories');
products.shift();

可以理解为：

unshift() → 头部添加
shift()   → 头部删除

4. 数据如何流动

本章的数据链路：

创建 products 数组
↓
通过索引读取
↓
通过索引修改
↓
push / pop / unshift / shift
↓
得到新的数组状态
↓
普通 for 循环
↓
DOM 显示结果

这里仍然使用第 03 章已经学过的普通 for 循环来输出数据，没有提前使用下一章的高级数组方法。

5. 建议修改实验

打开 js/app.js，逐项修改并刷新浏览器。

实验 1：增加初始数据

在数组中增加：

'Railing'

观察：

• length 是否变化？
• 新元素的索引是多少？

实验 2：测试错误索引

暂时读取：

products[10]

观察得到的结果，并思考：为什么没有报出一个正常产品名称？

实验 3：修改不同位置

把：

products[1] = 'WPC Cladding';

改成：

products[0] = 'Composite Decking';

观察哪个元素发生变化。

实验 4：连续 push()

连续添加两个产品：

products.push('Pergola');
products.push('Railing');

观察数组长度和最终排列顺序。

实验 5：理解 pop() 的返回值

代码中：

const removedLast = products.pop();

注意 pop() 不只是删除最后一项，它还会把被删除的数据返回出来。

尝试把返回值输出到控制台：

console.log(removedLast);

6. 为什么数组非常重要

实际开发中大量数据天然就是“列表”：

产品列表
文章列表
图片列表
订单列表
客户列表
股票列表
搜索结果
API 返回的数据

因此数组是 JavaScript 最核心的数据结构之一。

以后经常会遇到：

const products = [...];
const posts = [...];
const users = [...];

真正的应用通常不是只读取一个数组元素，而是对整组数据进行：

遍历
筛选
查找
排序
转换
统计

这些正是下一章 06-array-methods 要解决的问题。

7. 本章暂不扩展

为了保持“一个实验只研究一个核心问题”，本章暂时不加入：

• map()
• filter()
• find()
• reduce()
• sort()
• 对象数组
• 表单新增产品
• 点击删除
• localStorage

这些内容会在后续章节逐步加入。

下一章

06 Array Methods：数组高级处理

重点研究：

map
filter
find
reduce
sort

学习目标从“保存一组数据”升级到“处理一组数据”。