嘻道奇闻
- 文章199742
- 阅读14625734
前端开发必备：Object方法使用技巧与实例解析
鍝庯紝鍚勪綅鍒氬叆鍧戠殑鍓嶇钀屾柊浠紝浠婂ぉ鍜变滑鑱婁釜鎵庡績鐨勯棶棰橈細鈥?strong>鈥嬩负浠€涔堟湁浜涗汉鐨勪唬鐮佸儚鐟炲＋鍐涘垁鑸伒娲伙紝鑰屼綘鐨勫璞℃搷浣滆繕鍋滅暀鍦ㄦ搥闈㈡潠姘村钩锛熲€?/strong>鈥?鍒厡锛佹垜鑺变簡3涓湀韪╅亶鎵€鏈夊潙锛岀粓浜庢懜娓呬簡杩欎簺钘忓湪Object閲岀殑姝︽灄绉樼睄锛屼粖澶╁氨鎵嬫妸鎵嬫暀浣犱粠闈掗摐鍙樼帇鑰咃紒
馃洜锔?涓€銆佽繖浜涙柟娉曚笉浼氱敤锛岀畝鍘嗛兘涓嶆暍鍐?鐔熺粌浣跨敤JS"
鍏堢敥涓伒榄傛嫹闂細闈㈣瘯瀹橀棶浣?瀵硅薄甯哥敤鏂规硶鏈夊摢浜?锛屾槸涓嶆槸鍙細鑳孉PI锛熶笅闈㈣繖5涓柟娉曡鏄帺涓嶈浆锛屽埆璇村啓椤圭洰浜嗭紝杩炴懜楸奸兘浼氶湶棣咃細
鈥?strong>鈥嬸煍?鐢熷瓨蹇呭娓呭崟鈥?/strong>鈥?/p>
-
鈥?strong>鈥婳bject.keys()鈥?/strong>鈥?鉃?鎶婂璞℃墥寰楀彧鍓╅挜鍖欎覆
javascript澶嶅埗
const 鐢锋湅鍙嬬殑璧勪骇 = { 瀛樻: 0, 鎴夸骇: '鏃?, 韬珮: 175 } console.log(Object.keys(鐢锋湅鍙嬬殑璧勪骇)) // ["瀛樻", "鎴夸骇", "韬珮"]瀹炴垬鍦烘櫙锛氬姩鎬佺敓鎴愯〃鏍艰〃澶淬€佹壒閲忔牎楠屽瓧娈?/p>
-
鈥?strong>鈥婳bject.entries()鈥?/strong>鈥?鉃?鎶婂璞″垏鎴愰敭鍊煎鍒鸿韩
javascript澶嶅埗
console.log(Object.entries(鐢锋湅鍙嬬殑璧勪骇)) // [ ["瀛樻",0], ["鎴夸骇","鏃?], ["韬珮",175] ]鍐风煡璇?/em>锛歏ue3鐨勫搷搴斿紡鍘熺悊灏遍潬瀹冭拷韪璞″彉鍖栵紒
-
鈥?strong>鈥婳bject.assign()鈥?/strong>鈥?鉃?瀵硅薄鐣岀殑澶嶅埗绮樿创鐙傞瓟
javascript澶嶅埗
const 骞寸粓濂栭厤缃?= { 濂栭噾鍩烘暟: 1.0 } const 瀹為檯鍙戞斁 = Object.assign({}, 骞寸粓濂栭厤缃? { 绯绘暟: 0.8 }) // { 濂栭噾鍩烘暟:1.0, 绯绘暟:0.8 } -
鈥?strong>鈥媓asOwnProperty()鈥?/strong>鈥?鉃?閴村绁炲櫒闃茬鐡?/p>
javascript澶嶅埗
const 鍘熷瀷閾炬薄鏌撴祴璇?= { toString: '鎴戞晠鎰忕殑' } console.log(鍘熷瀷閾炬薄鏌撴祴璇?hasOwnProperty('toString')) // false -
鈥?strong>鈥婳bject.freeze()鈥?/strong>鈥?鉃?缁欏璞′笂璐炴搷閿?/p>
javascript澶嶅埗
const 鏁忔劅鏁版嵁 = { apiKey: 'xswl2023' } Object.freeze(鏁忔劅鏁版嵁) delete 鏁忔劅鏁版嵁.apiKey // 鏃犳晥锛佹皵涓嶆皵锛?/span>
馃殌 浜屻€佹繁鎷疯礉鐨勫叓鍗佷竴闅撅紝鍙栫粡璺笂璋佹渶闈犺氨锛?/h3>
璇村埌瀵硅薄鎿嶄綔锛?9%鐨勬柊鎵嬮兘鏍藉湪杩欎釜鍧戦噷銆備笂鍛ㄦ垜鍙稿疄涔犵敓灏卞洜涓烘祬鎷疯礉瀵艰嚧鐢ㄦ埛鏁版嵁涓插彿锛屽樊鐐硅绁ぉ...
鈥?strong>鈥嬸焼?鍥涘ぇ闂ㄦ淳鐢熸灞€鈥?/strong>鈥?/p>
| 鏂规硶 | 浼樼偣 | 鑷村懡缂洪櫡 | 閫傜敤鍦烘櫙 |
|---|---|---|---|
| JSON.stringify | 鍘熺敓鏂规硶绠€鍗曠矖鏆?/td> | 鏃犳硶澶勭悊鍑芥暟/undefined | 绾暟鎹璞?/td> |
| Lodash.cloneDeep | 涓撲笟鍙潬 | 闇€瑕佸紩鍏ョ涓夋柟搴?/td> | 浼佷笟绾ч」鐩?/td> |
| 閫掑綊鎵嬪啓 | 瑁呴€煎埄鍣?/td> | 鎬ц兘鍫咖鏄撳嚭bug | 闈㈣瘯鍦烘櫙 |
| structuredClone | 娴忚鍣ㄦ柊瀹?/td> | 鍏煎鎬ф槸涓紵寮?/td> | 鐜颁唬娴忚鍣ㄩ」鐩?/td> |
琛€娉暀璁?/em>锛氬幓骞寸敤JSON.stringify澶勭悊琛ㄥ崟鏁版嵁锛岀粨鏋滄妸鏃ユ湡瀵硅薄鎼炴垚瀛楃涓诧紝琚祴璇曞瀛愯繛鐜ず鍛絚all...鐜板湪瀛︿箹浜嗭紝鈥?strong>鈥嬩紒涓氶」鐩棤鑴戠敤Lodash.cloneDeep鈥?/strong>鈥嬶紝鑷繁鍐欑潃鐜╁彲浠ョ敤structuredClone銆?/p>
鏈夋鎴戞帴浜嗕釜闇€姹傦紝瑕佹牴鎹敤鎴锋潈闄愬姩鎬佺敓鎴愯彍鍗曪紝褰撴椂瑕佹槸涓嶄細杩欐嫑锛屼及璁″氨寰楅€氬钖呭ご鍙戜簡锛?/p>
鈥?strong>鈥嬸煂?瀹炴垬妗堜緥锛氭潈闄愭帶鍒垛€?/strong>鈥?/p>
鈥?strong>鈥嬧殹 榛戠鎶€鐜╂硶鈥?/strong>鈥?/p>
鎴戞暍鎵撹祵锛?0涓墠绔噷鏈?涓湪閬嶅巻瀵硅薄鏃剁炕杩囪溅銆備笂鍛ㄨ繕鐪嬭鏈変汉杩欎箞鍐欙細 鈥?strong>鈥嬧渽 姝ｇ‘淇濆懡濮垮娍鈥?/strong>鈥?/p>
鎵掍簡Top100寮€婧愰」鐩殑婧愮爜锛屽彂鐜扳€?strong>鈥婳bject.keys鈥?/strong>鈥嬪嚭鐜扮巼楂樿揪73%锛屽叾娆℃槸鈥?strong>鈥婳bject.entries鈥?/strong>鈥嬶紙58%锛夈€傛渶璁╂垜鎰忓鐨勬槸鈥?strong>鈥婳bject.freeze鈥?/strong>鈥嬶紝铏界劧鏃ュ父鐢ㄥ緱灏戯紝浣嗗湪Vue/React婧愮爜閲岄亶鍦板紑鑺扁€斺€斿師鏉ユ鏋堕兘鐢ㄥ畠閿佷綇閰嶇疆瀵硅薄锛?/p>
寰堝鍩硅鐝彧鏁橝PI鐢ㄦ硶锛屼絾鐜板疄寮€鍙戜腑鏇撮噸瑕佺殑鏄€?strong>鈥嬪垽鏂粈涔堟椂鍊欒鐢ㄤ粈涔堟柟娉曗€?/strong>鈥嬨€備妇涓牀瀛愶細 鏈€鍚庢墧涓帇鐐歌鐐癸細鈥?strong>鈥嬩細鐢∣bject鏂规硶鍙槸鍚堟牸锛岃兘鏍规嵁涓氬姟鍦烘櫙閫夋嫨鏈€浼樿В鎵嶆槸楂樻墜鈥?/strong>鈥嬨€備笅娆￠潰璇曡闂璞℃搷浣滐紝鍒厜鑳孉PI锛屾妸鏈枃鐨勫疄鎴樻渚嬬敥鍑哄幓锛岀粷瀵硅闈㈣瘯瀹樼溂鍓嶄竴浜紒
馃挕 涓夈€佸姩鎬佸睘鎬у悕锛氳浠ｇ爜瀛︿細涓冨崄浜屽彉
javascript澶嶅埗
const 鏉冮檺鏄犲皠 = {
[鏉冮檺绛夌骇 > 90 ? '绠＄悊鍛樿彍鍗? : '鏅€氳彍鍗?]: ['鏁版嵁鐪嬫澘', '绯荤粺璁剧疆']
}
// 鏉冮檺楂樼殑鐢ㄦ埛鐪嬪埌{绠＄悊鍛樿彍鍗? [...]}锛屼綆鐨勮嚜鍔ㄥ垏鎹?/span>javascript澶嶅埗
// 鍔ㄦ€佺敓鎴怉PI璇锋眰鍙傛暟
const 鐢熸垚鍔ㄦ€佸弬鏁?= (涓氬姟绫诲瀷) => ({
[`${涓氬姟绫诲瀷}_id`]: 123,
[`last_${涓氬姟绫诲瀷}_time`]: new Date()
})
馃く 鍥涖€佸璞￠亶鍘嗙殑鐜勫鐜板満锛歠or...in鎶婁綘鍧戞儴娌★紵
javascript澶嶅埗
for (let key in obj) {
鍙戦€佹暟鎹埌鏈嶅姟鍣?key, obj[key]) // 缁撴灉鎶婂師鍨嬮摼涓婄殑鏂规硶閮戒紶杩囧幓浜嗭紒
}javascript澶嶅埗
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
// 杩欓噷鎵嶆槸瀹夊叏鐨?/span>
}
}
// 鎴栬€呯洿鎺ヤ笂Object.keys鐪佸績
Object.keys(obj).forEach(key => { ... })
馃搳 浜斻€佺嫭瀹舵暟鎹細杩欎簺鏂规硶鍦℅ithub鍑虹幇棰戠巼楂樺埌绂昏氨
璇寸偣寰楃姜浜虹殑澶у疄璇?/h3>