1. 主页 > 小妙招

前端开发必备的数组处理技巧:7个JS方法实战案例精讲


鍝庯紝鍒氬鍓嶇閭d細鍎匡紝鎴戞€昏鏁扮粍鎶樿吘寰楄剳澹崇柤鈥斺€旀槑鏄庢兂鎵归噺澶勭悊鏁版嵁锛岀粨鏋滃啓鍑烘潵鐨勪唬鐮佸張闀垮張鎱紝杩樺鏄撳嚭bug锛佷粖澶╁挶浠氨鍞犲敔閭d簺鈥?strong>鈥嬬湡姝h兘鏁戝懡鐨勬暟缁勫鐞嗘柟娉曗€?/strong>鈥嬶紝淇濆噯浣犵湅瀹屽氨鑳界敤锛岀敤浜嗗氨瑙佹晥锛?/p>

锛堝厛鎶涗釜鐏甸瓊鎷烽棶锛氫綘杩樺湪鐢╢or寰幆浠庢棭鍐欏埌鏅氬悧锛燂級


涓€銆佹暟鎹お澶氭敼涓嶈繃鏉ワ紵map鏂规硶鏁欎綘"鎵归噺鍔犲伐"

涓句釜鏍楀瓙馃尠锛氬悗鍙扮粰浣?0涓敤鎴锋暟鎹紝浣嗗ご鍍忓瓧娈甸兘鏄┖瀛楃涓诧紝寰楄ˉ涓婇粯璁ゅ浘
鈥?strong>鈥嬩紶缁熷啓娉曗€?/strong>鈥嬶細

javascript澶嶅埗
const newUsers = [];
for(let i=0; ilength; i++) {
  newUsers.push({
    ...users[i],
    avatar: users[i].avatar || 'default.png'
  })
}

鈥?strong>鈥嬭繘鍖栫増鈥?/strong>鈥嬶細

javascript澶嶅埗
const newUsers = users.map(user => ({
  ...user,
  avatar: user.avatar || 'default.jpg' 
}))

浣犵湅锛宮ap灏卞儚涓祦姘寸嚎鏈哄櫒锛屸€?strong>鈥嬪師鏁扮粍杩涳紝鏂版暟缁勫嚭鈥?/strong>鈥嬶紝浠g爜閲忕洿鎺ョ爫鍗婏紒鎴戞暍鎵撹祵锛岀敤鎯箣鍚庝綘缁濆涓嶆兂鍐嶇for寰幆锛?/p>


浜屻€佹弧灞忔暟鎹溂鍙戞檿锛焒ilter绉掑彉"鏅鸿兘绛涘瓙"

鍓嶄袱澶╂湁涓€佸紵闂垜锛?鎬庝箞浠?00鏉″晢鍝侀噷蹇€熸壘鍑烘墦鎶樿揣锛?
鈥?strong>鈥嬫牳蹇冧唬鐮佲€?/strong>鈥嬶細

javascript澶嶅埗
// 绛涢€夋姌鎵eぇ浜?鎶樹笖搴撳瓨鍏呰冻鐨勫晢鍝?/span>
const hotGoods = products.filter(item => 
  item.discount <= 0.7 && item.stock > 50
)

鈥?strong>鈥嬮噸鐐规彁閱掆€?/strong>鈥嬶細

  • 鍒湪filter閲屼慨鏀规暟鎹紙閭f槸map鐨勬椿鍎匡級
  • 鍙互閾惧紡璋冪敤锛?code>products.filter(...).map(...)
    杩欐嫑鎴戞帴绉佹椿鏃跺父鐢紝瀹㈡埛閮借绛涢€夊搷搴旈€熷害鍍忓潗浜嗙伀绠煔€

涓夈€佹暟鎹粺璁℃墜蹇欒剼涔憋紵reduce鏄釜"涓囪兘璁$畻鍣?

鍒氬reduce鏃舵垜涔熸嚨閫尖€斺€旇繖鐜╂剰鍎垮拫杩欎箞鎶借薄锛熺洿鍒版湁娆¤鍋氶攢鍞姤琛?..
鈥?strong>鈥嬪疄鎴樻渚嬧€?/strong>鈥嬶細缁熻璁㈠崟鎬婚噾棰?鍒嗙被姹囨€?/p>

javascript澶嶅埗
const report = orders.reduce((acc, order) => {
  acc.total += order.price * order.count
  acc[order.category] = (acc[order.category] || 0) + 1
  return acc
}, { total: 0 })

鈥?strong>鈥嬫暡榛戞澘鈥?/strong>鈥嬶細

  • 绗竴涓弬鏁版槸"瀛樺偍鍣?
  • 涓€瀹氳return accumulator锛?br/> 鐜板湪鎴戝仛鏁版嵁鑱氬悎锛岄閫塺educe锛屾瘮鍐欎竴鍫嗕复鏃跺彉閲忔竻鐖藉浜嗭紒

鍥涖€佽〃鍗曢獙璇佸啓鍒板悙锛焥ome/every甯綘"鏅鸿兘鍒ゅ畼"

娉ㄥ唽椤佃鍚屾椂鏍¢獙5涓緭鍏ユ锛熻瘯璇曡繖涓細

javascript澶嶅埗
const isAllValid = [isEmailValid, isPwdValid, isCodeValid]
  .every(valid => valid === true)

// 鎴栬€呰嚦灏戞湁涓€涓敊璇椂鎻愮ず
const hasError = [emailError, pwdError, codeError]
  .some(error => error !== '')

杩欎咯鍏勫紵灏卞儚鑰冨満鐩戣€冿細

  • every锛氬叏鐝兘鍙婃牸鎵嶇畻閫氳繃
  • some锛氭湁涓€涓崳铔嬮灏辨媺璀︽姤
    涓婂懆鐢ㄨ繖鎷涢噸鏋勪簡椤圭洰鐨勬牎楠屾ā鍧楋紝浠g爜閲忕洿鎺ヤ粠200琛岀缉鍒?0琛岋紒

浜斻€佹煡鎵炬暟鎹儚澶ф捣鎹為拡锛焒ind缁欎綘"绮惧噯瀹氫綅"

鍚庡彴杩斿洖500鏉℃暟鎹壘鐗瑰畾ID锛熷埆鍐嶅惊鐜簡锛?/p>

javascript澶嶅埗
// 浼犵粺鍐欐硶
let target = null
for(let i=0; ilength; i++){
  if(data[i].id === 9527) {
    target = data[i]
    break
  }
}

// 寮€鎸傚啓娉?/span>
const target = data.find(item => item.id === 9527)

鈥?strong>鈥嬭娉暀璁€?/strong>鈥嬶細

  • 鎵惧埌绗竴涓尮閰嶉」灏卞仠姝㈡悳绱?/li>
  • 鎵句笉鍒拌繑鍥瀠ndefined锛堣寰楀仛鍏滃簳澶勭悊锛?br/> 涓婃鐢ㄨ繖涓柟娉曚紭鍖栦簡鍟嗗搧璇︽儏椤碉紝鍔犺浇閫熷害蹇簡3鍊嶄笉姝紒

鍏€佹暟缁勫悎骞舵墜鎶栧啓閿欙紵concat/spread鍙屼繚闄?/h3>

鏈夋鎴戝悎骞?涓暟缁勬椂鎵嬫粦鏀逛簡鍘熸暟鎹紝宸偣閰挎垚绾夸笂浜嬫晠...鐜板湪鑰佽€佸疄瀹炵敤锛?/p>

javascript澶嶅埗
// 瀹夊叏鍚堝苟锛堢敓鎴愭柊鏁扮粍锛?/span>
const allData = [...arr1, ...arr2, ...arr3]
// 鎴栬€?/span>
const allData = arr1.concat(arr2, arr3)

鈥?strong>鈥嬬壒鍒敞鎰忊€?/strong>鈥嬶細

  • spread璇硶锛?..锛夋洿鐩磋
  • 瓒呭ぇ鏁版嵁閲忕敤concat鎬ц兘鏇村ソ
    瀹炴祴10涓囩骇鏁版嵁鍚堝苟锛宑oncat姣攕pread蹇?5%宸﹀彸锛?/li>

涓冦€佷吉鏁扮粍鐪嬬潃纰嶇溂锛烝rray.from绉掑彉姝h鍐?/h3>

DOM鍏冪礌鍒楄〃涓嶈兘鐢ㄦ暟缁勬柟娉曪紵涓€鎷涙悶瀹氾細

javascript澶嶅埗
const divList = Array.from(document.querySelectorAll('div'))
// 鐜板湪鍙互鐢╩ap/filter绛夋柟娉曚簡锛?/span>
divList.filter(div => div.className.includes('active'))

鈥?strong>鈥嬪喎鐭ヨ瘑鈥?/strong>鈥嬶細

  • 绗簩涓弬鏁板彲浠ヤ紶map鍑芥暟
  • 鑳藉鐞哸rguments瀵硅薄
    涓婂懆鐢ㄨ繖涓妧宸т紭鍖栦簡琛ㄦ牸鎻掍欢锛屼唬鐮佸彲璇绘€ц弓韫定锛?/li>

涓汉绉佽揣鏃堕棿

杩欎簺骞存垜瑙佽繃澶鏂版墜姝荤for寰幆锛屾渶鍚庢妸鑷繁缁曟檿銆傗€?strong>鈥嬫暟缁勬柟娉曞氨鍍忕憺澹啗鍒€鈥?/strong>鈥嬶紝鐢ㄥ浜嗕簨鍗婂姛鍊嶏紒鍒氬紑濮嬪彲鑳借涓嶄綇鎵€鏈夊弬鏁帮紝娌″叧绯伙紝鎴戠殑鐙棬绉樼睄鏄細

  1. 鍦ㄦ帶鍒跺彴澶?code>console.log鐪嬭緭鍑?/li>
  2. 鎶婂鏉傛搷浣滄媶鎴愭柟娉曢摼锛坒ilter鈫抦ap鈫抯lice锛?/li>
  3. 瀹炲湪鎼炰笉瀹氬氨鐢绘祦绋嬪浘鐞嗚В鏁版嵁娴佸悜

鏈€杩戝甫瀹炰範鐢熸椂鍙戠幇锛屽潥鎸佺敤杩欎簺鏂规硶鐨勬柊浜猴紝涓や釜鏈堝氨鑳藉啓鍑烘瘮鑰佹墜鏇翠紭闆呯殑浠g爜锛佹墍浠ュ埆鐘硅鲍锛岃刀绱у湪椤圭洰閲岀敤璧锋潵锛屼繚鍑嗛瀵煎拰鍚屼簨瀵逛綘鍒洰鐩哥湅锛?/p>

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