前端必看:JS对象 数组用in方法的核心区别与避坑指南
鈥?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 obj | arr.includes(x) | x in arr |
閬嶅巻鎵€鏈夊睘鎬?/td> | for...in | for...of | 娣风敤閬嶅巻鏂瑰紡 |
妫€娴嬬┖鍊?/td> | 'key' in obj | index 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>