首页 > 趣闻 > 正文内容

高效处理前端数据:jQuery数组筛选与遍历最佳实践

趣闻2025-05-27 13:45:47

馃専銆愬紑绡囨毚鍑汇€戜綘鏄笉鏄篃甯歌鏁版嵁鎼炲緱澶村ぇ锛?/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鍒ゆ柇蹇緱澶氾紒杩欎釜鎶€宸у府鎴戞嬁涓嬩簡鍘诲勾缁╂晥绗竴锛屼竴鑸汉鎴戝彲涓嶅憡璇変粬~

搜索