1. 程式人生 > >forEach方法(原生js學習)

forEach方法(原生js學習)

作用就是為陣列的每一項元素,都執行一次傳入的函式。

傳入的函式可帶三個引數,依次為item,index和arr,這個順序嚴格不能變換。item指代陣列的元素,index指代陣列元素的序列,arr指代陣列本身。

var arr=[{ name:"cute" },{name:"murphy"},{name:"cool"}];

arr.forEach(function(item,index,arr){
        console.log(item,index,arr);

});

forEach(fun,obj)還可傳入一個obj物件,用於指定fun函式中this的指向。

模擬forEach:

Array.prototype.forEach=function(fun,context){
            var len=this.length;
            var context=arguments[1];     //即使為undefined,call函式也正常執行。
            if(typeof fun !=="function"){
                throw "輸入正確函式!";
            }
            for(var i=0;i<len;i++){
                fun.call(context,this[i],i,this);
            }
 };
var arr=[5,6,7];
arr.forEach(function(item,index,arr){
console.log(item,index,arr);
});

以前一直疑惑,在形參裡寫好的引數,函式體為什麼就能馬上使用,類似的還有事件物件e(ajax完畢的形參data),這個e到底哪來的,彷彿天生就在形參裡,然後可以調e.type,e.target各種。原來之所以可以用這個函式裡頭的形參,是因為該函式本身是傳到另一個函式裡執行的,在另一個函式會給該函式形參傳值並立刻執行,於是該函式就可打印出所有形參。

然後

<p id="f">1</p>

document.getElementById("f").onclick=function(e){

console.log(e.type);

}

console.log(typeof document.getElementById("f").click);    // function

由此我們發現,之所以我們能調e.type,其實是

function(e){  console.log(e.type); }這個函式傳入click函式去執行,然後click函式將前一個函式的e形參賦了具體的值,所以最後我們可以調e.type/target等值,當然click函式的具體實現不得而知。

相關推薦

forEach方法原生js學習

作用就是為陣列的每一項元素,都執行一次傳入的函式。 傳入的函式可帶三個引數,依次為item,index和arr,這個順序嚴格不能變換。item指代陣列的元素,index指代陣列元素的序列,arr指代陣列本身。 var arr=[{ name:"cute" },{name:"murphy"},{name:"c

偽數組轉數組方法原生4種

ora .cn 成功 規範 test ids oar 都是 我們 偽數組也稱類數組。像arguments 或者 獲取一組元素返回的集合都是偽數組。 偽數組如何轉換成真正數組,其實我們很少去這麽做,但是那幫面試官可能會問,並且不止一種方法讓你去實現 方法一、 聲明一個空數組,

className相同的多個元素分別設定監聽事件原生JS實現

JS使用for迴圈動態生成多個div,HTML大概是這樣: <div class='title'> y </div> <div class='title'> i </div> <div class='title'> x &l

省市區聯動原生js實現

<!DOCTYPE html> <head> <title> 三級聯動 </title> <meta charset="utf-8"> </head> <bod

3377加減乘除等於24原生js實現

<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文件</title> </head> <body> </body>

跨域問題相關知識詳解原生js和jquery兩種方法實現jsonp跨域

syn con 加載 developer 兩種方法 ray exe 編寫 分組 1、同源策略 同源策略(Same origin policy),它是由Netscape提出的一個著名的安全策略。同源策略是一種約定,它是瀏覽器最核心也最基本的安全功能,如果缺少了同源策略,則瀏覽

原生js學習筆記

js程式是單執行緒依次執行,例如for(var i=1;i<=3;i++){ console.log(i); setTimeout(function(){ console.log(i); //輸出:1,2,3,4,4,4 },0) }js定時器有兩種

學習代碼檢視方法 摘自某圖片

方法 字符串 路徑 拷貝 就會 溢出 輸入 是否 代碼 看見運算,就檢查整數溢出。 看見拷貝,就檢查越界。 看到字符串輸入,就檢查各種註入。 看到打印信息,就檢查格式話攻擊。 看到文件輸入,就檢查路徑利用。 看到加密算法,就檢查是否安全。 看到開源代碼,就找歷史漏洞。 考見

跟著實例學習設計模式3-工廠方法創建型

迪米特 tex 新的 類的設計 package set pre sdn sso 工廠方法屬於創建型設計模式。 設計意圖:定義一個用於創建對象的接口。讓子類決定實例化哪一個類,工廠方法使一個類的實例化延遲到其子類。 靜態工廠使用面向對象的方式,有

移動端滑動條原生JS

顏色 empty || 原生 pre border relative innerhtml 課程 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

jsonp跨域寫淘寶搜索聯想詞原生js

div 註意 abs scrip 基礎 屬性 體驗 blur ext 一、主體 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset=

少說話多寫程式碼之Python學習017——字典的方法items、pop

  items方法將字典的所有項以列表方式返回,列表中每一項都表示為(鍵,值)對形式,但對字典的項的次序沒有什麼規律。 #items方法 d={'title':'繞口令:喇嘛和啞巴',    'content':'打南邊來了個啞巴,腰裡別了個喇叭;打北邊來了個喇

少說話多寫程式碼之Python學習019——字典的方法update、values

update方法 利用一個字典A去更新另一個字典B。A的項會新增到B中,如果存在相同鍵,則A會覆蓋B的這個鍵。 #update 方法 d={     'name':'楊友山',     'blog地址':'https://blog.csdn.net/y

少說話多寫程式碼之Python學習018——字典的方法popitem、setdefault

popitem方法 popitem其實和pop方法沒什麼兩樣,雖然解釋說pop是彈出字典的最後一項,popitem彈出的是字典的隨機項。但是字典是一個連結串列結構,哪裡有最後一項和第一項呢?不管怎麼說,我們可以看看popitem的用法。 #popitem d={} d={'詩仙':'李白',

強化學習RLAI讀書筆記第十三章策略梯度方法Policy Gradient Methods

強化學習(RLAI)讀書筆記第十三章策略梯度方法(Policy Gradient Methods) 13.1 Policy Approximation and its Advantages 13.2 The Policy Gradient Theore

地址的三級聯動原生js

html: <select name="provlevel" id="provlevel" style="width: 120px;height:30px;"> <option>--請選擇省份--</option></select><select

對頁面某個節點的拖曳原生js和vue專案

HTML5中的draggable draggable 屬性規定元素是否可拖動(連結和影象預設是可拖動的。) /// true:規定元素是可拖動的,false:規定元素是不可拖動的,auto:使用瀏覽器的預設特性。 <element draggable="true|false|a

js中對陣列的常用操作方法push,pop

參考地址:https://wenda.so.com/q/1461319712727140 1.push,pop           var oldArr=[1,2,3]; alert(oldArr.push(4,[5,6]))–&g

JS 檔案讀取的進度條顯示方法FileReader、onprogress——20181116

這裡FileReader只是從磁碟把檔案讀取到瀏覽器,並沒有傳送到伺服器。參考連結1       參考連結2 <!DOCTYPE html> <html > <head> <meta charset="UTF-8"

GRE新東方推薦學習方法2010年左右

單詞:新東方新版紅寶書(《NEW GRE 詞彙精選》),不用《再要你命三個》 填空:新東方綠皮書(紮實的詞彙量) 閱讀:1 新東方綠皮書;2 《GRE閱讀 39+3全攻略》;3 GRE閱讀36套(陳虎平) *《多層結構法》差評 作文:作文大講堂(韋曉亮);TOEFL口語就是口頭作文;頭尾背模板 輔導班