06-array-methods

06 Array Methods

JavaScript Development Lab 第 06 个独立最小实验。

本章专门研究 JavaScript 数组中最常用的一组高级方法：

• map()
• filter()
• find()
• reduce()
• sort()

重点不是制作复杂界面，而是观察：

原始数组
↓
数组方法
↓
得到新数组 / 单个对象 / 单个结果
↓
页面输出

---

1. 这一章解决什么问题？

第 05 章已经解决了“数组是什么、如何新增删除元素”。

但真实开发中更常见的问题通常是：

• 从 100 个产品里筛选符合条件的数据
• 找到指定分类的第一项
• 提取所有产品名称
• 计算合计值
• 按价格或日期排序

这些场景都属于“数组数据处理”。

---

2. 核心 JavaScript 知识

filter()

筛选符合条件的元素，并返回新数组。

products
↓
price < 100
↓
符合条件的 products

map()

把数组中的每一项转换成新的内容，并返回新数组。

产品对象
↓
product.name
↓
产品名称数组

find()

查找第一条符合条件的数据。

与 filter() 的区别：

• filter() 返回数组
• find() 返回一个元素

reduce()

把整个数组归并成一个值。

例如：

89 + 118 + 156 + 68
↓
431

sort()

对数组进行排序。

需要特别注意：

sort() 会直接修改原数组。

因此实验中先使用：

[...products]

复制数组，再进行排序。

---

3. HTML 做了什么？

index.html 只提供几个结果展示区域：

• 原始数据
• filter 结果
• map 结果
• find 结果
• reduce 结果
• sort 结果

页面本身不负责数据逻辑。

---

4. JavaScript 做了什么？

js/app.js：

1. 定义产品数组
2. 使用不同数组方法处理数据
3. 得到不同结果
4. 把结果输出到页面

核心数据结构：

const products = [
  {
    id: 1,
    name: 'WPC Decking',
    category: 'flooring',
    price: 89
  }
];

这种：

Array
+
Object

是 Web 开发中极常见的数据结构。

---

5. 数据如何流动？

filter

products
↓
filter()
↓
affordableProducts
↓
renderProducts()
↓
HTML

map

products
↓
map()
↓
productNames
↓
页面

reduce

products
↓
reduce()
↓
totalPrice
↓
页面

---

6. 修改哪里可以观察结果？

推荐直接修改 js/app.js。

实验 A

把：

product.price < 100

改为：

product.price < 80

观察筛选结果。

实验 B

把：

product.category === 'flooring'

修改为：

product.category === 'fence'

观察 find()。

实验 C

将排序：

a.price - b.price

修改为：

b.price - a.price

观察排序方向。

实验 D

新增一条产品数据。

观察：

• 原始列表
• 筛选结果
• map
• reduce
• 排序结果

如何同时发生变化。

---

7. 可以继续扩展什么？

本章可以继续研究：

• some()
• every()
• includes()
• findIndex()
• flat()
• flatMap()

但这些暂时不加入主实验，避免一次学习过多 API。

---

与第 05 章的区别

第 05 章：

研究数组本身。

例如：

push
pop
shift
unshift
length
index

第 06 章：

研究如何处理数组中的数据。

例如：

map
filter
find
reduce
sort

这两个概念建议明确区分。

---

文件结构

06-array-methods/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── app.js
└── README.md

---

学习目标

完成本章后，应能够理解：

当一组数据存放在数组中时，可以通过数组方法完成筛选、转换、查找、统计和排序，而不需要手工逐项处理。

下一章：

07-object：JavaScript 对象与结构化数据。