高效处理前端数据:jQuery数组筛选与遍历最佳实践
馃専銆愬紑绡囨毚鍑汇€戜綘鏄笉鏄篃甯歌鏁版嵁鎼炲緱澶村ぇ锛?/h3>
鍒氬鍓嶇閭d細鍎匡紝鎴戝鐫€婊″睆鐨凞OM鍏冪礌鐩存尃澶粹€斺€旀€庝箞浠庡嚑鐧炬潯鏁版嵁閲屽揩閫熸壘鍒版兂瑕佺殑鍐呭锛熶负浠€涔堝埆浜哄啓涓夎浠g爜灏辫兘鎼炲畾鐨勪簨锛屾垜瑕佹姌鑵惧崐灏忔椂锛熶粖澶╁挶浠氨鏉ユ幇鎵幇鎵痡Query鐨勬暟缁勫鐞嗙粷娲伙紒
锛堝暘锛佹媿妗岋級鍒厡锛屾垜鎵撳寘绁ㄧ湅瀹岃繖绡囷紝浣犲鐞嗘暟鎹殑閫熷害缁濆蹇繃澶栧崠灏忓摜閫侀锛?/p>
馃殌绛涢€夋暟鎹細鎵惧噯浣犺鐨勯偅棰楁槦
鈥?strong>鈥婹锛氫负浠€涔堟垜鎬荤瓫涓嶅噯鏁版嵁锛熲€?/strong>鈥?br/> 杩欎簨鍎垮氨鍍忔壘閽ュ寵锛屾槑鏄庡氨鍦ㄥ閲岋紝鍙氨鏄炕涓嶅埌锛佽浣忚繖涓彛璇€馃憠 鈥?strong>鈥?鍏堥攣瀹氳寖鍥村啀鍔ㄦ墜"鈥?/strong>鈥?/p>
涓句釜鏍楀瓙馃尠锛氭兂浠庣敤鎴峰垪琛ㄩ噷鎵惧嚭VIP浼氬憳
javascript澶嶅埗// 閿欒绀鸿寖锛氭瘡娆¢兘閲嶆柊鏌ユ壘DOM $('.user-list li').each(function() { if($(this).data('isVip')) { /* 鎿嶄綔 */ } }) // 姝g‘濮垮娍锛氬厛缂撳瓨鍐嶆搷浣?鉁旓笍 const $users = $('.user-list li') // 馃搶閲嶇偣锛佸厛瀛樿捣鏉?/span> const vips = $users.filter('[data-is-vip="true"]') vips.addClass('gold-member')
鉁ㄢ€?strong>鈥嬮噸瑕佸彂鐜扳€?/strong>鈥嬶細瀹炴祴缂撳瓨閫夋嫨鍣ㄥ悗锛岃繍琛岄€熷害鑳芥彁鍗?鍊嶏紒涓嶄俊浣犳墦寮€鎺у埗鍙拌瘯璇晘
馃寑閬嶅巻榛戞礊锛氬埆鎺夎繘寰幆鐨勫潙锛?/h3>
鈥?strong>鈥婹锛氫负浠€涔堟垜鐨勯〉闈㈣秺璺戣秺鍗★紵鈥?/strong>鈥?br/> 鍙兘涓簡"寰幆濂楀▋"鐨勬瘨锛佹潵鐪嬭繖涓粡鍏哥炕杞︾幇鍦猴細
javascript澶嶅埗// 鐏鹃毦浠g爜锛佹瘡娆″惊鐜兘閲嶆柊鏌ヨDOM 鉂?/span> $('.item').each(function() { $(this).find('.price').text('锟?9') }) // 绁炵骇浼樺寲锛氫竴娆℃€ф悶瀹?鉁旓笍 const $prices = $('.item .price') $prices.text('锟?9')
馃挕鈥?strong>鈥嬪喎鐭ヨ瘑鈥?/strong>鈥嬶細jQuery鐨勯殣寮忚凯浠g壒鎬э紝鍏跺疄鍙互甯綘鐪佹帀80%鐨勫惊鐜紒
馃洜锔忋€愬伐鍏峰簱銆戝洓澶ч噾鍒氱敤濂戒簡灏辨槸绁炲櫒锛?/h3>
鏂规硶 | 閫傜敤鍦烘櫙 | 閬垮潙瑕佺偣 |
---|---|---|
$.each() | 闇€瑕佷腑閫旇烦鍑哄惊鐜椂 | return false鎵嶈兘缁堟寰幆锛?/td> |
.filter() | 鏍规嵁閫夋嫨鍣?鍑芥暟绛涢€夊厓绱?/td> | 娉ㄦ剰淇濇寔閾惧紡璋冪敤 |
.map() | 鎻愬彇鏁版嵁鐢熸垚鏂版暟缁?/td> | 鏈€鍚庝竴瀹氳鍔?get()杞湡鏁扮粍 |
$.grep() | 澶嶆潅鏉′欢杩囨护 | 鍥炶皟鍑芥暟蹇呴』杩斿洖甯冨皵鍊?/td> |
馃憠涓句釜缁煎悎妗堜緥锛氬鐞嗙數鍟嗗晢鍝佸垪琛?/p>
javascript澶嶅埗// 鎵惧嚭浠锋牸浣庝簬100鍏冪殑宸蹭笂鏋跺晢鍝?/span> const cheapGoods = $('.product') .filter('.on-shelf') .map(function() { const price = parseFloat($(this).find('.price').text()) return price < 100 ? this : null }) .get() // 缁欒繖浜涘晢鍝佹墦鏍?/span> $(cheapGoods).addClass('budget-choice')
馃挜銆愬疄鎴樼幇鍦恒€戣娉粡楠屽ぇ鏀鹃€侊紒
鍘诲勾鍋氬湪绾挎暀鑲查」鐩椂锛岄亣鍒拌繃杩欎箞涓渶姹傦細瑕佹牴鎹敤鎴峰仛棰樿褰曞疄鏃剁敓鎴愬垎鏋愭姤鍛娿€傚綋鏃剁敤浜?map()+.grep()缁勫悎鎷筹細
javascript澶嶅埗const wrongQuestions = $('.question') .map(function() { return { id: $(this).data('id'), isCorrect: $(this).hasClass('correct') } }) .get() .filter(q => !q.isCorrect)
馃搱缁撴灉浣犵寽鎬庝箞鐫€锛熷鐞?00閬撻鐩殑鏁版嵁锛屼粠鍘熸潵3绉掔缉鐭埌0.5绉掞紒棰嗗褰撳満缁欐垜鍔犱簡楦¤吙馃崡
馃銆愮嫭瀹惰剳娲炪€戜綘鍙兘涓嶇煡閬撶殑鍐锋搷浣?/h3>
鏈€杩戝彂鐜颁釜楠氭搷浣滐細鐢?.map()鐜╄浆浜岀淮鏁扮粍锛?br/> 姣斿鎶婂祵濂楃殑鑿滃崟鏁版嵁鎷嶅钩锛?/p>
javascript澶嶅埗const menuData = [ ['棣栭〉', '鍏充簬鎴戜滑'], ['浜у搧', ['鎵嬫満', '閰嶄欢']] ] const flatMenu = $.map(menuData, function(subArr) { return $.isArray(subArr) ? subArr : [subArr] })
馃く杩欐嫑鍦ㄥ鐞嗗悗鍙拌繑鍥炵殑濂囪懇鏁版嵁缁撴瀯鏃惰醇濂界敤锛?/p>
馃寛銆愭渶鍚庡敔鍙ㄣ€戝埆璁╂鏋堕檺鍒朵簡鎯宠薄鍔?/h3>
铏界劧鐜板湪Vue/React褰撻亾锛屼絾寰堝鑰侀」鐩繕鍦ㄧ敤jQuery銆備笂鍛ㄦ帴鎵嬩釜鏀垮簻椤圭洰锛屽樋锛屼綘鐚滀汉瀹剁敤鐨勫暐锛焜Query 1.7锛佹墍浠ヨ鍟婏紝杩欎簺鍩烘湰鍔熷埌鍝兘鍚冨緱寮€銆?/p>
瀵逛簡锛屽伔鍋峰憡璇変綘浠釜灏忕瀵嗮煠細鐢?filter(':visible')閫夋嫨鍙鍏冪礌锛屾瘮鐢–SS鍒ゆ柇蹇緱澶氾紒杩欎釜鎶€宸у府鎴戞嬁涓嬩簡鍘诲勾缁╂晥绗竴锛屼竴鑸汉鎴戝彲涓嶅憡璇変粬~