原生js重写each方法
js原生有个for-each方法,但是只能遍历数组不能遍历对象;
jq有个$.each倒是可以遍历数组和对象,但是项目中如果不想用jq呢,我们就用原生来写一个吧。
[12,23,34].forEach((item,index)=>{
<!--这里默认this是window-->
console.log(item);
if(index>=1){
return fasle
}
},"这个参数可以指定回调函数里的this")
执行结果: 12,23
$.each({"name":"happy","age":18},(index,item)=>{
console.log(item);
if(item == "age" ){
return fasle
}
});//没有第三个参数
实现思路:
- each方法要接收两个参数,一个接收数组或者对象,一个接收回调函数
- 判断第一个参数是数组还是对象,再去执行不同的遍历
- 判断回调函数是否存在&要根据回调函数的返回值决定当前循环是否继续
- 如果第一个参数是对象,用for-in遍历的时候需要判断是否是私有属性
let each = function(obj,callback){
if("length" in obj){
for(let i =0;i<obj.length;i++){
let item = obj[i];
let res = callback && callback.call(item,i,item);
if(res === false){
break;
}
}
}else{
for(let key in obj){
if(obj.hasOwnProperty(key)){
let value = obj[key];
let res = callback && callback.call(value,key,value);
if(res === false){
break;
}
}
}
}
}
// 调用:
each([12,23,24],function(index,item){
console.log(index,item);
if(index>=1){
return false;
}
})
each({name:"happy",age:18,sex:1},function(key,value){
console.log(key,value);
if(key === 'age'){
return false;
}
})
热爱我热爱的