鈥?strong>鈥嬪垰鎺ユ墜鐨勯」鐩暟鎹贡寰楀儚姣涚嚎鍥紵鈥?/strong>鈥?br/> 涓婂懆甯疄涔犵敓鎺掓煡bug锛屽彂鐜颁粬鎶婄敤鎴锋暟鎹瓨鍦ㄤ簡15涓垎鏁ｇ殑瀵硅薄閲岋紝鏀逛釜鐢ㄦ埛鐘舵€佸緱缈诲北瓒婂箔鎵惧睘鎬с€備粖澶╁氨甯﹀ぇ瀹剁湅鐪嬶紝鐢ㄥObject鏂规硶锛岃兘璁╀綘鐨勪唬鐮佸儚涔愰珮绉湪涓€鏍峰嵆鎻掑嵆鐢紒

鍦烘櫙涓€锛氬鐞咥PI杩斿洖鐨勬贩娌屾暟鎹?/h3>

鈥?strong>鈥嬮棶棰橈細鍚庣杩斿洖鐨剈serData闀胯繖鏍佛煈団€?/strong>鈥?/p>

javascript澶嶅埗
{ 
  "003": {name: "鏉庨浄", vip: false},
  "007": {name: "闊╂姊?, vip: true}
}

鈥?strong>鈥嬫兂瑕佽浆鎹㈡垚鏁扮粍鎬庝箞鍔烇紵鈥?/strong>鈥?br/> 鎺忓嚭Object.values()涓夌鎼炲畾锛?/p>

javascript澶嶅埗
const userList = Object.values(userData)  
// 杈撳嚭锛歔{name:"鏉庨浄"},{name:"闊╂姊?}]

鈥?strong>鈥嬭繘闃堕渶姹傦細甯D鏄犲皠鈥?/strong>鈥?br/> 涓?code>Object.entries()缁勫悎鎷筹細

javascript澶嶅埗
const mappedUsers = Object.entries(userData).map(([id, info]) => ({
  ...info,
  userId: `UID_${id}`
}))

---

鍦烘櫙浜岋細鍔ㄦ€侀厤缃鐞嗙郴缁?/h3>

鈥?strong>鈥嬩骇鍝佺粡鐞嗚锛?涓婚鑹茶鏀寔杩愯鏃跺垏鎹紒"鈥?/strong>鈥?br/> 鐢?code>Object.freeze()閿佹鍩虹閰嶇疆锛?code>Object.assign()瀹炵幇鍔ㄦ€佽鐩栵細

javascript澶嶅埗
const baseTheme = Object.freeze({
  primaryColor: '#1890ff',
  fontSize: 14
})

function applyCustomTheme(custom) {
  return Object.assign({}, baseTheme, custom)
}

鈥?strong>鈥嬮伩鍧戞寚鍗椻€?/strong>鈥嬶細

• 鍐荤粨瀵硅薄鍚庝慨鏀瑰睘鎬т細闈欓粯澶辫触锛堥潪涓ユ牸妯″紡锛?/li>
• 鐢?code>Object.isFrozen()妫€鏌ユ槸鍚﹁閿?/li>

---

鍦烘櫙涓夛細琛ㄥ崟鏍￠獙鍒╁櫒

鈥?strong>鈥嬮渶姹傦細鏀堕泦10涓緭鍏ユ鐨勫€尖€?/strong>鈥?br/> 鍒啀鎵嬪姩鍐?code>formData.name = e.target.value浜嗭紒璇曡瘯杩欎釜锛?/p>

javascript澶嶅埗
const inputs = document.querySelectorAll('.form-item')

const formData = Array.from(inputs).reduce((acc, input) => {
  return Object.assign(acc, {
    [input.name]: input.value
  })
}, {})

鈥?strong>鈥嬮獙璇佸瓧娈电己澶辩殑绁炴搷浣溾€?/strong>鈥嬶細

javascript澶嶅埗
const requiredFields = ['username', 'password']
const missingKeys = requiredFields.filter(key => !Object.keys(formData).includes(key))

鍦烘櫙鍥涳細瀹炵幇绠€鏄撶姸鎬佺鐞?/h3>

鈥?strong>鈥嬬粍浠堕棿鍏变韩鏁版嵁鎬讳笉鍚屾锛熲€?/strong>鈥?br/> 鐢?code>Object.defineProperty()閫犱釜绠€鏄撹瀵熻€咃細

javascript澶嶅埗
const store = {}
Object.defineProperty(store, 'cartCount', {
  set(value) {
    this._cartCount = value
    document.querySelectorAll('.cart-badge').forEach(el => el.textContent = value)
  }
})

// 浠绘剰鍦版柟淇敼鑷姩鍚屾UI
store.cartCount = 5

---

鍦烘櫙浜旓細娣辨嫹璐濆紩鍙戠殑琛€妗?/h3>

鈥?strong>鈥嬩负浠€涔堜慨鏀瑰壇鏈細褰卞搷鍘熷璞★紵鈥?/strong>鈥?br/> 璁颁綇杩欏紶鏁戝懡琛ㄦ牸锛?/p>

鏂规硶	閫傚悎鍦烘櫙	鑷村懡缂洪櫡
JSON搴忓垪鍖?/td>	绠€鍗曟暟鎹?/td>	涓㈠け鍑芥暟/undefined
Object.assign()	鍗曞眰瀵硅薄	宓屽寮曠敤鐩存帴鎵戣
閫掑綊+hasOwnProperty	澶氭暟涓氬姟鍦烘櫙	寰幆寮曠敤鐩存帴鐖嗘爤
Lodash.cloneDeep	浼佷笟绾у鏉傛暟鎹?/td>	闇€瑕佸紩鍏ョ涓夋柟搴?/td>

鈥?strong>鈥嬫帹鑽愯嚜鐮旀繁鎷疯礉鏂规鈥?/strong>鈥嬶細

javascript澶嶅埗
function safeClone(obj, cache = new WeakMap()) {
  if(obj === null || typeof obj !== 'object') return obj
  if(cache.has(obj)) return cache.get(obj)
  
  const clone = Array.isArray(obj) ? [] : {}
  cache.set(obj, clone)
  
  Object.keys(obj).forEach(key => {
    clone[key] = safeClone(obj[key], cache)
  })
  
  return clone
}

---

骞蹭簡鍏勾鍓嶇锛屾垜鍙戠幇寰堝寮€鍙戣€呯殑璇尯鏄細瀹佹効鑺卞崐灏忔椂鏌ユ枃妗ｏ紝涔熶笉鎰挎剰鑺卞崄鍒嗛挓绯荤粺瀛bject鏂规硶銆備笂鍛ㄧ湅鍒板悓浜嬬敤涓夋柟搴撳疄鐜板璞″悎骞讹紝缁撴灉琚?code>Object.assign()鍘熺敓鏂规硶鍚婃墦鎬ц兘锛岃繖灏卞儚寮€鐫€璺戣溅鍘昏彍甯傚満鈥斺€斿畬鍏ㄤ娇閿欏姴銆?/p>

寤鸿澶у鍏绘垚涔犳儻锛氶亣鍒板璞℃搷浣滈渶姹傛椂锛屽厛鎯虫兂鑳戒笉鑳界敤鍘熺敓鏂规硶瑙ｅ喅銆傛瘯绔熸祻瑙堝櫒鐨勫師鐢烝PI浼樺寲锛屽彲姣斿挶浠嚜宸卞啓鐨勫伐鍏峰嚱鏁板己澶浜嗐€備笅娆＄湅鍒板悓浜嬪湪鎵嬪姩閬嶅巻瀵硅薄灞炴€ф椂锛岃寰楁妸杩欑瘒鏂囩珷鐢╃粰浠栤€斺€旂渷涓嬫潵鐨勬椂闂达紝澶熷枬涓夋澂鍜栧暋浜嗕笉鏄紵

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