携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第20天,点击查看活动详情
前言
作为一个前端切图仔,少有和各类设计模式打交道。但这不影响我们学习设计模式的思维,来提升我们的代码水平。
本章通过讲解迭代器模式,希望能够让你对设计模式更一步的学习。
本章学习内容👇
- 迭代类数组对象
- 实现倒序迭代器
- 实现中止迭代器
迭代类数组对象和字面量对象
迭代器除了能够迭代数组对象外,对于类数组这种具有length属性并且可以用下标访问的对象以及字面量独享,也是能够迭代的。我们通过判断目标是否为类数组,将它与数组同质化处理;而字面量对象的遍历我们在实现时使用for in语句实现👇
let ForEach = function (target,callback){
let len = target.length
if (isArrayLike(target)){//判断是否为数组或类数组
for(let i = 0 ; i < len ; i++){
//遍历数组,依次执行回调
callback(target[i],i)
}
}else{
for(let i in target){
callback(target[i],i)
}
}
}
function isArrayLike(target){
return !!("length" in target & !!target && target.length);
}
倒序迭代器
迭代器本身没有一个固定的顺序,没有强制要求是顺序遍历的。只要能够遍历完整个可迭代对象那么这个迭代器就是成立的。因此,我们也可以开发出一个倒序的迭代器👇
let reverseForEach = function (target,callback){
let len = target.length-1
for(let i = len ; i > -1 ; i--){
//遍历数组,依次执行回调
callback(target[i],i)
}
}
中止迭代器
中止迭代器,有用过吗?如果没有那你可能得回去学习下ES6了。在ES6中我们有常用的俩个中止迭代器:find以及findIndex。这俩个方法都会在满足一个条件时,结束迭代,返回目标元素或下标。
我们基于这一点,一起来实现一个类似于find的myFind函数吧🤔
在此处我们通过使用break的方式停止迭代👇
let myFind = function (target,callback){
let len = target.length
let value = undefined
for(let i = 0 ; i < len ; i++){
value = callback(target[i],i)
if (value){//如果找到了,则停止迭代
break
}
}
return value
}
尾声
迭代器模式相关内容就到此结束了,欢迎继续阅读本专栏中的其他设计模式😊