1. 主页 > 好文章

前端开发必备: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; ilength; 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; ilength; 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爜灏辩楂樻墜涓嶈繙浜嗭紒

本文由嘻道妙招独家原创,未经允许,严禁转载