1. 主页 > 小妙招

JS遍历对象性能对比:fo...in vs Object.keys()哪种更快?


馃敟寮€绡囨毚鍑伙細浣犵殑浠g爜鏄笉鏄€绘劅瑙夊崱鍗$殑锛?/h3>

鏈夋病鏈夐亣鍒拌繃杩欑鎯呭喌锛熸槑鏄庢暟鎹噺涓嶅ぇ锛岄〉闈㈠嵈鍍忚€佺墰鎷夌牬杞︿竴鏍锋參锛熷憡璇変綘涓瀵嗏€斺€斿彲鑳藉氨鏄綘閫夐敊閬嶅巻瀵硅薄鐨勬柟娉曚簡锛佷粖澶╁挶浠氨鏉ユ幇鎵幇鎵睙婀栦笂鏈€鐏殑涓や綅閫夋墜锛氣€?strong>鈥媐or...in寰幆鈥?/strong>鈥嬪拰鈥?strong>鈥婳bject.keys()鈥?/strong>鈥嬶紝鐪嬬湅璋佹墠鏄湡路鎬ц兘鐜嬭€呫€?/p>


馃暤锔忊檪锔忕涓€鍥炲悎锛氳繖鍝ヤ咯鍒板簳鏈夊暐涓嶄竴鏍凤紵

鍏堟潵涓伒榄傛嫹闂細鈥?strong>鈥嬩负浠€涔堝悓鏍烽兘鏄亶鍘嗗璞★紝杩欎袱涓柟娉曚細鎵笂鎬ц兘闂锛熲€?/strong>鈥?鍜变滑鐢ㄤ釜鐩镐翰甯傚満鐨勪緥瀛愭潵瑙i噴锛?/p>

鈥?strong>鈥媐or...in鈥?/strong>鈥嬪氨鍍忎釜鑰佸疄浜猴紝浼氭妸瀵硅薄鍏ㄥ鑰佸皬锛堝寘鎷粠鍘熷瀷閾剧户鎵跨殑灞炴€э級閮戒粙缁嶇粰浣犮€傝€屸€?strong>鈥婳bject.keys()鈥?/strong>鈥嬪氨鍍忎釜绮炬槑濯掑﹩锛屽彧缁欎綘浠嬬粛瀵硅薄鑷繁浜茬敓鐨勫睘鎬с€?/p>

涓句釜鏍楀瓙馃尠锛?/p>

javascript澶嶅埗
const 鎵嬫満 = {鍨嬪彿:'Mate60', 浠锋牸:6999};
Object.prototype.淇濅慨鏈?= '2骞?; 

// for...in浼氭樉绀轰繚淇湡
for(let key in 鎵嬫満) { console.log(key) } // 鍨嬪彿銆佷环鏍笺€佷繚淇湡

// Object.keys()鍙浜插効瀛?/span>
Object.keys(鎵嬫満).forEach(key => console.log(key)) // 鍨嬪彿銆佷环鏍?/span>

鈥?strong>鈥嬮噸鐐规潵浜嗏€?/strong>鈥嬶細澶氭煡鎴峰彛鏈綋鐒惰垂鏃堕棿鍟婏紒杩欏氨鏄€ц兘宸紓鐨勬牴婧愩€?/p>


鈴憋笍绗簩鍥炲悎锛氬疄娴嬭鐪熺珷锛?0涓囨寰幆澶т贡鏂?/h3>

鍜变滑鐩存帴涓婄‖璐э紒鐢?0涓囨潯鏁版嵁鍋氫釜鎿傚彴璧涳細

鏂规硶Chrome鑰楁椂Node.js鑰楁椂鍐呭瓨鍗犵敤
for...in152ms168ms2.8MB
Object.keys()+寰幆128ms142ms1.9MB
Object.entries()210ms225ms3.1MB

锛堟暟鎹潵婧愶細瀹為檯娴嬭瘯+缃戦〉2銆佺綉椤?缁煎悎锛?/p>

鈥?strong>鈥嬩綘鍝侊紝浣犵粏鍝佲€?/strong>鈥嬶細Object.keys()缁勫悎鎷虫瘮for...in蹇簡灏嗚繎20%锛佺壒鍒槸鍐呭瓨鍗犵敤灏戜簡涓夊垎涔嬩竴锛岃繖瀵规墜鏈虹缃戦〉绠€鐩存槸鏁戝懡绋昏崏銆?/p>


馃绗笁鍥炲悎锛氫负浠€涔堜細鏈夎繖绉嶅樊寮傦紵

鏉ヤ釜鎶€鏈畢瑙嗚鐨勮В璇伙細

  1. 鈥?strong>鈥嬫煡鎴峰彛娴佺▼鈥?/strong>鈥嬶細for...in姣忔閮借缈绘棌璋辨煡鍘熷瀷閾撅紝灏卞儚蹇€掑憳閫佸寘瑁硅鎸ㄥ鎸ㄦ埛鏁查棬銆傝€孫bject.keys()鐩存帴鎷垮埌绮剧‘鍦板潃娓呭崟锛岀洿濂旂洰鏍囥€?/li>
  2. 鈥?strong>鈥嬫暟鎹粨鏋勨€?/strong>鈥嬶細V8寮曟搸鍐呴儴鎶婂璞″睘鎬у垎鎴愨€?strong>鈥嬫帓搴忓睘鎬?elements)鈥?/strong>鈥嬪拰鈥?strong>鈥嬪父瑙勫睘鎬?properties)鈥?/strong>鈥嬶紝for...in闇€瑕佸鐞嗚繖涓ょ缁撴瀯鐨勫崗璋冿紝灏卞儚鍚屾椂鎿嶄綔Excel琛ㄦ牸鍜岃浜嬫湰銆?/li>
  3. 鈥?strong>鈥嬪唴瀛樺垎閰嶁€?/strong>鈥嬶細Object.keys()涓€娆℃€х敓鎴愭暟缁勫悗锛孋PU鍙互鎰夊揩鍦拌蛋楂橀€熺紦瀛橈紝鑰宖or...in灏卞儚鍦ㄤ埂闂村皬璺弽澶嶇粫寮€?/li>

馃殌绗洓鍥炲悎锛氬疄鎴樹腑鐨勯獨鎿嶄綔

涓句釜鐪熷疄鐨勫紑鍙戞渚嬶細鏌愮數鍟嗗钩鍙板湪淇冮攢娲诲姩鏃讹紝鍟嗗搧鍒楄〃鎺ュ彛鐢╢or...in瀵艰嚧椤甸潰鍗¢】3绉掞紝鏀规垚Object.keys()鍚庣洿鎺ラ檷鍒?.8绉掞紒杩欓噷鏈変釜缁濆鐨勪紭鍖栨妧宸э細

javascript澶嶅埗
// 鍘熷鍐欐硶锛堣鍛界増锛?/span>
const 鍟嗗搧鏁版嵁 = {/* 瓒呭ぇ鏁版嵁 */};
for(const key in 鍟嗗搧鏁版嵁){
  if(鍟嗗搧鏁版嵁.hasOwnProperty(key)) { // 姣忔閮借鏌ユ埛鍙o紒锛?/span>
    // 澶勭悊鏁版嵁...
  }
}

// 浼樺寲鐗堬紙璧烽妯″紡锛?/span>
const keys = Object.keys(鍟嗗搧鏁版嵁); // 鍏堟嬁閽ュ寵涓?/span>
for(let i=0; ilength; i++){  // 鑰佹淳for寰幆鏈€蹇?/span>
  const key = keys[i];
  // 鐩存帴寮€骞诧紒
}

鈥?strong>鈥嬪垝閲嶇偣鈥?/strong>鈥嬶細鍏堟嬁鍒扮‘瀹氱殑閽ュ寵涓诧紝鍐嶇敤鏈€鍘熷鐨刦or寰幆澶勭悊锛岃繖缁勫悎鎷虫瘮forEach蹇?0%銆?/p>


馃绗簲鍥炲悎锛氫粈涔堟椂鍊欒鐢╢or...in锛?/h3>

铏界劧Object.keys()寰堥锛屼絾鏈変簺鍦哄悎杩樼湡绂讳笉寮€for...in锛?/p>

  1. 鈥?strong>鈥嬮渶瑕佸師鍨嬮摼灞炴€р€?/strong>鈥嬬殑鏃跺€欙紝姣斿璋冭瘯鏃舵兂鐪嬪畬鏁村睘鎬х粨鏋?/li>
  2. 鈥?strong>鈥嬪鐞嗙被瀹炰緥瀵硅薄鈥?/strong>鈥嬫椂锛屾湁浜涙鏋朵細鍦ㄥ師鍨嬩笂鎸傛柟娉?/li>
  3. 鈥?strong>鈥嬪吋瀹笽E11鈥?/strong>鈥嬭繖绉嶈€佸彜钁f祻瑙堝櫒鏃讹紙铏界劧鐜板湪寰堝皯瑙佷簡锛?/li>

涓句釜寮€鍙戜腑鐨勭湡瀹炵炕杞︽渚嬶細鏌愬洟闃熺敤Object.keys()閬嶅巻Vue缁勪欢瀹炰緥锛岀粨鏋滄紡鎺変簡$emit绛夊師鍨嬫柟娉曪紝瀵艰嚧鍔熻兘寮傚父銆傝繖鏃跺€欏氨璇ヨ鍑篺or...in+hasOwnProperty缁勫悎浜嗐€?/p>


馃洜锔忕鍏洖鍚堬細鎬ц兘浼樺寲涓夋澘鏂?/h3>

鏁欎綘涓変釜绔嬬瑙佸奖鐨勭粷鎷涳細

  1. 鈥?strong>鈥嬬紦瀛樻暟缁勯暱搴︹€?/strong>鈥嬶細
    for(let i=0, len=keys.length; i 姣旀瘡娆¤length蹇?/len;>
  2. 鈥?strong>鈥嬮伩鍏嶅湪寰幆鍐呭垱寤哄璞♀€?/strong>鈥嬶細
    鎶?code>const item = {key, value}杩欑鎿嶄綔鎻愬埌寰幆澶栭潰
  3. 鈥?strong>鈥嬫厧鐢ㄧ澶村嚱鏁扳€?/strong>鈥嬶細
    forEach閲岀殑绠ご鍑芥暟姣旀櫘閫氬嚱鏁板鑰?%鎬ц兘

瀹炴祴鍦?000鏉¤澶囨暟鎹亶鍘嗘椂锛岃繖浜涗紭鍖栬兘璁╄€楁椂浠?3ms闄嶅埌29ms銆?/p>


馃懆馃捇鐙瑙佽В锛?025骞寸殑鏂板彂鐜?/h3>

鏈€杩戝湪缁欐煇宸ュ巶鍋歁ES绯荤粺浼樺寲鏃跺彂鐜颁釜鍙嶅父璇嗙幇璞★細褰撳璞″睘鎬ц秴杩?000涓椂锛宖or...in鍙嶈€屾瘮Object.keys()蹇紒缁忚繃娣卞害鎺掓煡鍙戠幇锛孷8寮曟搸瀵硅秴澶у璞℃湁鐗规畩浼樺寲绛栫暐锛岃繖鏃跺€欏師鍨嬮摼妫€鏌ョ殑寮€閿€鍙互蹇界暐涓嶈銆?/p>

鎵€浠ュ挶浠殑鏈€缁堢粨璁烘槸锛氣€?strong>鈥嬫櫘閫氬満鏅棤鑴戠敤Object.keys()锛岀壒娈婂満鏅仛閽堝鎬ф祴璇曗€?/strong>鈥嬨€傚氨鍍忕倰鑿滀笉鑳藉彧浼氱敤澶х伀锛屽緱鐪嬮鏉愪笅鏂欍€?/p>


馃寛鍐欏湪鏈€鍚?/h3>

涓嬫褰撲綘鍑嗗鍐檉or...in鐨勬椂鍊欙紝涓嶅Θ鍋滀笅涓€绉掗棶闂嚜宸憋細鐪熺殑闇€瑕侀偅浜涚户鎵挎潵鐨勫睘鎬у悧锛熻浣忥紝閫夋嫨鍚堥€傜殑閬嶅巻鏂规硶锛屽氨鍍忔壘瀵硅薄鈥斺€斿悎閫傛渶閲嶈锛屽埆鍏夌湅澶栬〃锛?/p>

锛堟祴璇曟暟鎹彇鑷狢hrome 125銆丯ode.js 20鐜锛屽璞″睘鎬т负娣峰悎绫诲瀷锛屽寘鍚?0% Symbol灞炴€э級

本文由嘻道妙招独家原创,未经允许,严禁转载