您現在的位置: 365建站網 > 365學習 > JS/javascript中的forEach、$.each、map使用方法

JS/javascript中的forEach、$.each、map使用方法

文章來源:365jz.com     點擊數:496    更新時間:2017-12-14 19:45   參與評論

forEach是ECMA5中Array新方法中最基本的一個,就是遍歷,循環。例如下面這個例子:

[1, 2 ,3, 4].forEach(alert);

等同于下面這個for循環

var array = [1, 2, 3, 4];
for (var k = 0, length = array.length; k < length; k++) {
 alert(array[k]);
}

Array在ES5新增的方法中,參數都是function類型,默認有傳參,forEach方法中的function回調支持3個參數,第1個是遍歷的數組內容;第2個是對應的數組索引,第3個是數組本身。

因此,我們有:

[].forEach(function(value, index, array) {
  // ...
});

對比jQuery中的$.each方法:

$.each([], function(index, value, array) {
  // ...
});

會發現,第1個和第2個參數正好是相反的,大家要注意了,不要記錯了。后面類似的方法,例如$.map也是如此。

var data=[1,3,4] ; 
var sum=0 ;
data.forEach(function(val,index,arr){
  console.log(arr[index]==val);  // ==> true
  sum+=val            
})
console.log(sum);          // ==> 8

map

這里的map不是“地圖”的意思,而是指“映射”。[].map(); 基本用法跟forEach方法類似:

array.map(callback,[ thisObject]);

callback的參數也類似:

[].map(function(value, index, array) {
  // ...
});

map方法的作用不難理解,“映射”嘛,也就是原數組被“映射”成對應新數組。下面這個例子是數值項求平方:

var data=[1,3,4]

var Squares=data.map(function(val,index,arr){
  console.log(arr[index]==val);  // ==> true
  return val*val           
})
console.log(Squares);        // ==> [1, 9, 16]

注意:由于forEach、map都是ECMA5新增數組的方法,所以ie9以下的瀏覽器還不支持(萬惡的IE?。?,不過呢,可以從Array原型擴展可以實現以上全部功能,例如forEach方法:

if (typeof Array.prototype.forEach != "function") {
  Array.prototype.forEach = function() {
    /* 實現 */
  };
}

 

forEach是ES5中操作數組的一種方法,主要功能是遍歷數組,例如:

 

var arr = [1,2,3,4];
arr.forEach(alert);

等價于:

var arr = [1, 2, 3, 4];
for (var k = 0, length = arr.length; k < length; k++) {
alert(array[k]);
}

forEach方法中的function回調有三個參數:第一個參數是遍歷的數組內容,第二個參數是對應的數組索引,第三個參數是數組本身

因此:

  [].forEach(function(value,index,array){


    //code something

  });

等價于:

 $.each([],function(index,value,array){


   //code something

 })

寫一個例子;

var arr = [1,2,3,4];
arr.forEach(function(value,index,array){
    array[index] == value;    //結果為true
    sum+=value; 
    });
console.log(sum);    //結果為 10

 

map:map即是 “映射”的意思 用法與 forEach 相似,用法即:

[].map(function(value,index,array){

  //code

})


一、原生JS forEach()和map()遍歷

共同點:

    1.都是循環遍歷數組中的每一項。

    2.forEach() 和 map() 里面每一次執行匿名函數都支持3個參數:數組中的當前項item,當前項的索引index,原始數組input。

    3.匿名函數中的this都是指Window。

    4.只能遍歷數組。

1.forEach()

   沒有返回值。

arr[].forEach(function(value,index,array){

  //do something

})

參數:value數組中的當前項, index當前項的索引, array原始數組;
數組中有幾項,那么傳遞進去的匿名回調函數就需要執行幾次;
理論上這個方法是沒有返回值的,僅僅是遍歷數組中的每一項,不對原來數組進行修改;但是可以自己通過數組的索引來修改原來的數組;

var ary = [12,23,24,42,1]; 
var res = ary.forEach(function (item,index,input) { 
       input[index] = item*10; 
}) 
console.log(res);//--> undefined; 
console.log(ary);//--> 通過數組索引改變了原數組; 


2.map()

有返回值,可以return 出來。

arr[].map(function(value,index,array){

  //do something

  return XXX

})

參數:value數組中的當前項,index當前項的索引,array原始數組;
區別:map的回調函數中支持return返回值;return的是啥,相當于把數組中的這一項變為啥(并不影響原來的數組,只是相當于把原數組克隆一份,把克隆的這一份的數組中的對應項改變了);

var ary = [12,23,24,42,1]; 
var res = ary.map(function (item,index,input) { 
    return item*10; 
}) 
console.log(res);//-->[120,230,240,420,10];  原數組拷貝了一份,并進行了修改
console.log(ary);//-->[12,23,24,42,1];  原數組并未發生變化

兼容寫法:



不管是forEach還是map在IE6-8下都不兼容(不兼容的情況下在Array.prototype上沒有這兩個方法),那么需要我們自己封裝一個都兼容的方法,代碼如下:

/**
* forEach遍歷數組
* @param callback [function] 回調函數;
* @param context [object] 上下文;
*/ 
Array.prototype.myForEach = function myForEach(callback,context){ 
    context = context || window; 
    if('forEach' in Array.prototye) { 
        this.forEach(callback,context); 
        return; 
    } 
    //IE6-8下自己編寫回調函數執行的邏輯 
    for(var i = 0,len = this.length; i < len;i++) { 
        callback && callback.call(context,this[i],i,this); 
    } 

 

/**
* map遍歷數組
* @param callback [function] 回調函數;
* @param context [object] 上下文;
*/ 
Array.prototype.myMap = function myMap(callback,context){ 
    context = context || window; 
    if('map' in Array.prototye) { 
        return this.map(callback,context); 
    } 
    //IE6-8下自己編寫回調函數執行的邏輯 
    var newAry = []; 
    for(var i = 0,len = this.length; i < len;i++) { 
        if(typeof  callback === 'function') { 
            var val = callback.call(context,this[i],i,this); 
            newAry[newAry.length] = val; 
        } 
    } 
    return newAry; 



二、jQuery $.each()和$.map()遍歷

共同點:

即可遍歷數組,又可遍歷對象。



1.$.each()

沒有返回值。$.each()里面的匿名函數支持2個參數:當前項的索引i,數組中的當前項v。如果遍歷的是對象,k 是鍵,v 是值。

$.each(arr, function(index,value){

  //do something

})

參數:arr要遍歷的數組,index當前項的索引,value數組中的當前項
第1個和第2個參數正好和以上兩個函數是相反的,注意不要記錯了

$.each( ["a","b","c"], function(i, v){ 
     alert( i + ": " + v ); 
}); 
[JavaScript] view plain copy

$("span").each(function(i, v){ 
     alert( i + ": " + v ); 
}); 

 

$.each( { name: "John", lang: "JS" }, function(k, v){ 
     alert( "Name: " + k + ", Value: " + v ); 
}); 



2.$.map()

有返回值,可以return 出來。$.map()里面的匿名函數支持2個參數和$.each()里的參數位置相反:數組中的當前項v,當前項的索引 i。如果遍歷的是對象,k 是鍵,v 是值。如果是$("span").map()形式,參數順序和$.each()  $("span").each()一樣。

$.map(arr, function(value, index){

  //do something

  return XXX

})

 

var arr=$.map( [0,1,2], function(v){ 
     return v + 4; 
}); 
console.log(arr); 

 

$.map({"name":"Jim","age":17},function(k, v){ 
     console.log( k+":"+v ); 
}); 

 


如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (496人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 韩国理论片在线观看片免费| 不卡无码人妻一区三区| 99热精品久久只有精品| gogo全球专业大尺度高清人体| 亚洲成av人在线视达达兔| gogo亞洲人体| 美女视频免费高清视频| 国产第|页草草影院| 精品无码av人妻受辱| 丰满肥胖的日本肥婆| 玩弄放荡人妇系列短篇| videodesexo俄罗斯极品| 国产精品国产三级国产av| 男主养成女主从小肉辣文| 总裁一边下楼梯一遍做| 欲求不满的哺乳期人妻| 亚洲东京热无码av一区| mm1313好大我受不了了| 窝窝影院午夜看片| 午夜男欢女爱免费视频| 黄在线看片免费人成视频| 特级欧美aaaaaa片| 亚洲国产在线精品国自产拍影院| 手机av看片永久免费看片| 国产女人高潮抽搐视频360| 看大片人与拘牲交| 年轻的母亲在线观看| 2020精品国产自在现线官网| 欧美亚洲色偷另类图片欧美| 野花视频在线观看最新| 老师好棒再大点| http://www.blackhistoryportraits.com