RN Array详细

好,这个你问得很对 👍
我给你一份前端(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 状态里,数组方法用错必炸清单”,
全是你这两天遇到的坑 😄

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Day4内容是Array的方法使用,完整代码贴在文章最下方,据此我找了一篇整合Array方法清单的文章。 数组的方...
    ____1301阅读 254评论 0 0
  • js中数组的方法种类众多,有ES5之前版本中存在的,ES5新增,ES6新增等;并且数组的方法还有原型方法和从obj...
    小碳儿阅读 400评论 0 0
  • (一) 数组的定义 数组(array)是按次序排列的一组值。每个值的位置都有编号(从0开始),整个数组用方括号表示...
    woow_wu7阅读 47,146评论 0 6
  • 1 构造函数 上面代码中,Array构造函数的参数2,表示生成一个两个成员的数组,每个位置都是空值。 如果没有使用...
    徵羽kid阅读 514评论 0 0
  • 构造函数 Array是JavaScript的内置对象,同时也是一个构造函数,可以用它生成新的数组。 上面代码中,A...
    许先生__阅读 344评论 0 1

友情链接更多精彩内容