生活随笔
收集整理的這篇文章主要介紹了
原生JS forEach()和map()遍历的区别以及兼容写法
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一、原生JS?forEach()和map()遍歷
共同點(diǎn)：
? ? 1.都是循環(huán)遍歷數(shù)組中的每一項(xiàng)。
? ? 2.forEach() 和 map() 里面每一次執(zhí)行匿名函數(shù)都支持3個(gè)參數(shù)：數(shù)組中的當(dāng)前項(xiàng)item,當(dāng)前項(xiàng)的索引index,原始數(shù)組input。
? ? 3.匿名函數(shù)中的this都是指Window。
? ? 4.只能遍歷數(shù)組。
1.forEach()
???沒(méi)有返回值。
arr[].forEach(function(value,index,array){
//do something
})
- 參數(shù)：value數(shù)組中的當(dāng)前項(xiàng), index當(dāng)前項(xiàng)的索引, array原始數(shù)組；
- 數(shù)組中有幾項(xiàng)，那么傳遞進(jìn)去的匿名回調(diào)函數(shù)就需要執(zhí)行幾次；
- 理論上這個(gè)方法是沒(méi)有返回值的，僅僅是遍歷數(shù)組中的每一項(xiàng)，不對(duì)原來(lái)數(shù)組進(jìn)行修改；但是可以自己通過(guò)數(shù)組的索引來(lái)修改原來(lái)的數(shù)組；
[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);//--> 通過(guò)數(shù)組索引改變了原數(shù)組；??
2.map()?
有返回值，可以return 出來(lái)。
arr[].map(function(value,index,array){
//do something
return XXX
})
- 參數(shù)：value數(shù)組中的當(dāng)前項(xiàng),index當(dāng)前項(xiàng)的索引,array原始數(shù)組；
- 區(qū)別：map的回調(diào)函數(shù)中支持return返回值；return的是啥，相當(dāng)于把數(shù)組中的這一項(xiàng)變?yōu)樯?#xff08;并不影響原來(lái)的數(shù)組，只是相當(dāng)于把原數(shù)組克隆一份，把克隆的這一份的數(shù)組中的對(duì)應(yīng)項(xiàng)改變了）；
[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];??原數(shù)組拷貝了一份，并進(jìn)行了修改console.log(ary);//-->[12,23,24,42,1]；??原數(shù)組并未發(fā)生變化
兼容寫(xiě)法：
?
不管是forEach還是map在IE6-8下都不兼容（不兼容的情況下在Array.prototype上沒(méi)有這兩個(gè)方法）,那么需要我們自己封裝一個(gè)都兼容的方法，代碼如下：
[javascript]?view plain?copy
?
/**?*?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);??????}??}??
?
[javascript]?view plain?copy
?
/**?*?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;??} ?
《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專(zhuān)家共同創(chuàng)作，文字、視頻、音頻交互閱讀
總結(jié)
以上是生活随笔為你收集整理的原生JS forEach()和map()遍历的区别以及兼容写法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
