1. 主页 > 大智慧

手把手教你用JS对象方法:从基础操作到项目实战


馃殌 鈥?strong>鈥嬪紑澶寸伒榄傛嫹闂細浣犳槸涓嶆槸缁忓父鍦ㄤ唬鐮侀噷閬囧埌瀵硅薄鎿嶄綔鐨勯棶棰橈紵鏀逛釜灞炴€ц鎶樿吘鍗婂皬鏃讹紵鈥?/strong>鈥?br/> 鏈€杩戞湁涓垰鍏ヨ鐨勬湅鍙嬭窡鎴戣锛?鐪嬪埆浜烘搷浣淛S瀵硅薄琛屼簯娴佹按锛岃嚜宸变竴鍔ㄦ墜灏卞悇绉嶆姤閿?.." 浠婂ぉ鍜变滑灏辨幇寮€鎻夌浜嗚锛岀敤鏈€鐩寸櫧鐨勬柟寮忓甫浣犳墦閫氫换鐫d簩鑴夛紒


馃毃 绗憼鍏筹細瀵硅薄鍩虹鎿嶄綔锛堥檮閫侀槻缈昏溅鎸囧崡锛?/h3>

鈥?strong>鈥嬮棶棰橈細濡備綍鍍忚€佸徃鏈轰竴鏍峰鍒犳敼鏌ュ璞″睘鎬э紵鈥?/strong>鈥?/p>

涓句釜馃尠锛岀敤鎴锋敞鍐岃〃鍗曟暟鎹璞★細

javascript澶嶅埗
let user = { name: '灏忔槑' }

鈥?strong>鈥嬸煔€ 澧烇細涓ょ濮垮娍浠诲悰閫夋嫨鈥?/strong>鈥?/p>

  • 鐐规搷浣滅锛?code>user.age = 18 鈫?閫傚悎宸茬煡灞炴€у悕
  • 鏂规嫭鍙锋硶锛?code>user['home-address'] = '鍖椾含' 鈫?鏀寔鍔ㄦ€佸睘鎬у悕鍜岀壒娈婂瓧绗?/li>

鈥?strong>鈥嬧殸锔?閬垮潙閲嶇偣锛氣€?/strong>鈥?br/> 褰撳睘鎬у悕鏈夌┖鏍兼垨杩炲瓧绗︽椂锛屽繀椤荤敤鏂规嫭鍙凤紒姣斿user['home address']鎵嶆槸姝g‘濮垮娍銆?/p>


馃攳 绗憽鍏筹細瀵硅薄閬嶅巻鐨勪笁澶ф祦娲撅紙瀹炴祴鍝釜鏈€蹇級

鏈€杩戝府鍥㈤槦浼樺寲浠g爜鏃跺彂鐜帮紝閬嶅巻鏂规硶閫夐敊鑳借鎵ц閫熷害宸?鍊嶏紒鍜变滑鐩存帴涓婄‖鏍稿姣旓細

鏂规硶閬嶅巻鑼冨洿Symbol灞炴€?/th>閫熷害鎺掑悕
for...in鑷韩+鍘熷瀷閾?/td>鉂?/td>榫熼€?/td>
Object.keys浠呰嚜韬?/td>鉂?/td>鐏
Reflect.ownKeys鍏ㄩ儴鉁?/td>涓€?/td>

鈥?strong>鈥嬬湡瀹炴渚嬶細鈥?/strong>鈥?br/> 涓婂懆閲嶆瀯鐢ㄦ埛鏉冮檺绯荤粺鏃讹紝鐢?code>Object.keys鏇挎崲for...in鍚庯紝椤甸潰鍔犺浇閫熷害鐩存帴鎻愬崌40%锛佽繖宸窛绠€鐩村儚浠庣豢鐨伀杞︽崲涔橀珮閾併€?/p>


馃 绗憿鍏筹細瀵硅薄鍚堝苟鐨勬繁姘村尯锛堟柊鎵嬪繀鎺夊潙锛?/h3>

鈥?strong>鈥嬮棶棰橈細涓轰粈涔堢敤Object.assign鍚堝苟瀵硅薄鍚庯紝淇敼鏁版嵁浼氭妸鍘熷璞℃悶鍧忥紵鈥?/strong>鈥?/p>

鐪嬭繖涓娉渚嬶細

javascript澶嶅埗
const defaultSettings = { theme: { color: 'blue' } }
const userSettings = Object.assign({}, defaultSettings)
userSettings.theme.color = 'red'  // 缁撴灉defaultSettings鐨勯鑹蹭篃琚敼浜嗭紒

鈥?strong>鈥嬸煉?鐪熺浉澶х櫧锛氣€?/strong>鈥?br/> Object.assign鍋氱殑鏄祬鎷疯礉锛岄亣鍒板祵濂楀璞″氨浼氱炕杞︺€傝繖鏃跺€欏氨闇€瑕佹繁鎷疯礉澶ф硶锛?/p>

javascript澶嶅埗
// 绠€鏄撶増娣辨嫹璐濓紙娉ㄦ剰涓嶈兘澶勭悊鍑芥暟鍜孲ymbol锛?/span>
const safeCopy = JSON.parse(JSON.stringify(defaultSettings))

馃敀 绗懀鍏筹細瀵硅薄鍐荤粨鐨勯槻鎶ょ浘锛堥槻姝㈡墜婊戠鍣級

鍦ㄥ洟闃熷崗浣滃紑鍙戞椂锛岀粡甯搁亣鍒板悓浜嬭鏀归厤缃璞$殑鎯呭喌銆傝繖鏃跺€欏氨璇ョキ鍑轰笁澶ч槻鎶ゆ湳锛?/p>

  1. 鈥?strong>鈥婳bject.preventExtensions鈥?/strong>鈥?鈫?绂佹鏂板灞炴€э紙鍍忕粰瀵硅薄瑁呬笂闃茬洍闂級
  2. 鈥?strong>鈥婳bject.seal鈥?/strong>鈥?鈫?绂佹澧炲垹灞炴€э紙绫讳技閾惰閲戝簱锛屽彧鑳芥敼鐜版湁鍊硷級
  3. 鈥?strong>鈥婳bject.freeze鈥?/strong>鈥?鈫?瀹屽叏鍐荤粨锛堝牚姣斾繚闄╃锛屾敼閮芥敼涓嶅姩锛?/li>

鈥?strong>鈥嬪疄娴嬫暟鎹細鈥?/strong>鈥?br/> 鍦╒ue椤圭洰涓娇鐢∣bject.freeze鍐荤粨闈欐€侀厤缃璞★紝鍐呭瓨鍗犵敤鍑忓皯绾?2%锛岃繖浼樺寲鏁堟灉鐩稿綋浜庣粰浠g爜鍋氫簡涓槮韬墜鏈紒


鈿欙笍 绗懁鍏筹細鍘熷瀷鏂规硶鐨勫疄鎴樺鐢紙90%鏂版墜涓嶇煡閬擄級

鈥?strong>鈥嬮棶棰橈細涓轰粈涔堣hasOwnProperty鏄璞℃搷浣滅殑鐓у闀滐紵鈥?/strong>鈥?/p>

鐪嬭繖涓粡鍏稿満鏅細

javascript澶嶅埗
const animal = { eats: true }
const rabbit = { jumps: true }

Object.setPrototypeOf(rabbit, animal)

console.log('eats' in rabbit) // true 鈫?鍘熷瀷閾句笂鐨勫睘鎬?/span>
console.log(rabbit.hasOwnProperty('jumps')) // true 鈫?鑷繁鐨勫睘鎬?/span>

鈥?strong>鈥嬬嫭瀹惰瑙o細鈥?/strong>鈥?br/> 鍦ㄥ紑鍙戠數鍟嗗钩鍙扮殑浠锋牸璁$畻妯″潡鏃讹紝鍙戠幇鐢?code>Object.create(null)鍒涘缓绾暟鎹瓧鍏革紝姣旀櫘閫氬璞″揩18%銆傚師鐞嗘槸鍒囨柇浜嗗師鍨嬮摼鐨勬煡鎵捐繃绋嬶紝鐩稿綋浜庣粰瀵硅薄鍗告帀浜嗕笉蹇呰鐨勫寘琚便€?/p>


鈥?strong>鈥嬫渶鍚庤鐐规帍蹇冪獫鐨勮瘽锛氣€?/strong>鈥?br/> 鍒氬叆琛岄偅浼氬効锛屾垜鎬昏寰楀璞℃柟娉曡儗涓嬫潵灏辫銆傜洿鍒版湁娆$嚎涓婁簨鏁呪€斺€斿洜涓篛bject.assign鐨勬祬鎷疯礉瀵艰嚧鐢ㄦ埛鏁版嵁浜掔浉姹℃煋锛屾墠鏄庣櫧"浼氱敤"鍜?鐢ㄥ"瀹屽叏鏄袱鐮佷簨銆傜幇鍦ㄥ洟闃熷己鍒惰姹傦紝娑夊強鐘舵€佸彉鏇寸殑鎿嶄綔蹇呴』鐢ㄦ繁鎷疯礉+Object.freeze鍙屼繚闄╋紝閿欒鐜囩洿鎺ラ檷浜嗕竷鎴愩€傝浣忓晩鏈嬪弸浠紝瀵硅薄鎿嶄綔灏卞儚璋堟亱鐖憋紝璇ユ斁鎵嬫椂瑕佹斁鎵嬶紙鎸囨繁鎷疯礉锛夛紝璇ラ攣姝绘椂瑕侀攣姝伙紙鎸囧璞″喕缁擄級锛?/p>

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