原生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;

       }

   })

巴特西

原生js重写each方法

最新文章

热门文章