欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生JS forEach()和map()遍歷的區(qū)別、兼容寫(xiě)法及jQuery $.each、$.map遍歷操作

 更新時(shí)間：2019年02月27日 10:35:19   作者：huangpb0624  
這篇文章主要介紹了原生JS forEach()和map()遍歷的區(qū)別、兼容寫(xiě)法及jQuery $.each、$.map遍歷操作,結(jié)合實(shí)例形式分析了JS使用forEach()和map()以及jQuery使用$.each、$.map進(jìn)行遍歷操作相關(guān)技巧與操作注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了原生JS forEach()和map()遍歷的區(qū)別、兼容寫(xiě)法及jQuery $.each、$.map遍歷操作。分享給大家供大家參考，具體如下：

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

共同點(diǎn)：

①.都是循環(huán)遍歷數(shù)組中的每一項(xiàng)。

②.forEach() 和 map() 里面每一次執(zhí)行匿名函數(shù)都支持3個(gè)參數(shù)：數(shù)組中的當(dāng)前項(xiàng)item,當(dāng)前項(xiàng)的索引index,原始數(shù)組input。

③.匿名函數(shù)中的this都是指Window。

④.只能遍歷數(shù)組。

1.forEach()

沒(méi)有返回值。

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);//-->會(huì)對(duì)原來(lái)的數(shù)組產(chǎn)生改變

2.map()

有返回值，可以return 出來(lái)。

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]

兼容寫(xiě)法：

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

/**
* forEach遍歷數(shù)組
* @param callback [function] 回調(diào)函數(shù)；
* @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下自己編寫(xiě)回調(diào)函數(shù)執(zhí)行的邏輯
  for(var i = 0,len = this.length; i < len;i++) {
    callback && callback.call(context,this[i],i,this);
  }
}


/**
* map遍歷數(shù)組
* @param callback [function] 回調(diào)函數(shù)；
* @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下自己編寫(xiě)回調(diào)函數(shù)執(zhí)行的邏輯
  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()遍歷

共同點(diǎn)：

即可遍歷數(shù)組，又可遍歷對(duì)象。

1.$.each()

沒(méi)有返回值。$.each()里面的匿名函數(shù)支持2個(gè)參數(shù)：當(dāng)前項(xiàng)的索引i，數(shù)組中的當(dāng)前項(xiàng)n。如果遍歷的是對(duì)象，k 是鍵，n 是值。

$.each( ["a","b","c"], function(i, n){
   alert( i + ": " + n );
});


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


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

2.$.map()

有返回值，可以return 出來(lái)。$.map()里面的匿名函數(shù)支持2個(gè)參數(shù)和$.each()里的參數(shù)位置相反：數(shù)組中的當(dāng)前項(xiàng)n，當(dāng)前項(xiàng)的索引i。如果遍歷的是對(duì)象，i 是值，n 是鍵。如果是$("span").map()形式，參數(shù)順序和$.each()  $("span").each()一樣。

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


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

感興趣的朋友可以使用在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

PS：這里再為大家推薦一款JS數(shù)組遍歷方式分析對(duì)比工具供大家參考：

在線(xiàn)JS常見(jiàn)遍歷方式性能分析比較工具：http://tools.jb51.net/aideddesign/js_bianli

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論