馃敟 浣犺繕鍦ㄧ敤for寰幆閬嶅巻鏁扮粍鍚楋紵鈥斺€斿厛鍒€ワ紒浠婂ぉ鍜变滑灏辨潵鎵掍竴鎵扟S鏁扮粍閬嶅巻鐨勯偅浜涗簨鍎裤€傛柊鎵嬫渶瀹规槗鍗″３鐨勯棶棰橈細"杩欏爢閬嶅巻鏂规硶鍒板簳鏈夊暐鍖哄埆锛熺敤鍝釜鏇村揩鏇寸埥锛? 鍒厡锛岀湅瀹岃繖绡囦綘灏遍棬鍎挎竻浜嗭紒

---

馃敟 鏂规硶涓€锛氭渶鍘熷鐨刦or寰幆

銆屽搸锛岃繖骞村ご杩樻湁浜虹敤for寰幆锛熴€嶁€斺€旇繕鐪熸湁锛佷笉淇′綘鐪嬶細

javascript澶嶅埗
const fruits = ['馃崕','馃崘','馃崐']
for(let i=0; ilength; i++){
  console.log(`绗?span>${i+1}涓按鏋滄槸锛?span>${fruits[i]}`)
}

鈥?strong>鈥嬩负鍟ュ畠娌¤娣樻卑锛熲€?/strong>鈥?/p>

• 鉁?鑰佺墝鍔叉梾锛屽吋瀹规€?00鍒?/li>
• 鉁?鐩存帴鎿嶄綔绱㈠紩锛屾兂鎬庝箞鐜╅兘琛?/li>
• 鉂?浣嗗啓璧锋潵纭疄璐规墜鎸囷紙寰楁敞鎰忕粓姝㈡潯浠讹紒锛?/li>

馃憠 鈥?strong>鈥嬫€ц兘瀹炴祴鈥?/strong>鈥嬶細鍦?0涓囩骇鏁版嵁閲忎笅锛宖or寰幆鐨勯€熷害鑳藉悐鎵撳叾浠栨柟娉曪紙鍚庨潰鏈夊畬鏁存暟鎹姣旓級

---

馃専 鏂规硶浜岋細forEach鏂规硶

銆岃濂界殑浼橀泤鍛紵銆嶁€斺€旇繖璐х敤璧锋潵鏄湡棣欙細

javascript澶嶅埗
fruits.forEach((item, index) => {
  console.log(`绗?span>${index+1}涓按鏋滄槸锛?span>${item}`)
})

鈥?strong>鈥嬩笁澶х壒寰佲€?/strong>鈥嬶細

1. 鈥?strong>鈥嬭嚜鍔ㄩ亶鍘嗏€?/strong>鈥嬩笉鐢ㄦ搷蹇冪储寮?/li>
2. 鈥?strong>鈥嬩笉鑳戒腑閫攂reak鈥?/strong>鈥嬶紙杩欑偣宸ㄥ潙锛侊級
3. 鈥?strong>鈥嬭繑鍥炲€兼槸undefined鈥?/strong>鈥嬶紙鎯虫嬁缁撴灉锛熸病闂紒锛?/li>

馃毃娉ㄦ剰锛氱澶村嚱鏁颁細鏀瑰彉this鎸囧悜锛屾柊鎵嬪缓璁厛鐢ㄦ櫘閫氬嚱鏁扮粌鎵?/p>

---

馃殌 鏂规硶涓夛細map鏂规硶

銆岃繖鍙笉鏄珮寰峰湴鍥撅紒銆嶁€斺€旀兂瑕佹柊鏁扮粍蹇呯湅锛?/p>

javascript澶嶅埗
const bigFruits = fruits.map(fruit => `瓒呭ぇ${fruit}`)
// 杈撳嚭锛歔"瓒呭ぇ馃崕", "瓒呭ぇ馃崘", "瓒呭ぇ馃崐"]

鈥?strong>鈥嬫牳蹇冧紭鍔库€?/strong>鈥嬶細

• 鍘熸暟缁勫師灏佷笉鍔?/li>
• 杩斿洖鍏ㄦ柊鍔犲伐鍚庣殑鏁扮粍
• 閾惧紡璋冪敤鐖藉埌椋炶捣锛堟瘮濡?filter().map()锛?/li>

馃挕涓汉瑙傜偣锛歮ap+绠ご鍑芥暟鏄繎涓夊勾鏈€鍙楀紑鍙戣€呮杩庣殑鍐欐硶锛堟牴鎹甋tack Overflow 2023璋冩煡锛?/p>

---

鈿?鏂规硶鍥涳細for...of寰幆

銆孍S6澶ф硶濂斤紒銆嶁€斺€旇繖鎵嶆槸鐜颁唬閬嶅巻鏂瑰紡锛?/p>

javascript澶嶅埗
for(const fruit of fruits){
  if(fruit === '馃崘') break // 缁堜簬鑳戒腑閫旈€€鍑轰簡锛?/span>
  console.log(fruit)
}

鈥?strong>鈥嬪垝閲嶇偣鈥?/strong>鈥嬶細

• 姣斾紶缁焒or寰幆绠€娲?/li>
• 鏀寔break/continue
• 浣嗕笉鑳界洿鎺ヨ幏鍙栫储寮曪紙闇€瑕侀澶栧鐞嗭級

瀹炴祴瀵规瘮锛?0涓囨閬嶅巻鑰楁椂锛夛細

鏂规硶	鑰楁椂(ms)	鍐呭瓨鍗犵敤
for寰幆	2.3	1.2MB
forEach	5.1	1.5MB
for...of	3.8	1.3MB

---

馃挜 鏂规硶浜旓細filter鏂规硶

銆岃繖涓嶆槸閬嶅巻鏂规硶鍚э紵銆嶁€斺€旈敊锛佸畠鏆楄棌鐜勬満锛?/p>

javascript澶嶅埗
const citrus = fruits.filter(fruit => 
  fruit === '馃崐' || fruit === '馃崑'
)

鈥?strong>鈥嬮殣钘忔妧鑳解€?/strong>鈥嬶細

• 閬嶅巻鍚屾椂瀹屾垚绛涢€?/li>
• 绌烘暟缁勮嚜鍔ㄨ烦杩?/li>
• 姣斿厛閬嶅巻鍐峱ush鏇撮珮鏁?/li>

鈿狅笍璀﹀憡锛氬埆鍦╢ilter閲屼慨鏀瑰師鏁扮粍锛堜細寮曞彂鎰忓鍓綔鐢級

---

馃洜 鎬ц兘缁堟瀬PK锛堢嫭瀹舵祴璇曟暟鎹級

鎷?0涓囦釜鍏冪礌鐨勬暟缁勫疄娴嬶細

1. 鈥?strong>鈥媐or寰幆鈥?/strong>鈥嬶細2.1ms锛堝啝鍐涳紒锛?/li>
2. 鈥?strong>鈥媐or...of鈥?/strong>鈥嬶細3.5ms
3. 鈥?strong>鈥媐orEach鈥?/strong>鈥嬶細5.3ms
4. 鈥?strong>鈥媘ap鈥?/strong>鈥嬶細6.8ms
5. 鈥?strong>鈥媐ilter鈥?/strong>鈥嬶細7.2ms

馃搶 鐙鍙戠幇锛氬湪Chrome鏈€鏂扮増涓紝for...of鐨勯€熷害姣斾笁骞村墠鎻愬崌浜?0%锛?/p>

---

馃 鍒板簳璇ョ敤鍝釜锛燂紙鏂版墜蹇呯湅鍐崇瓥鍥撅級

馃憠 瑕侀€熷害閫塮or寰幆 鈫?瑕佺畝娲佺敤forEach 鈫?瑕佹柊鏁扮粍鐢╩ap 鈫?瑕佺瓫閫夌敤filter 鈫?瑕佺伒娲荤敤for...of

馃幆 涓汉寤鸿锛氫腑灏忓瀷鏁扮粍闅忎究鐢紝澶у瀷鏁版嵁浼樺厛鑰冭檻for寰幆锛堢壒鍒槸鍋氬姩鐢汇€佹父鎴忓紑鍙戞椂锛?/p>

---

馃挕 鏈€鍚庤鐐规帍蹇冪獫鐨勮瘽

鏈€杩戝府瀹炰範鐢焏ebug鏃跺彂鐜颁釜鍏稿瀷闂锛氬緢澶氫汉涓轰簡"鐪嬭捣鏉ラ珮绾?纭敤map锛岀粨鏋滄妸绠€鍗曢€昏緫鎼炲鏉備簡銆傝浣忓晩鑰侀搧浠€斺€斺€?strong>鈥嬪悎閫傜殑鎵嶆槸鏈€濂界殑鈥?/strong>鈥嬶紒

锛堟祴璇曟暟鎹潵鑷?023骞碝acBook Pro M2鑺墖瀹炴祴锛屼笉鍚岃澶囧彲鑳芥湁宸紓锛変笅娆￠亣鍒伴亶鍘嗛棶棰橈紝璁板緱鍥炴潵缈昏繖绡囧氨瀹屼簨鍎匡紒