前端开发必备:JS数组遍历的最佳实践指南,h1的标签闭合
鈥?strong>鈥嬩负浠€涔堝埆浜虹殑浠g爜鍐欏緱鍙堝揩鍙堝ソ锛屼綘鐨勬暟缁勯亶鍘嗗嵈鎬绘槸鍗¢】锛熲€?/strong>鈥?br/> 鍜变滑鏂版墜鏈€瀹规槗韪╃殑鍧戝氨鏄細鈥?strong>鈥嬫妸鏁扮粍閬嶅巻褰撴祦姘磋处鍐欌€?/strong>鈥嬨€傛槰澶╂湁涓鍛橀棶鎴戯細"涓轰粈涔堢敤map澶勭悊100鏉℃暟鎹〉闈㈠氨鍗★紵" 缁撴灉涓€鐪嬩唬鐮佲€斺€斾粬鍦╩ap鍥炶皟閲屽啓浜嗕笁涓祵濂楀惊鐜紒浠婂ぉ鍜变滑灏卞敔閫忚繖浠朵簨锛屼繚鍑嗕綘鍚畬鐩存媿澶ц吙锛?鍘熸潵鏁扮粍閬嶅巻杩樿兘杩欎箞鐜╋紒"
涓€銆侀€夊宸ュ叿寰堥噸瑕侊細5鎶婇挜鍖欏紑5鎶婇攣
鈥?strong>鈥嬬伒榄傛嫹闂細浠€涔堟椂鍊欒鐢╢or寰幆锛熶粈涔堟椂鍊欒鐢╩ap锛熲€?/strong>鈥?br/> 杩欏氨濂芥瘮鐐掕彍锛屼綘鐢ㄦ堡鍕虹倰鑿滃拰鐢ㄧ倰鍕虹洓姹ら兘涓嶅璺瓙銆傚挶浠洿鎺ヤ笂瀵规瘮琛細
鍦烘櫙 | 鎺ㄨ崘鏂规硶 | 涓句釜鏍楀瓙 |
---|---|---|
瑕佷腑閫斿枈鍋?/td> | for寰幆 | 鎵惧埌鐩爣灏眀reak |
鍙鎵ц鎿嶄綔涓嶈缁撴灉 | forEach | 鎵归噺淇敼DOM鑺傜偣 |
瑕佺敓鎴愭柊鏁扮粍 | map | 鎶婁环鏍煎垪琛ㄨ浆鎴愭姌鎵d环 |
闇€瑕佺粺璁℃€绘暟 | reduce | 璁$畻璐墿杞︽€婚噾棰?/td> |
瑕佸鐞嗙壒娈婃暟鎹粨鏋?/td> | for...of | 閬嶅巻Set闆嗗悎鎴栧瓧绗︿覆 |
鈥?strong>鈥嬮噸鐐规潵浜嗏€?/strong>鈥嬶細寰堝鏂版墜鍠滄鏃犺剳鐢╢orEach锛岀粨鏋滈亣鍒伴渶瑕佹彁鍓嶉€€鍑虹殑鍦烘櫙鐩存帴鎶撶瀻銆備綘鍝侊紝浣犵粏鍝侊細鈥?strong>鈥嬪綋浣犺鍦ㄩ亶鍘嗘椂鍋氬鏉傛搷浣滐紝for寰幆鎵嶆槸浣犵殑閾佸摜浠€?/strong>鈥嬨€?/p>
浜屻€佹€ц兘鐜勫澶ф彮绉橈細杩欎簺鎿嶄綔璁╀綘鐨勪唬鐮佹參10鍊?/h3>
涓婂懆甯悓浜嬩紭鍖栦唬鐮侊紝鍙戠幇涓吀鍨嬮敊璇渚嬧€斺€斿湪map閲屾嫾鎺ュ瓧绗︿覆锛?/p>
javascript澶嶅埗// 閿欒绀鸿寖 鉂?/span> const result = data.map(item => { let str = "" for(let key in item){ str += `${key}:${item[key]},` } return str })
鈥?strong>鈥嬮棶棰樺嚭鍦ㄥ摢锛熲€?/strong>鈥?姣忔寰幆閮藉垱寤烘柊瀛楃涓诧紝10涓囨潯鏁版嵁鐩存帴鍗℃垚PPT銆備紭鍖栨柟妗堢畝鍗曞埌鍝細
javascript澶嶅埗// 姝g‘濮垮娍 鉁?/span> const result = [] for(let i=0; i
length; i++){ const item = data[i] let str = [] for(let key in item){ str.push(`${key}:${item[key]}`) } result.push(str.join(',')) }
鈥?strong>鈥嬭繖娉㈡搷浣滅寷鍦ㄥ摢鈥?/strong>鈥嬶細鐢ㄦ暟缁刾ush浠f浛瀛楃涓叉嫾鎺ワ紝鎬ц兘鎻愬崌20鍊嶄笉澶稿紶锛佽浣忚繖涓湡鐞嗭細鈥?strong>鈥嬪湪寰幆閲屽垱寤哄彉閲忕瓑浜庢參鎬ц嚜鏉€鈥?/strong>鈥嬨€?/p>
涓夈€佹柊鎵嬪繀瀛︾殑涓夋澘鏂э細3涓繚鍛芥妧宸?/h3>
鈥?strong>鈥嬬涓€鎷涳細鎶婂鏉傛搷浣滃叧杩涘皬榛戝眿鈥?/strong>鈥?br/> 鍒湪閬嶅巻閲屽啓澶ф閫昏緫锛屽氨鍍忎綘涓嶄細鍦ㄧ倰鑿滄椂鐜扮(鍒€銆傜湅杩欎釜鍙嶉潰鏁欐潗锛?/p>
javascript澶嶅埗// 鑿滈笩鍐欐硶 馃惁 users.forEach(user => { const discount = user.vip ? 0.8 : 1 const tax = user.region === 'US' ? 1.1 : 1 const finalPrice = (user.basePrice * discount * tax).toFixed(2) // 鍚庨潰杩樻湁10琛孌OM鎿嶄綔... })
鈥?strong>鈥嬮珮鎵嬫€庝箞鐮粹€?/strong>鈥嬶紵鎶婅绠楅€昏緫鎶芥垚鍑芥暟锛?/p>
javascript澶嶅埗// 鑰佸徃鏈哄啓娉?馃殫 function calculatePrice(user) { // 浠锋牸璁$畻閫昏緫闆嗕腑澶勭悊 } users.forEach(user => { const finalPrice = calculatePrice(user) // 鍙暀蹇呰鎿嶄綔 })
鈥?strong>鈥嬬浜屾嫑锛氬杽鐢ㄧ煭璺搷浣溾€?/strong>鈥?br/> 褰撲綘瑕佹壘鏁扮粍閲岀涓€涓鍚堟潯浠剁殑鍐呭鏃讹紝鍒啀鍌讳箮涔庨亶鍘嗗埌搴曪細
javascript澶嶅埗// 绗ㄥ姙娉?馃槬 let target = null for(const item of arr){ if(item.score > 90){ target = item break } } // 绁炰粰鍐欐硶 馃 const target = arr.find(item => item.score > 90)
鈥?strong>鈥嬬涓夋嫑锛氭嫆缁濆祵濂楀湴鐙扁€?/strong>鈥?br/> 鐪嬪埌涓夊眰浠ヤ笂鐨勫惊鐜祵濂楋紝灏辫鎺忓嚭浣犵殑鐟炲+鍐涘垁鈥斺€旀暟缁勬柟娉曠粍鍚堟妧锛?/p>
javascript澶嶅埗// 涓夊眰宓屽鐪嬪緱澶存檿 馃樀 const result = [] products.forEach(category => { category.items.forEach(product => { product.skus.forEach(sku => { if(sku.stock > 0) result.push(sku) }) }) }) // 闄嶇淮鎵撳嚮鐗堟湰 馃挜 const result = products .flatMap(category => category.items) .flatMap(product => product.skus) .filter(sku => sku.stock > 0)
鍥涖€佹潵鑷垬鍦虹殑琛€娉暀璁細杩欎簺鍧戞垜鏇夸綘韪╄繃浜?/h3>
鍘诲勾鍋氱數鍟嗛」鐩椂锛屽洜涓轰竴涓猺educe鐨勯敊璇娇鐢ㄥ樊鐐硅儗閿呫€傚綋鏃舵兂瑕佺粺璁$敤鎴风敾鍍忥細
javascript澶嶅埗// 閿欒绀鸿寖 馃毇 const userStats = users.reduce((acc, user) => { acc[user.age]++ // 鏈垵濮嬪寲鏃禢aN璀﹀憡锛?/span> return acc }, {})
鈥?strong>鈥嬭嚧鍛戒激鍦ㄥ摢鈥?/strong>鈥嬶紵褰撴煇涓勾榫勯娆″嚭鐜版椂锛宎cc[user.age]鏄痷ndefined锛岀洿鎺?+灏卞彉鎴怤aN銆傛纭Э鍔垮簲璇ヨ繖鏍凤細
javascript澶嶅埗// 绋冲Ε鏂规 鉁?/span> const userStats = users.reduce((acc, user) => { acc[user.age] = (acc[user.age] || 0) + 1 return acc }, {})
鈥?strong>鈥嬭娉粡楠屸€?/strong>鈥嬶細鈥?strong>鈥嬫案杩滆缁欑疮鍔犲櫒璁惧垵濮嬪€尖€?/strong>鈥嬶紝灏卞儚浣犱笂鍘曟墍瑕佸甫绾镐竴鏍烽噸瑕併€?/p>
浜斻€佷釜浜虹钘忕绫嶏細杩欐牱鍐欎唬鐮乺eview鏃朵細琚じ
鏈€杩戝彂鐜扮殑瀹濊棌鍐欐硶锛氱敤for...of鏇夸唬浼犵粺for寰幆锛屾棦淇濇寔鎬ц兘鍙堟彁鍗囧彲璇绘€э細
javascript澶嶅埗// 浼犵粺鍐欐硶 馃摐 for(let i=0; i
length; i++){ const item = arr[i] if(item === 'STOP') break // 涓氬姟閫昏緫 } // 鏂版淳鍐欐硶 馃啎 for(const item of arr){ if(item === 'STOP') break // 涓氬姟閫昏緫 }
鈥?strong>鈥嬪鍦ㄥ摢閲屸€?/strong>鈥嬶紵涓嶇敤缁存姢绱㈠紩鍙橀噺锛屼唬鐮侀噺鍑忓皯30%銆備絾瑕佹敞鎰忥細鈥?strong>鈥嬮渶瑕佺储寮曟椂灏辫€佽€佸疄瀹炵敤浼犵粺for寰幆鈥?/strong>鈥嬶紝鍒‖瑁匵銆?/p>
鏈€鍚庤鍙ユ帍蹇冪獫鐨勮瘽锛氬埆琚悇绉嶉珮闃舵柟娉曟檭鑺变簡鐪硷紝鈥?strong>鈥嬭兘鐢╢or寰幆瑙e喅鐨勯棶棰樺氨涓嶈鐐妧鈥?/strong>鈥嬨€傚氨鍍忓仛楗紝绫冲叾鏋楀ぇ鍘ㄤ篃浼氱敤閾侀攨鐐掕彍锛屽叧閿槸鐏€欐帉鎻°€備笅娆″啓閬嶅巻鍓嶅厛鐏甸瓊涓夐棶锛氳缁撴灉鍚楋紵瑕佷腑鏂悧锛熻鎬ц兘鍚楋紵杩欎笁涓棶棰樼瓟鏄庣櫧浜嗭紝浣犵殑浠g爜灏辩楂樻墜涓嶈繙浜嗭紒
本文由嘻道妙招独家原创,未经允许,严禁转载