原生js實現each方法

wh469012917 發布于2019-08-26 13:55 / 1083人閱讀

摘要：里面有個方法，將循環操作簡化便捷。隨后出了個方法，兩個雖然用法相近，但是不能處理對象類型。且無法通過達到效果。在不使用的方法時，該如何處理或者說用原生如何來實現前些前寫了個類庫其中就實現了該方法。

jquery里面有個each方法，將循環操作簡化、便捷。
隨后es出了個forEach方法，兩個雖然用法相近，但是不能處理對象類型。且無法通過return true達到continue效果。
此外還有個every方法，該方法雖然可以實現continue效果，但是在處理類數組與對象類型時，完全無用。

在不使用jquery的each方法時，該如何處理；或者說用原生如何來實現？
前些前寫了個類庫: jTool, 其中就實現了該方法。

簡單實現:

// 通過字面量方式實現的函數each
var each =  function(object, callback){
  var type = (function(){
          switch (object.constructor){
            case Object:
                return "Object";
                break;
            case Array:
                return "Array";
                break;
            case NodeList:
                return "NodeList";
                break;
            default:
                return "null";
                break;
        }
    })();
    // 為數組或類數組時, 返回: index, value
    if(type === "Array" || type === "NodeList"){
        // 由于存在類數組NodeList, 所以不能直接調用every方法
        [].every.call(object, function(v, i){
            return callback.call(v, i, v) === false ? false : true;
        });
    }
    // 為對象格式時,返回:key, value
    else if(type === "Object"){
        for(var i in object){
            if(callback.call(object[i], i, object[i]) === false){
                break;
            }
        }
    }
}

我們來try一下，測試下數組、對象、類數組類型及中斷效果 數組類型

var _array = [1,2,3,4];
each(_array, function(i, v){
  console.log(i + ": " + v);
});

輸出如下:

對象類型

var object = {a:1, b:2, c:3}
each(object, function(i, v){
console.log(i + ": " + v);
});
輸出如下:

類數組類型

var ele = document.querySelectorAll("div");
each(ele, function(i, v){
  console.log(i + ": " + v);
});

輸出如下:

增加中斷條件

var object2 = {name:"baukh", age: "29", six:"男", url: "www.lovejavascript.com",}
each(object2, function(i, v){
  if(i === "age"){ //如果存在鍵值為age的屬性時，則輸出警告，用于實現continue效果
    console.log("存在鍵值為age，這家伙已經"+v+"歲了");
    return true;
  }
  if(i === "six" && v === "男"){//如果存在鍵值為age的屬性時，則輸出跳出，用于實現break效果
    console.log("存在鍵值為six,是個男的，不用關注了~");
    return false;
  }
  console.log(i + ": " + v);
});

輸出如下:

從結果可以看出來，each方法已經實現了jquery的each功能。且實現如此簡單~

隨筆一行
這是前端最好的時代，這也是前端最壞的時代。眾多前端框架滿天飛，隨著 jQuery 在前端行業的慢慢弱化，總是會有一種斯人遠去，何者慰籍的感覺。互勉吧，各位。

另推薦個表格組件gridManager

云服務器 GPU云服務器原生js實現 ajax原生js實現原生js實現addclass 原生js實現ajax

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/109811.html

原生js實現on與off 方法

摘要：所以僅對參數進行了處理，功能上沒有實現子選擇器事件觸發后執行的函數指定事件是否在捕獲或冒泡階段執行事件句柄在捕獲階段執行默認。使用過jQuery的同學，應該對事件綁定方法 .on() .off() 有一定的了解。在個人類庫jTool 中實現了這兩個方法，這里就來細說下原生實現方式。實現方式以下為個人類庫jTool 中 Event 實現方式。代碼中使用到一個基礎方法對象utili...

tanglijun 2019-08-26 13:54 評論0 收藏0
解釋一下為什么我很少jQuery

摘要：為什么有一個東西，叫，它是一個快速輕量級跨平臺的框架。同時，它也是這個世界上最輕量級的框架沒有之一它有多快如下我們在里引入比上面更快的方法是什么沒有代碼是的，就是沒有代碼，因為實在太強了，以至于所有的瀏覽器在年前內置了它。這里聲明一下，這不是反jQuery的文章，jQuery作為一個js庫給大家的項目開發帶來很多便利，但有時候仔細想想，我們真的需要jQuery嗎？一年前的lpisme...

happyhuangjinjin 2019-08-21 11:30 評論0 收藏0
Zepto核心模塊之工具方法拾遺

摘要：舉例需要注意的是，此時回調函數中的指向的就是數組或者對象的某一項。中提供的拷貝方法，默認為淺拷貝，如果第一個參數為布爾值則表示深拷貝。前言平時開發過程中經常會用類似each、map、forEach之類的方法，Zepto本身也把這些方法掛載到$函數身上，作為靜態方法存在，既可以給Zepto的實例使用，也能給普通的js對象使用。今天我們主要針對其提供的這些api做一些源碼實現分析。源...

Alex 2019-08-20 19:04 評論0 收藏0
Zepto核心模塊之工具方法拾遺

摘要：舉例需要注意的是，此時回調函數中的指向的就是數組或者對象的某一項。中提供的拷貝方法，默認為淺拷貝，如果第一個參數為布爾值則表示深拷貝。前言平時開發過程中經常會用類似each、map、forEach之類的方法，Zepto本身也把這些方法掛載到$函數身上，作為靜態方法存在，既可以給Zepto的實例使用，也能給普通的js對象使用。今天我們主要針對其提供的這些api做一些源碼實現分析。源...

lcodecorex 2019-08-01 17:31 評論0 收藏0