🎯今日学习目标
-
理解数组方法的核心设计思想
-
掌握
forEach、map、filter、reduce、find、some、every、flat、flatMap的实现 -
学会处理边界情况和异常
📚 前情:首先明白什么是数组?数组有哪些属性和特性?
- 数组是有序(顺序固定)的数据集合,通过数字索引来访问元素(从0开始);
- 核心属性:length、数字索引
- 特性:可以存储任意类型、长度自动更新
- 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]
【第二步】 注意边界条件
- 空数组
- 稀疏数组 ??包含空位的数组,空位没有索引但是会占用数组的长度
- 考虑其他数据类型(undefined、null、类对象)
- 错误捕获
- 注意this的流转
【第三步】 搭建基础框架
- 制定合理的方法名
- 确认每个方法的输入和输出
【第四步】 具体实现和测试
1. forEach
javascript
1