JavaScript中的數組遍歷forEach()與map()方法以及兼容寫法

  • 高級瀏覽器支持forEach方法
  • 語法:forEach和map都支持2個參數:一個是回調函數(item,index,list)和上下文矾湃;
  • forEach:用來遍歷數組中的每一項;這個方法執(zhí)行是沒有返回值的猜绣,對原來數組也沒有影響秩贰;
    數組中有幾項霹俺,那么傳遞進去的匿名回調函數就需要執(zhí)行幾次;
  • 每一次執(zhí)行匿名函數的時候毒费,還給其傳遞了三個參數值:數組中的當前項item,當前項的索引index,原始數組input丙唧;
  • 理論上這個方法是沒有返回值的,僅僅是遍歷數組中的每一項觅玻,不對原來數組進行修改想际;但是我們可以自己通過數組的索引來修改原來的數組;
  • forEach方法中的this是ary,匿名回調函數中的this默認是window溪厘;
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);//-->會對原來的數組產生改變胡本;
  • map:和forEach非常相似,都是用來遍歷數組中的每一項值的畸悬,用來遍歷數組中的每一項侧甫;
  • 區(qū)別:map的回調函數中支持return返回值;return的是啥蹋宦,相當于把數組中的這一項變?yōu)樯叮ú⒉挥绊懺瓉淼臄到M披粟,只是相當于把原數組克隆一份,把克隆的這一份的數組中的對應項改變了)冷冗;
  • 不管是forEach還是map 都支持第二個參數值守屉,第二個參數的意思是把匿名回調函數中的this進行修改。
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下自己編寫回調函數執(zhí)行的邏輯
    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下自己編寫回調函數執(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;
}


希望可以給大家?guī)韼椭?/p>

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末习瑰,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子秽荤,更是在濱河造成了極大的恐慌甜奄,老刑警劉巖柠横,帶你破解...
    沈念sama閱讀 211,639評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異课兄,居然都是意外死亡牍氛,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 90,277評論 3 385
  • 文/潘曉璐 我一進店門烟阐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來搬俊,“玉大人,你說我怎么就攤上這事蜒茄“蓿” “怎么了?”我有些...
    開封第一講書人閱讀 157,221評論 0 348
  • 文/不壞的土叔 我叫張陵檀葛,是天一觀的道長玩祟。 經常有香客問我,道長屿聋,這世上最難降的妖魔是什么空扎? 我笑而不...
    開封第一講書人閱讀 56,474評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮润讥,結果婚禮上转锈,老公的妹妹穿的比我還像新娘。我一直安慰自己楚殿,他們只是感情好撮慨,可當我...
    茶點故事閱讀 65,570評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著勒魔,像睡著了一般甫煞。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上冠绢,一...
    開封第一講書人閱讀 49,816評論 1 290
  • 那天抚吠,我揣著相機與錄音,去河邊找鬼弟胀。 笑死楷力,一個胖子當著我的面吹牛,可吹牛的內容都是我干的孵户。 我是一名探鬼主播萧朝,決...
    沈念sama閱讀 38,957評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼夏哭!你這毒婦竟也來了检柬?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,718評論 0 266
  • 序言:老撾萬榮一對情侶失蹤竖配,失蹤者是張志新(化名)和其女友劉穎何址,沒想到半個月后里逆,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 44,176評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡用爪,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,511評論 2 327
  • 正文 我和宋清朗相戀三年原押,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片偎血。...
    茶點故事閱讀 38,646評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡诸衔,死狀恐怖,靈堂內的尸體忽然破棺而出颇玷,到底是詐尸還是另有隱情笨农,我是刑警寧澤,帶...
    沈念sama閱讀 34,322評論 4 330
  • 正文 年R本政府宣布亚隙,位于F島的核電站磁餐,受9級特大地震影響,放射性物質發(fā)生泄漏阿弃。R本人自食惡果不足惜诊霹,卻給世界環(huán)境...
    茶點故事閱讀 39,934評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望渣淳。 院中可真熱鬧脾还,春花似錦、人聲如沸入愧。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽棺蛛。三九已至怔蚌,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間旁赊,已是汗流浹背桦踊。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留终畅,地道東北人籍胯。 一個月前我還...
    沈念sama閱讀 46,358評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像离福,于是被迫代替她去往敵國和親杖狼。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,514評論 2 348

推薦閱讀更多精彩內容