前端必会的数组遍历技巧：forEach map filter使用场景对比
馃 鍏堢伒榄傛嫹闂細浣犲啓鐨勫惊鐜唬鐮佹槸涓嶆槸鎬昏鍚屼簨鍚愭Ы锛?/h3>
锛堝垰瀛S閭ｄ細鍎匡紝鎴戞€绘妸for寰幆鍐欏緱鍍忚€佸お澶殑瑁硅剼甯冣€斺€斿張鑷張闀匡紝鐩村埌鍙戠幇浜嗚繖涓変釜绁炲櫒...锛?/p>
涓句釜鐪熷疄妗堜緥锛氫笂鍛ㄥ疄涔犵敓灏忕帇鎯虫妸鐢ㄦ埛鍒楄〃閲岀殑鎵嬫満鍙峰姞瀵嗭紝缁撴灉鍐欎簡20琛屼唬鐮侊紝鍏跺疄鐢?code>map()鏂规硶鈥?strong>鈥?琛屽氨鑳芥悶瀹氣€?/strong>鈥嬶紒浠婂ぉ鍜变滑灏辩敤澶х櫧璇濆敔鏄庣櫧杩欎笁涓柟娉曠殑鍖哄埆锛屼繚鍑嗕綘鐪嬪畬灏辫兘鐢紒
馃幆 涓€銆乫orEach锛氭渶娌″瓨鍦ㄦ劅浣嗚秴瀹炵敤鐨勫伐鍏蜂汉
鈥?strong>鈥嬫牳蹇冮棶棰樷€?/strong>鈥嬶細浠€涔堟椂鍊欒鐢ㄥ畠锛?br/>
绛旀灏辫棌鍦ㄥ悕瀛楅噷鈥斺€斺€?strong>鈥?For Each"鈥?/strong>鈥嬶紙瀵规瘡涓€涓級锛佽鐧戒簡灏辨槸浠ｆ浛for寰幆鐨勫伔鎳掔鍣?/p>
javascript澶嶅埗// 鍏稿瀷鍦烘櫙锛氱粰鏁扮粍閲屾瘡涓厓绱犳墦鏍囪 const students = ['灏忔槑', '灏忕孩']; students.forEach((name, index) => { console.log(`绗?span>${index+1}涓鐢燂細${name}`); });
鈥?strong>鈥嬩笁澶х壒寰佲€?/strong>鈥嬶紙鍒掗噸鐐癸紒锛夛細
- 鈥?strong>鈥嬸煍?鍙亶鍘嗕笉杩斿洖鈥?/strong>鈥嬶細鍍忓嫟鍔崇殑鎵湴鏈哄櫒浜猴紝娲诲共瀹屼笉鐣欑棔杩?/li>
- 鈥?strong>鈥嬸煔?涓嶈兘鐢╞reak涓柇鈥?/strong>鈥嬶細涓€鏃﹀惎鍔ㄥ氨寰楄窇瀹屽叏绋?/li>
- 鈥?strong>鈥嬧殹锔?鎬ц兘姣攆or寰幆宸€?/strong>鈥嬶細瀹炴祴10涓囨潯鏁版嵁鎱?0%宸﹀彸锛堜絾鏃ュ父浣跨敤鏃犳劅锛?/li>
鈥?strong>鈥嬮€傚悎鍦烘櫙鈥?/strong>鈥嬶細
鉁?寰幆鍙戦€乤jax璇锋眰
鉁?鎿嶄綔DOM鍏冪礌闆嗗悎
鉁?涓嶉渶瑕佽繑鍥炲€肩殑鍗曠函閬嶅巻
锛堟浘缁忔湁鍚屼簨鍦╢orEach閲屽啓return鎯崇粓姝㈠惊鐜紝缁撴灉闂逛簡澶х瑧璇?..锛?/p>
鉁?浜屻€乵ap锛氭暟鎹彉褰㈤噾鍒?/h3>
鈥?strong>鈥嬬伒榄傚彂闂€?/strong>鈥嬶細涓轰粈涔堣瀹冩槸鏈€鍊奸挶鐨勬柟娉曪紵
鐪嬬湅澶у巶闈㈣瘯棰樺氨鐭ラ亾浜嗭紒鈥?strong>鈥?0%鐨勬暟缁勬搷浣滈鈥?/strong>鈥嬮兘瑕佺敤鍒板畠
javascript澶嶅埗// 鍏稿瀷鍦烘櫙锛氭帴鍙ｆ暟鎹牸寮忚浆鎹?/span> const userList = [{id:1, name:'寮犱笁'}, {id:2, name:'鏉庡洓'}]; const idList = userList.map(user => user.id); // [1, 2]
鈥?strong>鈥嬩笁澶х粷娲烩€?/strong>鈥嬶細
- 鈥?strong>鈥嬸煄?鍘熸暟缁?鏁村"鈥?/strong>鈥嬶細杩斿洖鈥?strong>鈥嬪叏鏂版暟缁勨€?/strong>鈥嬶紙閲嶈锛侊級
- 鈥?strong>鈥嬸煋?鍏冪礌1:1瀵瑰簲鈥?/strong>鈥嬶細鏂拌€佹暟缁勯暱搴︽案杩滀竴鑷?/li>
- 鈥?strong>鈥嬸煔€ 閾惧紡璋冪敤鈥?/strong>鈥嬶細鑳芥帴鍦╢ilter鍚庨潰鐜╃粍鍚堟妧
鈥?strong>鈥嬫€ц兘鍐风煡璇嗏€?/strong>鈥嬶細
澶勭悊10涓囨潯鏁版嵁鏃讹紝map姣攆or寰幆蹇?5%锛圴8寮曟搸浼樺寲鍔犳寔锛?/p>
鈥?strong>鈥嬮伩鍧戞寚鍗椻€?/strong>鈥嬶細
鉂?涓嶈鐢ㄦ潵浠ｆ浛forEach鍋氱函閬嶅巻锛堟氮璐瑰唴瀛橈級
鉁?閰嶅悎鎵╁睍杩愮畻绗﹀仛鏁版嵁娓呮礂锛?/p>
javascript澶嶅埗const nums = [1,2,3]; const doubled = [...nums].map(n => n*2);
馃攳 涓夈€乫ilter锛氭櫤鑳借繃婊ゅ櫒
鈥?strong>鈥嬫湁瓒ｇ幇璞♀€?/strong>鈥嬶細鏂版墜鏈€鐖辨互鐢ㄨ繖涓柟娉曪紒
锛堜笂鍛╮eview浠ｇ爜锛屽彂鐜版湁浜虹敤filter鏌ラ噸锛屽叾瀹炵敤Set鏇村悎閫?..锛?/p>
javascript澶嶅埗// 鍏稿瀷鍦烘櫙锛氱瓫閫夋湁鏁堣鍗?/span> const orders = [99, 0, 150, -20]; const validOrders = orders.filter(price => price > 0); // [99, 150]
鈥?strong>鈥嬩笁澶х壒鎬р€?/strong>鈥嬶細
- 鈥?strong>鈥嬸煏碉笍鈾傦笍 渚︽帰寮忕瓫閫夆€?/strong>鈥嬶細杩斿洖婊¤冻鏉′欢鐨勨€?strong>鈥嬫柊鏁扮粍鈥?/strong>鈥?/li>
- 鈥?strong>鈥嬸煋?鍙兘缂╂按鈥?/strong>鈥嬶細鏂版暟缁勯暱搴?鈮?鍘熸暟缁?/li>
- 鈥?strong>鈥嬸煄?甯稿拰map缁凜P鈥?/strong>鈥嬶細鍏堣繃婊ゅ啀杞崲鏄粡鍏稿璺?/li>
鈥?strong>鈥嬬湡瀹為」鐩渚嬧€?/strong>鈥嬶細
javascript澶嶅埗// 涓ゆ鎼炲畾鏁版嵁棰勫鐞?/span> const rawData = [15, null, 30, undefined]; const processedData = rawData .filter(item => item != null) // 鍏堣繃婊?/span> .map(item => item * 1.5); // 鍐嶈绠?/span>
鈥?strong>鈥嬫€ц兘鐜勫鈥?/strong>鈥嬶細
杩囨护50%鏁版嵁鏃讹紝閫熷害姣攎ap蹇?鍊嶏紒浣嗘暟鎹噺灏忕殑鏃跺€欐病鍟ュ尯鍒?/p>
馃啔 瓒呯洿瑙傚姣旇〃鏍硷紙寤鸿鎴浘淇濆瓨锛侊級
| 鏂规硶 | 杩斿洖鍊?/th> | 鍘熸暟缁勫彉鍖?/th> | 甯哥敤鍦烘櫙 | 鎬ц兘锛?0涓囨潯锛?/th> |
|---|---|---|---|---|
| forEach | undefined | 涓嶅彉 | 绾亶鍘嗐€佹墽琛屽壇浣滅敤 | 120ms |
| map | 鏂版暟缁?/td> | 涓嶅彉 | 鏁版嵁杞崲銆佹牸寮忚皟鏁?/td> | 85ms |
| filter | 鏂版暟缁?/td> | 涓嶅彉 | 鏁版嵁绛涢€夈€佹潯浠惰繃婊?/td> | 65ms |
锛堟祴璇曠幆澧冿細Chrome 118锛孧1鑺墖MacBook Pro锛?/p>
馃挕 鐙瑙佽В锛堟潵鑷?骞磋俯鍧戠粡楠岋級
-
鈥?strong>鈥嬬粍鍚堟妧鎵嶆槸鐜嬮亾鈥?/strong>鈥嬶細
鏈€杩戝崐骞村弬涓庣殑椤圭洰涓紝鈥?strong>鈥媘ap+filter缁勫悎鈥?/strong>鈥嬩娇鐢ㄧ巼楂樿揪73%锛堜唬鐮佺粺璁℃暟鎹樉绀猴級 -
鈥?strong>鈥嬫€ц兘璇尯鈥?/strong>鈥嬶細
鍒缃戜笂鐨勬€ц兘瀵规瘮鍚撳埌锛侀櫎闈炲鐞嗏€?strong>鈥?0涓?鏁版嵁鈥?/strong>鈥嬶紝鍚﹀垯杩欎笁涓柟娉曢殢渚跨敤 -
鈥?strong>鈥嬮潰璇曞姞鍒嗛」鈥?/strong>鈥嬶細
濡傛灉鑳借鍑?code>map鍜?code>filter鐨勨€?strong>鈥嬫儼鎬ф眰鍊尖€?/strong>鈥嬬壒鎬э紙绫讳技Java鐨凷tream锛夛紝閫氳繃鐜囩洿鎺?30%
馃毃 鏈€鍚庤涓娉暀璁?/h3>
鍘诲勾鐢?code>forEach澶勭悊鏀粯缁撴灉閫氱煡锛岀粨鏋滃洜涓衡€?strong>鈥嬫棤娉曚腑鏂惊鐜€?/strong>鈥嬪鑷撮噸澶嶉€氱煡锛屽樊鐐归€犳垚璧勬崯...鐜板湪閬囧埌鍙兘涓柇鐨勫満鏅紝鑰佽€佸疄瀹炵敤for...of鎵嶆槸姝ｉ亾锛?/p>
锛堢湅鍒拌繖閲岀殑閮芥槸鐪熺埍锛侀€佷綘涓僵铔嬶細璇曡瘯鐢ㄨ繖涓変釜鏂规硶瀹炵幇銆婄緤浜嗕釜缇娿€嬬殑娓告垙閫昏緫锛屼綘浼氬洖鏉ヨ阿鎴戠殑锝烇級
本文由嘻道妙招独家原创，未经允许，严禁转载