JavaScript 数组方法的系统方法: 分类理解 + 形象化记忆的方法

文章目录

[1. 按用途分类记忆（四大类别）](#1. 按用途分类记忆（四大类别）)
- [📊 第一类：查询类（问问题 - 返回布尔值/元素）](#📊 第一类：查询类（问问题 - 返回布尔值/元素）)
- [🔄 第二类：转换类（加工厂 - 返回新数组）](#🔄 第二类：转换类（加工厂 - 返回新数组）)
- [📥 第三类：累积类（收纳箱 - 返回单个值）](#📥 第三类：累积类（收纳箱 - 返回单个值）)
- [🎯 第四类：操作类（动手做 - 可能修改原数组）](#🎯 第四类：操作类（动手做 - 可能修改原数组）)
[2. 参数顺序的规律记忆](#2. 参数顺序的规律记忆)
- [🔢 统一参数模式：](#🔢 统一参数模式：)
- 形象记忆：就像问一个人问题：
- 参数位置口诀：
[3. 对比记忆法（相似方法对比）](#3. 对比记忆法（相似方法对比）)
- [find vs filter：](#find vs filter：)
- [map vs forEach：](#map vs forEach：)
[4. 实际场景联想记忆](#4. 实际场景联想记忆)
- 购物车场景：
- 用户管理场景：
[5. 制作自己的速查表](#5. 制作自己的速查表)
[6. 刻意练习方法](#6. 刻意练习方法)
- 每日一练：
- 项目实战：

1. 按用途分类记忆（四大类别）

📊 第一类：查询类（问问题 - 返回布尔值/元素）

js 复制代码

// 特征：都是"问问题"，返回 true/false 或具体元素
const arr = [1, 2, 3, 4, 5];

// ❓ 包含吗？ -> includes(值)
arr.includes(3) // true

// ❓ 有满足条件的吗？ -> some(条件)
arr.some(x => x > 3) // true

// ❓ 都满足条件吗？ -> every(条件) 
arr.every(x => x > 0) // true

// ❓ 找第一个满足的 -> find(条件)
arr.find(x => x > 2) // 3

// ❓ 找第一个满足的索引 -> findIndex(条件)
arr.findIndex(x => x > 2) // 2

🔄 第二类：转换类（加工厂 - 返回新数组）

js 复制代码

// 特征：都是"加工数据"，返回新数组
const arr = [1, 2, 3];

// 🏭 映射加工 -> map(加工函数)
arr.map(x => x * 2) // [2, 4, 6]

// 🏭 过滤筛选 -> filter(条件)
arr.filter(x => x > 1) // [2, 3]

// 🏭 展开一层 -> flat(深度)
[1, [2, 3]].flat() // [1, 2, 3]

// 🏭 映射后展开 -> flatMap(加工函数)
arr.flatMap(x => [x, x*2]) // [1, 2, 2, 4, 3, 6]

📥 第三类：累积类（收纳箱 - 返回单个值）

js 复制代码

// 特征：把数组"收敛"成一个值
const arr = [1, 2, 3, 4];

// 📦 从左到右累积 -> reduce(累积函数, 初始值)
arr.reduce((sum, x) => sum + x, 0) // 10

// 📦 从右到左累积 -> reduceRight(累积函数, 初始值)
arr.reduceRight((sum, x) => sum + x, 0) // 10

🎯 第四类：操作类（动手做 - 可能修改原数组）

js 复制代码

// 特征：直接操作原数组
let arr = [1, 2, 3, 4];

// ✂️ 添加/删除 -> splice(开始位置, 删除数量, 添加元素)
arr.splice(1, 2, 99) // 返回删除的元素 [2, 3]

// 📌 结尾添加 -> push(元素)
arr.push(5) // 返回新长度

// 📌 开头添加 -> unshift(元素)  
arr.unshift(0) // 返回新长度

// 🗑️ 结尾删除 -> pop()
arr.pop() // 返回删除的元素

// 🗑️ 开头删除 -> shift()
arr.shift() // 返回删除的元素

2. 参数顺序的规律记忆

🔢 统一参数模式：

方法名(回调函数(当前元素, 索引, 原数组), thisArg)

形象记忆：就像问一个人问题：

当前元素：你现在在做什么？（最重要的）
索引：你是第几个做的？（位置信息）
原数组：你们团队都在做什么？（上下文）

参数位置口诀：

复制代码

"先值后索引，最后整个数组"

3. 对比记忆法（相似方法对比）

find vs filter：

js 复制代码

// 🔍 find - 找第一个（返回单个元素）
[1, 2, 3, 4].find(x => x > 2) // 3

// 🎯 filter - 找所有（返回数组）
[1, 2, 3, 4].filter(x => x > 2) // [3, 4]

// 记忆：find像侦探找一个人，filter像渔网捞一堆鱼

map vs forEach：

js 复制代码

// 🏭 map - 加工返回新数组（有返回值）
[1, 2, 3].map(x => x * 2) // [2, 4, 6]

// 🔄 forEach - 只是遍历（无返回值）
[1, 2, 3].forEach(x => console.log(x)) // undefined

// 记忆：map像工厂生产新产品，forEach像质检员只是检查

4. 实际场景联想记忆

购物车场景：

js 复制代码

const cart = [
    {name: '苹果', price: 5, quantity: 2},
    {name: '香蕉', price: 3, quantity: 3}
];

// 🧮 总金额：reduce（累积计算）
const total = cart.reduce((sum, item) => 
    sum + item.price * item.quantity, 0);

// 🏷️ 商品名称：map（提取属性）
const names = cart.map(item => item.name);

// 📦 贵商品：filter（筛选）
const expensive = cart.filter(item => item.price > 4);

// ✅ 有库存吗：some（是否存在）
const hasStock = cart.some(item => item.quantity > 0);

用户管理场景：

js 复制代码

const users = [
    {id: 1, name: '张三', active: true},
    {id: 2, name: '李四', active: false}
];

// 👥 活跃用户：filter
const activeUsers = users.filter(user => user.active);

// 🔢 用户ID：map  
const userIds = users.map(user => user.id);

// 🔍 找用户：find
const user = users.find(u => u.id === 1);

// ✅ 都活跃吗：every
const allActive = users.every(user => user.active);

5. 制作自己的速查表

用途	方法	返回值	修改原数组	记忆口诀
查询存在	includes()	布尔值	❌	"包含吗？"
查询满足	some()	布尔值	❌	"有满足的吗？"
查询全部	every()	布尔值	❌	"都满足吗？"
查找元素	find()	元素	❌	"找第一个"
转换所有	map()	新数组	❌	"加工每个"
筛选元素	filter()	新数组	❌	"过滤留下"
累积计算	reduce()	单个值	❌	"收敛成值"

6. 刻意练习方法

每日一练：

js 复制代码

// 周一：map/filter 练习
const numbers = [1, 2, 3, 4, 5];
// 1. 所有数字平方
// 2. 只保留偶数
// 3. 数字转字符串

// 周二：find/some/every 练习  
const users = [{age: 25}, {age: 30}, {age: 17}];
// 1. 找第一个成年人
// 2. 有未成年人吗？
// 3. 都成年了吗？

项目实战：

在实际项目中有意识地在每个数组操作时思考：

我要做什么？（查询、转换、筛选、累积）
选择对应类别的方法
回忆参数顺序

这样坚持2-3周，就能形成肌肉记忆，不再需要临时查文档了！