當前位置:編程學習大全網 - 源碼下載 - 原生JS forEach和map遍歷的區別以及兼容寫法

原生JS forEach和map遍歷的區別以及兼容寫法

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

***同點:

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

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

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

4.只能遍歷數組。

1.forEach()

沒有返回值。

[javascript] view plain copy

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 出來。

[javascript] view plain copy

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上沒有這兩個方法),那麽需要我們自己封裝壹個都兼容的方法,代碼如下:

[javascript] view plain copy

/**

* 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);

}

}

[javascript] view plain copy

/**

* 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;

}

  • 上一篇:店鋪淘完之後新劇的分銷模式怎麽操作?
  • 下一篇:歌頌祖國的春聯
  • copyright 2024編程學習大全網