---

鈥?strong>鈥嬩负浠€涔堝埆浜虹殑浠ｇ爜涓夎鎼炲畾锛屼綘鍐欏崄琛岃繕鎶ラ敊锛熲€?/strong>鈥?br/> 鍒氬JS閭ｄ細鍎匡紝鎴戞€绘妸杩欎笁涓柟娉曞綋浜插厔寮熺敤鈥斺€旂洿鍒版湁澶╂妸map褰揻orEach浣匡紝缁撴灉椤甸潰鏁版嵁鍏ㄥ彉鎴恥ndefined銆備粖澶╁氨甯︿綘鎽告竻瀹冧滑鐨勮劸姘旓紝淇濆噯鐪嬪畬浣犱細鎷嶈吙锛?鍘熸潵瀹冧滑鏍规湰涓嶆槸涓€璺汉鍟婏紒"

---

涓€銆佸熀纭€鎵洸锛氳繖涓変釜鏂规硶鍒板簳鏈変粈涔堝尯鍒紵

鈥?strong>鈥嬬伒榄傛嫹闂細瀹冧滑澶勭悊瀹屾暟缁勫悗閮借繑鍥炰粈涔堬紵鈥?/strong>鈥?br/> 鍜变滑鍏堢湅涓敓娲绘瘮鍠伙細

• 鈥?strong>鈥媐orEach鈥?/strong>鈥?鍍忓鍗栧皬鍝ワ紝鎶婃瘡浠介閫佸埌灏卞畬浜嬶紙杩斿洖undefined锛?/li>
• 鈥?strong>鈥媘ap鈥?/strong>鈥?鍍?D鎵撳嵃鏈猴紝鍘熸牱澶嶅埗骞舵敼閫犳瘡涓浂浠讹紙杩斿洖鏂版暟缁勶級
• 鈥?strong>鈥媐ilter鈥?/strong>鈥?鍍忓畨妫€浠紝鍙斁琛岀鍚堟潯浠剁殑鏃呭锛堣繑鍥炶繃婊ゅ悗鐨勬暟缁勶級

鈥?strong>鈥嬫牳蹇冨樊寮傝〃鈥?/strong>鈥嬶細

鏂规硶	鏄惁淇敼鍘熸暟缁?/th>	杩斿洖鍊?/th>	鑳藉惁涓柇寰幆
forEach	鍚?/td>	undefined	涓嶈兘
map	鍚?/td>	鏂版暟缁?/td>	涓嶈兘
filter	鍚?/td>	杩囨护鍚庣殑鏁扮粍	涓嶈兘

鈥?strong>鈥嬭娉暀璁€?/strong>鈥嬶細鏇剧粡鍦╩ap鍥炶皟閲屽繕璁板啓return锛岀粨鏋滄嬁鍒颁竴绠╃瓙undefined锛岃缁勯暱楠備簡鍗婂皬鏃躲€傝浣忚繖涓搧寰嬶細鈥?strong>鈥媘ap灏辨槸鍦ㄩ€犳柊鏁扮粍锛屼笉return灏辨槸鑰嶆祦姘撯€?/strong>鈥嬨€?/p>

---

浜屻€佸疄鎴樺満鏅細浠€涔堟儏鍐佃缈昏皝鐨勭墝瀛愶紵

鈥?strong>鈥嬬粡鍏搁棶棰橈細鎵归噺淇敼DOM鍏冪礌璇ョ敤鍝釜锛熲€?/strong>鈥?br/> 鐪嬭繖娈电湡瀹炴渚嬩唬鐮侊細

javascript澶嶅埗
// 姝ｇ‘濮垮娍 鉁?/span>
const buttons = document.querySelectorAll('button')
buttons.forEach(btn => {
  btn.classList.add('primary')
  btn.textContent = '绔嬪嵆璐拱'
})

// 閿欒绀鸿寖 鉂?/span>
const newButtons = buttons.map(btn => {
  btn.classList.add('primary')
  return btn.cloneNode(true)
})

鈥?strong>鈥嬪叧閿偣鐮粹€?/strong>鈥嬶細

• 鐢╢orEach鐩存帴鎿嶄綔鐜版湁鍏冪礌
• 鐢╩ap鍙嶈€屽姝や竴涓撅紙闄ら潪瑕佸厠闅嗚妭鐐癸級

鈥?strong>鈥嬩笁澶ч粍閲戜娇鐢ㄦ硶鍒欌€?/strong>鈥嬶細

1. 鈥?strong>鈥嬭鍓綔鐢ㄥ氨鐢╢orEach鈥?/strong>鈥?鈥斺€?姣斿鎵撴棩蹇椼€佷慨鏀瑰閮ㄥ彉閲?/li>
2. 鈥?strong>鈥嬭鍙樺舰鏁版嵁灏辩敤map鈥?/strong>鈥?鈥斺€?姣斿浠锋牸鍗曚綅杞崲锛埪?2 鈫?$1.7锛?/li>
3. 鈥?strong>鈥嬭绛涢€夊彇缁忎汉灏辩敤filter鈥?/strong>鈥?鈥斺€?姣斿杩囨护鏈垚骞寸殑鐢ㄦ埛鏁版嵁

鈥?strong>鈥嬬壒娈婂満鏅€?/strong>鈥嬶細褰撻渶瑕侀摼寮忚皟鐢ㄦ椂锛岃繖涓変釜鏂规硶鍙互缁勯槦鍑哄嚮锛?/p>

javascript澶嶅埗
// 鐢靛晢浠锋牸澶勭悊涓€鏉￠緳
const finalPrices = products
  .filter(p => p.stock > 0)  // 鍏堣繃婊ゆ湁璐х殑
  .map(p => p.price * 0.8)   // 缁熶竴鎵撳叓鎶?/span>
  .forEach(price => {
    console.log(`鎶樻墸浠凤細${price.toFixed(2)}`)
  })

---

涓夈€侀伩鍧戞寚鍗楋細杩欎簺闆峰尯浣犺俯杩囧嚑涓紵

鈥?strong>鈥嬭嚧鍛介棶棰橈細鍦╢ilter閲屼慨鏀瑰厓绱犱細鎬庢牱锛熲€?/strong>鈥?br/> 鐪嬭繖娈垫殫钘忔潃鏈虹殑浠ｇ爜锛?/p>

javascript澶嶅埗
const users = [
  {name: '寮犱笁', vip: true},
  {name: '鏉庡洓', vip: false}
]

// 鎯崇粰VIP鐢ㄦ埛鍔犱釜鏍囪瘑
const vipUsers = users.filter(user => {
  user.isVIP = user.vip  // 鍋峰伔淇敼鍘熷璞?/span>
  return user.vip
})

鈥?strong>鈥嬪悗鏋滃緢涓ラ噸鈥?/strong>鈥嬶細鍘熸暟缁勭殑寮犱笁瀵硅薄琚慨鏀逛簡锛佲€?strong>鈥嬫纭仛娉曗€?/strong>鈥嬪簲璇ユ槸锛?/p>

javascript澶嶅埗
const vipUsers = users
  .filter(user => user.vip)
  .map(user => ({...user, isVIP: true}))

鈥?strong>鈥嬫€ц兘闄烽槺鈥?/strong>鈥嬶細澶氬眰filter+map宓屽鍙兘瀵艰嚧澶氭閬嶅巻锛岃繖鏃跺€欏氨璇ヨfor寰幆鍑哄北锛?/p>

javascript澶嶅埗
// 浣庢晥鍐欐硶 馃悽
const result = bigData
  .filter(item => item.value > 100)
  .map(item => item.id)

// 楂樻晥鍐欐硶 馃殌
const result = []
for(const item of bigData){
  if(item.value > 100){
    result.push(item.id)
  }
}

鈥?strong>鈥嬬被鍨嬭浆鎹㈠潙鈥?/strong>鈥嬶細鎯崇敤map鏇夸唬parseInt锛熷皬蹇冪炕杞︼紒

javascript澶嶅埗
// 浣犱互涓虹殑锛歔1,2,3]
['1','2','3'].map(parseInt) 

// 瀹為檯缁撴灉锛歔1, NaN, NaN] 

鈥?strong>鈥嬭В瀵嗘椂鍒烩€?/strong>鈥嬶細parseInt浼氭帴鏀剁浜屼釜鍙傛暟锛堝綋鍓嶇储寮曪級锛屽鑷磋繘鍒惰浆鎹㈤敊璇€傝В鍐虫柟妗堬細

javascript澶嶅埗
['1','2','3'].map(str => parseInt(str))

---

鍥涖€侀珮闃剁帺娉曪細浣犱互涓哄畠浠彧鑳藉鐞嗘暟缁勶紵

鈥?strong>鈥嬪喎鐭ヨ瘑锛氱敤瀹冧滑澶勭悊NodeList鍜屽瓧绗︿覆鈥?/strong>鈥?br/> 姣斿鎵归噺鎿嶄綔DOM鍚庤幏鍙栦慨鏀瑰悗鐨勫唴瀹癸細

javascript澶嶅埗
// 杞崲NodeList涓烘枃鏈暟缁?/span>
const textArray = Array.from(document.querySelectorAll('.title'))
  .map(el => el.textContent.trim())

鈥?strong>鈥嬬濂囨搷浣滐細鐢╢ilter瀹炵幇鏁扮粍鍘婚噸鈥?/strong>鈥?/p>

javascript澶嶅埗
const dupArr = [1,2,2,3,3,3]
const uniqueArr = dupArr.filter((item, index) => {
  return dupArr.indexOf(item) === index
})

鈥?strong>鈥嬮粦绉戞妧锛氱敤map瀹炵幇瀵硅薄鏁扮粍杞崲鈥?/strong>鈥?/p>

javascript澶嶅埗
const users = [{id:1,name:'A'}, {id:2,name:'B'}]
const idMap = users.map(user => [user.id, user])
// 杞垚Map缁撴瀯鏇存柟渚挎煡鎵?/span>
const userMap = new Map(idMap)

---

鈥?strong>鈥嬫渶鍚庤鍙ュぇ瀹炶瘽鈥?/strong>鈥嬶細鍒鍚勭濂囨妧娣阀杩蜂簡鐪硷紝璁颁綇杩欎笁涓柟娉曠殑鏈川鈥斺€?/p>

• 鈥?strong>鈥媐orEach鈥?/strong>鈥?鏄鍔ㄦ淳锛岃礋璐ｆ墽琛屼笉鍥炲ご
• 鈥?strong>鈥媘ap鈥?/strong>鈥?鏄垱閫犺€咃紝涓撴敞鍙樺舰涓嶅嚭閿?/li>
• 鈥?strong>鈥媐ilter鈥?/strong>鈥?鏄畧闂ㄥ憳锛屼弗鏍兼妸鍏充笉鏀炬按

涓嬫鍐欎唬鐮佸墠鍏堥棶鑷繁锛氭垜鏄鍋氫簨锛熻鏀归€狅紵杩樻槸瑕佺瓫閫夛紵杩欎笁涓棶棰樻兂鏄庣櫧浜嗭紝浣犵殑鏁扮粍鎿嶄綔灏辫兘涓濇粦寰楀儚寰疯姍宸у厠鍔涳紒