zoukankan      html  css  js  c++  java
  • 原生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;
           }
       })
    
  • 相关阅读:
    七. 多线程编程3.主线程
    七. 多线程编程1.线程的概念
    六. 异常处理12.断言
    liunx 安装 mysql 5.6
    idea Unable to open debugger port (127.0.0.1:58006) Address already in use: JVM_Bind 的解决办法
    liunx 安装redis 4.0
    liunx 安装jdk1.8
    idea 去除xml文件sql语句背景色
    改变数据库和表编码
    mybatis 按in 函数参数顺序排序
  • 原文地址:https://www.cnblogs.com/angfl/p/dayday_each.html
Copyright © 2011-2022 走看看