前端开发必备的数组处理技巧:7个JS方法实战案例精讲
鍝庯紝鍒氬鍓嶇閭d細鍎匡紝鎴戞€昏鏁扮粍鎶樿吘寰楄剳澹崇柤鈥斺€旀槑鏄庢兂鎵归噺澶勭悊鏁版嵁锛岀粨鏋滃啓鍑烘潵鐨勪唬鐮佸張闀垮張鎱紝杩樺鏄撳嚭bug锛佷粖澶╁挶浠氨鍞犲敔閭d簺鈥?strong>鈥嬬湡姝h兘鏁戝懡鐨勬暟缁勫鐞嗘柟娉曗€?/strong>鈥嬶紝淇濆噯浣犵湅瀹屽氨鑳界敤锛岀敤浜嗗氨瑙佹晥锛?/p>
锛堝厛鎶涗釜鐏甸瓊鎷烽棶锛氫綘杩樺湪鐢╢or寰幆浠庢棭鍐欏埌鏅氬悧锛燂級
涓€銆佹暟鎹お澶氭敼涓嶈繃鏉ワ紵map鏂规硶鏁欎綘"鎵归噺鍔犲伐"
涓句釜鏍楀瓙馃尠锛氬悗鍙扮粰浣?0涓敤鎴锋暟鎹紝浣嗗ご鍍忓瓧娈甸兘鏄┖瀛楃涓诧紝寰楄ˉ涓婇粯璁ゅ浘
鈥?strong>鈥嬩紶缁熷啓娉曗€?/strong>鈥嬶細
javascript澶嶅埗const newUsers = []; for(let i=0; i
length; 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; i
length; 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>鈥嬶紝鐢ㄥ浜嗕簨鍗婂姛鍊嶏紒鍒氬紑濮嬪彲鑳借涓嶄綇鎵€鏈夊弬鏁帮紝娌″叧绯伙紝鎴戠殑鐙棬绉樼睄鏄細
- 鍦ㄦ帶鍒跺彴澶?code>console.log鐪嬭緭鍑?/li>
- 鎶婂鏉傛搷浣滄媶鎴愭柟娉曢摼锛坒ilter鈫抦ap鈫抯lice锛?/li>
- 瀹炲湪鎼炰笉瀹氬氨鐢绘祦绋嬪浘鐞嗚В鏁版嵁娴佸悜
鏈€杩戝甫瀹炰範鐢熸椂鍙戠幇锛屽潥鎸佺敤杩欎簺鏂规硶鐨勬柊浜猴紝涓や釜鏈堝氨鑳藉啓鍑烘瘮鑰佹墜鏇翠紭闆呯殑浠g爜锛佹墍浠ュ埆鐘硅鲍锛岃刀绱у湪椤圭洰閲岀敤璧锋潵锛屼繚鍑嗛瀵煎拰鍚屼簨瀵逛綘鍒洰鐩哥湅锛?/p>
本文由嘻道妙招独家原创,未经允许,严禁转载