好,这个你问得很对 👍
我给你一份前端(JS / RN)真正常用的数组方法大全,
不是 API 列表那种,而是“什么时候用 + 一眼能懂的例子”。
下面你可以当 随查手册 用。
⸻
一、最核心的遍历类(90% 场景)
1️⃣ forEach —— 只干活,不要结果
👉 做副作用:改值、打印、统计
arr.forEach((item, index) => {
item.isSelect = false;
});
⚠️ 注意:
• ❌ 没有返回值
• ❌ 不能 break
• ❌ 不适合“找一个就停”
⸻
2️⃣ map —— 一对一“变形”
👉 原数组 → 新数组(长度不变)
const newArr = arr.map(item => ({
...item,
isSelect: false,
}));
✔ 常用于:接口数据加工、渲染数据
❌ 不要用 map 去“只改某一个”
⸻
3️⃣ filter —— 筛选
👉 返回满足条件的新数组
const selected = arr.filter(item => item.isSelect);
✔ 批量删除 / 选中列表
❌ 不修改原数组
⸻
4️⃣ find —— 找第一个
const one = arr.find(item => item.id === 1);
✔ 找对象
✔ 找到就停
❌ 找不到返回 undefined
⸻
5️⃣ findIndex —— 找索引
const index = arr.findIndex(item => item.id === 1);
✔ 配合 splice / 直接改某一项
⸻
二、判断类(true / false)
6️⃣ some —— 有一个满足就行
const hasSelected = arr.some(item => item.isSelect);
👉 “有没有选中的?”
⸻
7️⃣ every —— 必须全部满足
const allSelected = arr.every(item => item.isSelect);
👉 “是不是全选?”
⸻
三、累加 / 归并
8️⃣ reduce —— 最强但最容易写乱
const total = arr.reduce((sum, item) => {
return sum + item.price;
}, 0);
常见用途:
• 求和
• 分类
• 生成对象 / Map / Set
⚠️ 能用 map + filter 的,别急着用 reduce
⸻
四、修改原数组(⚠️ 小心)
9️⃣ push / pop
arr.push(4); // 尾部加
arr.pop(); // 尾部删
⸻
🔟 shift / unshift
arr.shift(); // 头部删
arr.unshift(0); // 头部加
⸻
11️⃣ splice —— 万能刀(慎用)
arr.splice(1, 1); // 从 index=1 删 1 个
arr.splice(1, 0, newItem) // 插入
✔ 能删 / 能插 / 能改
❌ 非常容易写错
⸻
五、不改原数组(推荐)
12️⃣ slice —— 截取
const sub = arr.slice(0, 3);
⸻
13️⃣ concat —— 合并
const newArr = arr.concat(otherArr);
⸻
14️⃣ 展开运算符 ...
const newArr = [...arr, newItem];
👉 React / RN 里最常用
⸻
六、排序 & 反转
15️⃣ sort ⚠️ 会改原数组
arr.sort((a, b) => a.age - b.age);
❗ 如果在 React 里用:
[...arr].sort(...)
⸻
16️⃣ reverse ⚠️ 会改原数组
arr.reverse();
⸻
七、查找类(基础)
17️⃣ includes
arr.includes(3);
⸻
18️⃣ indexOf
arr.indexOf(3);
⸻
八、Set / 数组联用(你最近用得很多)
// 数组 → Set(去重)
new Set(arr);
// Set → 数组
[...set];
⸻
九、你当前场景的“标准答案”
✅ 取所有 isSelect === true 的 id
const ids = refreshListRef.current.dataList
.filter(item => item.isSelect)
.map(item => item.id);
⸻
十、速记口诀(很重要)
🔹 改原数组 → for / forEach / splice
🔹 生成新数组 → map / filter
🔹 找一个 → find
🔹 判断有没有 → some
🔹 判断是不是全 → every
⸻
如果你愿意,
我可以下一步给你整理一份 “RN / React 状态里,数组方法用错必炸清单”,
全是你这两天遇到的坑 😄