陣列方法之forEach底層封裝

2021-10-23 16:53:02 字數 1777 閱讀 1630

foreach方法是es5新增的陣列方法,用於陣列的迴圈遍歷,只有乙個引數,需要傳入乙個函式,很多人說是有三個引數,其實這種說話是錯誤的,是他的引數函式有三個形參,而不是foreach方法有三個引數。

(1)foreach方法接受乙個函式引數,該函式引數中有三個形參,當然有些形參用不到就可以不宣告。

(2)第乙個形參為遍歷陣列的每一項;第二個形參為遍歷陣列的索性好;第三個引數為遍歷陣列的本身

(3)foreach方法可以在所有的陣列例項中使用。

下圖是foreach的基本使用和執行結果

1.封裝的函式應該定義在**,要搞明白這個問題之前我得先知道這個函式是給誰用的,當然是給陣列用的,但是並不是給單個陣列來使用的而是所有陣列例項都公用的方法,那什麼地方是所有的陣列都可以訪問到的呢?我們知道乙個物件呼叫方法時假如自身沒有定義這個方法,那麼就會沿著原型鏈向上一直查詢是否有該方法,沒有找到就會報錯。所以我們應該定義在陣列例項的原型鏈上,而且是array的原型物件上,也可以放在object的原型上但是放在這裡的話所有的物件都可以使用,而foreach方法是給陣列使用的,所以我們應該定義在陣列的原型物件上,即array.prototype.myforeach = function () {}

2. 定義好了函式,接下來就是引數的問題,原生foreach方法中接受乙個函式型別的引數,所以應該寫成array.prototype.myforeach = function (callback) {}

3. 原生foreach方法是對陣列進行遍歷,那我我們呼叫foreach方法內部肯定是對陣列進行迴圈遍歷的操作。那麼我們遍歷就肯定要知道遍歷陣列的長度,而我們定義的函式內部怎麼拿到需要遍歷的陣列呢?我們通常的使用方式是 arr.foreach(); 不難看出 foreach函式內部this指向他的呼叫者,所以在內部函式中可以通過this拿到。

4.首先我們使用foreach方法的時候,有三個形參,而形參是由呼叫函式傳入的實參決定的,所以在函式內部呼叫傳進來的callback,並為其傳入三個實參,分別為陣列的每一項,陣列的索引和陣列本身。

從上面我們已經可以實現基本的foreach方法,但是還是會有一些問題,比如使用函式是第乙個引數並不是函式型別的,我們該怎麼做呢?函式的內部執行出了錯誤我們該怎麼向外界傳遞錯誤呢?

1.我們可以對傳入進來的callback引數進行資料型別的判斷,判斷方式在我的第一篇文章就有寫到這裡就不再過多的說明。

2.可以通過**try{} catch(){}**語法來檢測函式內部是否執行出錯了並返回錯誤的原因。

我們可以為自定義的foreach方法增加乙個引數,用於篩選迴圈的資料,比如可以只迴圈遍歷奇數項,或偶數項,或者自定義規則都可以,下面只列舉了奇數項和偶數項,自定義的就靠大家去發揮了

關注笨笨的熊

陣列方法之splice

按照順序寫入引數 開始索引號 刪除元素個數 被插入元素 形象化過程 確定好索引號之後,有兩個選擇 刪除對應元素或者不刪除。一 刪除元素 只刪除不插入。對應元素被刪除,剩餘陣列元素自動補齊空位,索引號發生改變,陣列長度發生改變。刪除後插入。被插入的第乙個元素放到 開始索引號 位置,並陸續把其他需要被插...

es6之陣列方法

一丶類陣列 const divs document.getelementsbytagname div console.log divs htmlcollection console.log divs instanceof array false1.用es5的方法將類陣列變為陣列,借助slice方法 ...

javaScript 陣列方法

1 array.concat 合併陣列 var a a b c var b x y z var c a.concat b,true c a b c x y z true 2 array.join 把陣列轉換成字串,預設是join var a a b c a.push d var c a.join c...