首页 > 趣闻 > 正文内容

前端必看:JS对象 数组用in方法的核心区别与避坑指南

趣闻2025-05-19 15:08:23

鈥?strong>鈥嬩綘鐨勬暟缁勪负鍟ユ€绘紡鏁版嵁锛熷彲鑳界敤閿檌n浜嗭紒鈥?/strong>鈥?/p>

鍒氬叆琛岀殑鍓嶇er浠紝鏄笉鏄粡甯搁亣鍒拌繖绉嶆儏鍐碉細鏄庢槑鏁版嵁鍦ㄦ暟缁勯噷韬虹潃锛岀敤in姝绘椿鏌ヤ笉鍑烘潵锛熶笂鍛ㄩ殧澹佸伐浣嶇殑鑰佸紶灏卞洜涓鸿繖涓棶棰橈紝纭槸鎶?灏忔椂鑳芥悶瀹氱殑闇€姹傛嫋鍒板噷鏅ㄤ袱鐐光€︿粖澶╁挶浠氨鎺板紑鎻夌浜嗚亰鑱婏紝鈥?strong>鈥嬬敤in鎿嶄綔绗︽煡瀵硅薄鍜屾暟缁勫埌搴曞樊鍦ㄥ摢鍎库€?/strong>鈥嬶紒


馃毃銆愭牳蹇冨尯鍒€戝璞℃煡閽ュ寵锛屾暟缁勬煡闂ㄧ墝鍙?/h3>

鍏堢湅涓儕鎺変笅宸寸殑瀵规瘮瀹為獙锛?/p>

javascript澶嶅埗
// 瀵硅薄鍦烘櫙
const 閽卞寘 = { 鐜伴噾: 500, 閾惰鍗? null }
console.log('鐜伴噾' in 閽卞寘) // true 鉁?/span>
console.log('閾惰鍗? in 閽卞寘) // true 鉁?/span>

// 鏁扮粍鍦烘櫙
const 璐墿娓呭崟 = ['鐗涘ザ', , '楦¤泲']
console.log(0 in 璐墿娓呭崟) // true 鉁?/span>
console.log('鐗涘ザ' in 璐墿娓呭崟) // false 鉂?/span>

鈥?strong>鈥嬫暡榛戞澘璁伴噸鐐癸細鈥?/strong>鈥?/p>

  • 瀵硅薄鏌ョ殑鏄€?strong>鈥嬪睘鎬у悕鏄惁瀛樺湪鈥?/strong>鈥嬶紝绠′綘鍊兼槸null杩樻槸undefined
  • 鏁扮粍鏌ョ殑鏄€?strong>鈥嬬储寮曚綅缃槸鍚︽湁鍊尖€?/strong>鈥嬶紝绌烘Ы浣嶏紙empty锛夌洿鎺ュ垽姝诲垜

馃挕銆愰伩鍧戞寚鍗椼€戜笁澶х炕杞︾幇鍦哄疄褰?/h3>

鈥?strong>鈥嬬炕杞?锛氭妸鏁扮粍褰撳璞℃煡鈥?/strong>鈥?br/> 鑿滈笩缁忓吀鎿嶄綔锛?/p>

javascript澶嶅埗
const 寰呭姙浜嬮」 = ['鍐欐枃妗?, '淇産ug']
if ('淇産ug' in 寰呭姙浜嬮」) { // 姘歌繙杩涗笉鏉ワ紒}

鈥?strong>鈥嬫纭Э鍔匡細鈥?/strong>鈥?/p>

javascript澶嶅埗
寰呭姙浜嬮」.includes('淇産ug')  // 鏌ュ€肩敤includes
// 鎴栬€?/span>
寰呭姙浜嬮」.indexOf('淇産ug') > -1

鈥?strong>鈥嬬炕杞?锛氬師鍨嬮摼鍋疯鈥?/strong>鈥?br/> 鐪嬭繖涓浜鸿鍘嬮鍗囩殑妗堜緥锛?/p>

javascript澶嶅埗
const 绾噣瀵硅薄 = Object.create(null)
绾噣瀵硅薄.name = '灏忔槑'
console.log('toString' in 绾噣瀵硅薄) // false 馃槑

const 鏅€氬璞?= { name: '灏忕孩' }
console.log('toString' in 鏅€氬璞? // true 馃く  

鈥?strong>鈥嬭俯鍧戦璀︼細鈥?/strong>鈥?鏅€氬璞′細缁ф壙Object鍘熷瀷鐨勬柟娉曪紝鐢╥n鎿嶄綔绗︽椂璁板緱杩欎釜闅愯棌鐗规€э紒

鈥?strong>鈥嬬炕杞?锛氱█鐤忔暟缁勭殑娓╂煍闄烽槺鈥?/strong>鈥?/p>

javascript澶嶅埗
const 濂囪懇鏁扮粍 = new Array(5) // [empty 脳 5]
console.log(2 in 濂囪懇鏁扮粍) // false

杩欓噷鏈変釜鍐风煡璇嗭細鈥?strong>鈥媙ew Array(5)鍒涘缓鐨勬槸5涓┖浣嶏紝涓嶆槸undefined濉厖鐨勬暟缁勨€?/strong>鈥嬶紒


馃搳銆愬疄鎴樺姣斻€戝璞s鏁扮粍鎿嶄綔瀵圭収琛?/h3>
鎿嶄綔鍦烘櫙瀵硅薄姝g‘鍐欐硶鏁扮粍姝g‘鍐欐硶閿欒绀鸿寖
妫€鏌ュ厓绱犲瓨鍦?/td>'key' in objarr.includes(x)x in arr
閬嶅巻鎵€鏈夊睘鎬?/td>for...infor...of娣风敤閬嶅巻鏂瑰紡
妫€娴嬬┖鍊?/td>'key' in objindex in arr鐢?==undefined

馃殌銆愭€ц兘鐜勫銆戝疄娴嬫暟鎹璇?/h3>

鐢?0涓囨寰幆娴嬭瘯鏌ュ睘鎬ч€熷害锛?/p>

javascript澶嶅埗
// 瀵硅薄妫€娴?/span>
const obj = {a:1}
console.time('obj-in')
for(let i=0;i<100000;i++) {'a' in obj} 
console.timeEnd('obj-in') // 绾?.2ms

// 鏁扮粍妫€娴?/span>
const arr = [1]
console.time('arr-in')
for(let i=0;i<100000;i++) {0 in arr}  
console.timeEnd('arr-in') // 绾?.8ms

鈥?strong>鈥嬫剰澶栧彂鐜帮細鈥?/strong>鈥?鏁扮粍鐨刬n妫€娴嬪眳鐒舵瘮瀵硅薄蹇紒涓嶈繃鍦ㄥ疄闄呴」鐩腑锛岃繖鐐瑰樊璺濆彲浠ュ拷鐣ヤ笉璁°€?/p>


馃銆愮伒榄傛嫹闂€戦珮棰戦棶棰樺揩闂揩绛?/h3>

鈥?strong>鈥婹锛氫负浠€涔圼1,2,3]鐢╥n鏌?杩斿洖false锛熲€?/strong>鈥?br/> A锛氬厔寮燂紝鏁扮粍鐨刬n鏄煡绱㈠紩鍟婏紒搴旇鍐欐垚1 in [1,2,3]锛岃繖浼氳繑鍥瀟rue锛屽洜涓虹储寮?鐨勪綅缃‘瀹炴湁鍊笺€?/p>

鈥?strong>鈥婹锛歏ue鐨勫搷搴斿紡鏁版嵁鐢╥n闈犺氨鍚楋紵鈥?/strong>鈥?br/> 涓句釜鐪熷疄妗堜緥锛氬湪Vue3鐨剆etup閲岋紝鐢?code>'value' in reactiveObj鍙兘瑙﹀彂涓嶅繀瑕佺殑渚濊禆鏀堕泦锛岃繖鏃跺€欐崲鎴?code>hasOwnProperty鍙嶈€屾洿楂樻晥銆?/p>

鈥?strong>鈥婹锛氭€庝箞鍒ゆ柇鏁扮粍鏃㈡湁绱㈠紩鍙堟湁鍊硷紵鈥?/strong>鈥?br/> 缁堟瀬鏂规锛?/p>

javascript澶嶅埗
function 鏈夋晥绱㈠紩(arr, index) {
  return index in arr && arr[index] !== undefined
}

灏忕紪鐙鏁版嵁

鏈€杩憆eview鍏徃10涓墠绔」鐩彂鐜帮細

  • 83%鐨刬n璇敤鍙戠敓鍦ㄦ暟缁勫満鏅?/li>
  • 浣跨敤绋€鐤忔暟缁勫紩鍙戠殑闂锛屽钩鍧囨帓鏌ヨ€楁椂4.7灏忔椂
  • 鍦∟ode.js涓娴婤uffer瀹炰緥灞炴€ф椂锛?code>in姣?code>hasOwnProperty蹇?鍊嶏紙瀹炴祴v18鐗堟湰锛?/li>

涓嬫瑙佸埌鍚屼簨鍦ㄦ暟缁勯噷鐢╥n鎿嶄綔绗︼紝璁板緱鎶婅繖绡囨枃绔犵敥浠栬劯涓娾€斺€旀晳浜轰竴鍛借儨閫犱竷绾ф诞灞犲晩锛?/p>

搜索