Day 1:手写数组方法 - 掌握数据处理的基石

🎯今日学习目标

  • 理解数组方法的核心设计思想

  • 掌握forEachmapfilterreduce、find、some、every、flat、flatMap的实现

  • 学会处理边界情况和异常

📚 前情:首先明白什么是数组?数组有哪些属性和特性?

  1. 数组是有序(顺序固定)的数据集合,通过数字索引来访问元素(从0开始);
  2. 核心属性:length、数字索引
  3. 特性:可以存储任意类型、长度自动更新
  4. js内置了很多常用的方法在数组的原型上

【第一步】 分析原生行为

javascript 复制代码
const arr = [1, 2, 3, 4, 5];

// forEach - 遍历执行,直接修改原数组
arr.forEach(el => console.log(el)); // 依次输出1 2 3 4 5

// map - 遍历执行,返回一个新数组
arr.map(el => el + 1); // [2, 3, 4, 5, 6]

// filter - 筛选出符合条件的元素,返回新数组
arr.filter(el => el > 3); // [4, 5]

// reduce - 累计计算并返回结果
arr.reduce((acc, cur) => acc + cur); // 15

// find - 找到第一个符合条件的元素,返回该元素
arr.find(el => el*2 === 6); // 3

// some - 检查至少有一个符合的元素,返回 true 或 false
arr.some(el => el === 5); // true

// every - 检查所有元素都符合,返回 true 或 false
arr.every(el => typeof(el) === 'number'); // true

// flat - 扁平化数组--可以传扁平化的层次(默认是1),返回一个新数组
[[arr]].flat(2); // [1, 2, 3, 4, 5]

// flatMap - 先map再执行flat(1),返回一个新数组
arr.flatMap(el => [el, el + 1]); // [1, 2, 2, 3, 3, 4, 4, 5, 5, 6]

【第二步】 注意边界条件

  1. 空数组
  2. 稀疏数组 ??包含空位的数组,空位没有索引但是会占用数组的长度
  3. 考虑其他数据类型(undefined、null、类对象)
  4. 错误捕获
  5. 注意this的流转

【第三步】 搭建基础框架

  1. 制定合理的方法名
  2. 确认每个方法的输入和输出

【第四步】 具体实现和测试

1. forEach

javascript 复制代码
1
相关推荐
Wect5 小时前
LeetCode 5. 最长回文子串:DP + 中心扩展
前端·算法·typescript
漫游的渔夫5 小时前
前端开发者做 Agent:别写成一次请求,用 5 步受控循环防止 AI 乱跑
前端·人工智能·typescript
薛定猫AI7 小时前
【深度解析】Gemma Chat 本地 AI 编程 Agent:Electron + MLX + 开源模型的离线 Vibe Coding 实战
javascript·人工智能·electron
kyriewen7 小时前
Webpack vs Vite:一个是“老黄牛”,一个是“猎豹”,你选谁?
前端·webpack·vite
打小就很皮...7 小时前
html2canvas + jsPDF 生成 PDF 的踩坑与解决方案总结
前端·pdf
全栈前端老曹7 小时前
【前端地图】多地图平台适配方案——高德、百度、腾讯、Google Maps SDK 差异对比、封装统一地图接口
前端·javascript·百度·dubbo·wgs84·gcj-02·bd09
笑虾7 小时前
Win10 修改注册表 让鼠标悬停PNG上时 tip 始终显示分辨率
开发语言·javascript·ecmascript
雾岛听风6917 小时前
JavaScript基础语法速查手册
开发语言·前端·javascript
遇见~未来7 小时前
第三篇_现代布局_从弹性到网格
前端·css3
前端那点事7 小时前
Vue前端SEO优化全攻略(实操落地版,新手也能上手)
前端·vue.js