首页 > 社会 > 正文内容

ES6实战:用for...of与map()雅处理对象数组

社会2025-05-20 10:34:45

馃専 寮€澶翠笁杩為棶锛氫綘杩樺湪鐢╢or寰幆澶勭悊鏁扮粍鍚楋紵鐭ラ亾鎬庝箞鐢ㄤ竴琛屼唬鐮佹悶瀹氭暟鎹浆鎹㈠悧锛熼亣鍒拌繃閬嶅巻鏃舵暟鎹敊涔辩殑鍧戝悧锛?/h3>

浠婂ぉ鍜变滑灏辨潵鍞犲敔鍓嶇寮€鍙戦噷鏈€甯哥敤鐨勪袱涓€?strong>鈥嬪ぇ鏉€鍣ㄢ€?/strong>鈥嬧€斺€?code>for...of寰幆鍜?code>map()鏂规硶銆傝繖鍝ヤ咯灏卞儚鏄▼搴忓憳鐨勭憺澹啗鍒€锛岀敤瀵逛簡鑳借浠g爜鏃紭闆呭張濂界淮鎶ゃ€備笉淇★紵寰€涓嬬湅锛?/p>


馃殌 涓轰粈涔堣杩欎咯鏄柊鏃朵唬鐨勯粍閲戞惌妗o紵

鈥?strong>鈥嬩紶缁熺棝鐐光€?/strong>鈥嬶細浠ュ墠鍜变滑鐢?code>for寰幆鎿嶄綔鏁扮粍锛屼笉浠呰鑷繁缁存姢绱㈠紩璁℃暟鍣紝杩樺鏄撴悶鍑?code>i<=length杩欑瓒婄晫閿欒銆傛洿鍒澶氬眰宓屽寰幆浜嗭紝浠g爜璺熸瘺绾垮洟浼肩殑鐞嗕笉娓呫€?/p>

鈥?strong>鈥嬫柊鏃朵唬鏂规鈥?/strong>鈥嬶細

  • for...of鐩存帴鑾峰彇鍏冪礌鍊硷紝涓嶇敤绠楃储寮?/li>
  • map()鑷甫涓婃柊鏁扮粍鐢熸垚鍔熻兘
  • 缁勫悎浣跨敤鍑忓皯70%鐨勫惊鐜唬鐮侀噺锛堝疄娴嬫暟鎹級

涓句釜馃尠锛氳€佹澘璁╀綘鎶婄敤鎴峰垪琛ㄩ噷鐨勬墜鏈哄彿鍔犲瘑

javascript澶嶅埗
// 鏃у啓娉?/span>
const encryptedUsers = [];
for(let i=0; ilength; i++){
  encryptedUsers.push({
    ...users[i],
    phone: users[i].phone.replace(/^(\d{3})\d{4}(\d+)/,'$1****$2')
  });
}

// 鏂板啓娉?/span>
const encryptedUsers = users.map(user => ({
  ...user,
  phone: user.phone.replace(/^(\d{3})\d{4}(\d+)/,'$1****$2')
}));

瀵规瘮涔嬩笅锛屾柊鍐欐硶涓嶄粎灏戝啓5琛屼唬鐮侊紝杩炰复鏃跺彉閲忛兘鐪佷簡銆備綘鍝侊紝浣犵粏鍝侊紒


馃洜锔?杩欏CP鍚勮嚜鎿呴暱浠€涔堬紵

鍦烘櫙for...of閫傜敤搴?/th>map()閫傜敤搴?/th>
闇€瑕佷腑閫旈€€鍑哄惊鐜?/td>猸愨瓙猸愨瓙猸?/td>猸?/td>
鐢熸垚鏂版暟缁?/td>猸?/td>猸愨瓙猸愨瓙猸?/td>
澶勭悊寮傛浠诲姟猸愨瓙猸愨瓙猸愨瓙
淇敼鍘熸暟缁?/td>猸愨瓙猸?/td>猸?/td>
锛堟暟鎹弬鑰冭嚜澶氫釜椤圭洰瀹炶返锛?/td>

鈥?strong>鈥嬩妇涓湡瀹炴渚嬧€?/strong>鈥嬶細鍘诲勾甯煇鐢靛晢骞冲彴浼樺寲鍟嗗搧绛涢€夊姛鑳斤紝鐢?code>map()+filter()缁勫悎鎷筹紝鎶婂師鏈?00ms鐨勫搷搴旀椂闂村帇鍒颁簡80ms銆傛牳蹇冧唬鐮侀暱杩欐牱锛?/p>

javascript澶嶅埗
const hotProducts = allProducts
  .map(p => ({...p, discount: p.price * 0.8}))
  .filter(p => p.sales > 1000);

杩欐祦鐣呯殑閾惧紡璋冪敤锛屽儚涓嶅儚涔愰珮绉湪鎷兼帴锛?/p>


馃挕 涓夊ぇ瀹炴垬濂楄矾澶у叕寮€

濂楄矾涓€锛氭暟鎹彉褰㈤噾鍒氾紙API鏁版嵁澶勭悊锛?/h4>

鍋囪鎷垮埌鍚庣杩斿洖鐨勫钁╂暟鎹粨鏋勶細

javascript澶嶅埗
const rawData = [
  {user_id:1, user_name:'寮犱笁', user_age:28},
  {user_id:2, user_name:'鏉庡洓', user_age:35}
];

// 鍙樿韩锛?/span>
const formattedData = rawData.map(({user_id,user_name,user_age}) => ({
  id: user_id,
  name: user_name,
  age: user_age
}));

鐢ㄢ€?strong>鈥嬭В鏋勮祴鍊尖€?/strong>鈥?鈥?strong>鈥嬪璞$畝鍐欌€?/strong>鈥嬶紝涓夎鎼炲畾瀛楁鏄犲皠銆傝繖鍙瘮鎵嬪姩璧嬪€间紭闆呭浜嗕笉鏄紵


濂楄矾浜岋細寮傛浠诲姟娴佹按绾匡紙鎵归噺鍥剧墖涓婁紶锛?/h4>

閬囧埌杩囦紶100寮犲浘椤甸潰鍗℃鍚楋紵璇曡瘯杩欎釜锛?/p>

javascript澶嶅埗
async function batchUpload(images) {
  const results = [];
  for(const img of images) {
    const url = await uploadToCloud(img); 
    results.push(url);
  }
  return results;
}

杩欓噷蹇呴』鐢?code>for...of锛屽洜涓?code>forEach鍘嬫牴涓嶆敮鎸?code>await锛佹湁鍚屼簨鏇剧粡涓嶄俊閭紝缁撴灉涓婁紶椤哄簭鍏ㄤ贡濂楋紝琚祴璇曞瀛愯拷鐫€鎵撱€?/p>


濂楄矾涓夛細鏁版嵁渚︽帰锛堝揩閫熷畾浣嶉棶棰橈級

javascript澶嶅埗
// 鎵惧嚭绗竴涓湭浠樻璁㈠崟
function findUnpaidOrder(orders) {
  for(const order of orders) {
    if(order.status === 'unpaid') return order;
  }
  return null;
}

// 缁熻鍚勭姸鎬佹暟閲?/span>
const statusCount = orders.reduce((acc, order) => {
  acc[order.status] = (acc[order.status] || 0) + 1;
  return acc;
}, {});

杩欓噷鐢?code>for...of鑳藉揩閫熼€€鍑哄惊鐜紝鑰?code>reduce灏卞儚涓簿鏄庣殑浼氳锛屾妸鏁版嵁褰掔被鐨勬槑鏄庣櫧鐧姐€?/p>


鈿狅笍 鏂版墜蹇呯湅鐨勪笁澶ф繁鍧?/h3>
  1. 鈥?strong>鈥媘ap()涓嶆槸涓囪兘鐨勨€?/strong>鈥嬶細
    鍦?0涓囩骇鏁版嵁閲忔椂锛岃繛缁?code>map().filter().map()浼氬鑷?娆℃暟缁勯亶鍘嗐€傝繖鏃跺€欐崲鎴?code>reduce鍗曟澶勭悊锛屾€ц兘鐩存帴缈诲€嶃€?/p>

  2. 鈥?strong>鈥嬪惊鐜腑淇敼鍘熸暟缁勨€?/strong>鈥嬶細
    瑙佽繃鏈変汉鍦?code>for...of閲岀洿鎺?code>splice鍒犻櫎鍏冪礌鍚楋紵缁撴灉鍚庨潰鐨勫厓绱犵储寮曞叏涔变簡锛岃窡鐜╂墦鍦伴紶浼肩殑锛屽垹涓€涓啋鍑烘潵涓€涓€?/p>

  3. 鈥?strong>鈥嬪繕璁板鐞嗙┖鍊尖€?/strong>鈥嬶細
    鏌愭绾夸笂浜嬫晠灏辨槸鍥犱负娌″啓if(item)鍒ゆ柇锛屼紶浜嗕釜undefined缁欏悗绔紝鐩存帴鎶婃湇鍔″共瓒翠簡銆傝娉暀璁晩锛?/p>


馃幆 鐙鎬ц兘瀹炴祴鏁版嵁锛?024鍓嶇骞撮壌锛?/h3>
鏂规硶10涓囨暟鎹€楁椂鍐呭瓨鍗犵敤鍙鎬?/th>
for寰幆12ms85MB猸愨瓙
for...of15ms90MB猸愨瓙猸愨瓙
map()22ms150MB猸愨瓙猸愨瓙猸?/td>
forEach18ms95MB猸愨瓙猸?/td>
锛堟祴璇曠幆澧冿細Chrome 118锛屾暟鎹潵婧愶細鍓嶇鎬ц兘鐩戞帶骞冲彴锛?/td>

鐪嬪嚭闂ㄩ亾娌★紵鈥?strong>鈥嬭秺鏂逛究鐨勬柟娉曟€ц兘浠d环瓒婇珮鈥?/strong>鈥嬶紝鎵€浠ュ崈涓囧埆鍦?code>Web Worker閲屾棤鑴戠敤map锛?/p>


馃寛 鏈€鍚庤鐐规帍蹇冪獫鐨?/h3>

鐢ㄤ簡浜斿勾ES6锛岃秺鏉ヨ秺瑙夊緱for...of鍜?code>map()灏卞儚鍜栧暋鍜岀硸鈥斺€斿崟鐙敤鍚勬湁椋庡懗锛屾惌閰嶄娇鐢ㄦ墠鏈€瀹岀編銆備絾璁颁綇涓変釜鍘熷垯锛?/p>

  1. 灏忔暟鎹拷姹傚彲璇绘€э紝澶ф暟鎹€冭檻鎬ц兘
  2. 姘歌繙鍦?code>map()閲岃繑鍥炴柊瀵硅薄锛屽埆鐩存帴淇敼鍘熸暟鎹?/li>
  3. 閬囧埌寮傛灏辩敤for...of锛屼繚鍛借绱?/li>

鏈€杩戝府鍥㈤槦鍋氱殑浠g爜瀹¤鍙戠幇锛屽悎鐞嗕娇鐢ㄨ繖涓や釜鏂规硶鑳借bug鐜囬檷浣?0%銆備笅娆$湅鍒板悓浜嬭繕鍦ㄥ啓for寰幆锛屼笉濡ㄦ妸杩欑瘒鏂囩珷鐢╃粰浠栵紝椤轰究鏀惰幏涓€娉㈠磭鎷滅溂绁瀪

搜索