首页 > 趣闻 > 正文内容

动态属性名怎么访问?JS对象动态取值3种实用方法

趣闻2025-05-27 20:28:34

鈥?strong>鈥嬪紑澶存彁闂€?/strong>鈥?br/> 浣犳槸涓嶆槸缁忓父閬囧埌杩欑鎯呭喌锛熸槑鏄庣煡閬撹鎷垮璞$殑鏌愪釜灞炴€э紝浣嗚繖涓睘鎬у悕鍍忓彉榄旀湳涓€鏍蜂細鑷繁鏀规潵鏀瑰幓銆傛瘮濡備粠鎺ュ彛杩斿洖鐨勬暟鎹瓧娈靛悕甯︾潃鏃堕棿鎴筹紝鎴栬€呰鏍规嵁鐢ㄦ埛杈撳叆鍔ㄦ€佹嫾鎺ュ睘鎬у悕銆傝繖鏃跺€欑敤鐐瑰彿锛?锛夎闂氨鍍忔嬁鍥哄畾閽ュ寵寮€鏃嬭浆闂ㄢ€斺€旀牴鏈悶涓嶅畾鍟婏紒

鍒厡锛佷粖澶╁挶浠氨鎺板紑鎻夌浜嗚閫忚繖涓毦棰橈紝鏁欎綘涓夋嫑鈥?strong>鈥嬪姩鎬佸睘鎬у悕璁块棶澶ф硶鈥?/strong>鈥嬨€備繚璇佷綘瀛﹀畬灏辫兘鐢ㄤ笂锛屽啀涔熶笉鐢ㄥ鐫€鍔ㄦ€佸睘鎬у悕骞茬灙鐪煎暒锛?/p>


绗竴鎷涳細鏂规嫭鍙风粷鏉€鎶€

鈥?strong>鈥嬫牳蹇冨師鐞嗏€?/strong>鈥嬶細鐢ㄥ瓧绗︿覆鍙橀噺褰撻挜鍖欏紑閿?br/> 涓句釜鏍楀瓙馃尠锛屼綘鏈変釜鐢ㄦ埛瀵硅薄锛?/p>

javascript澶嶅埗
const user = {
  '2023_score': 95,
  mobile: '13812345678'
}

鎯宠闂甫骞翠唤鐨勫垎鏁板瓧娈垫€庝箞鍔烇紵杩欐椂鍊欎綘鍙兘浼氶棶锛?code>user.2023_score琛屼笉琛岋紵
鈥?strong>鈥嬬瓟妗堝綋鐒舵槸No锛佲€?/strong>鈥?灞炴€у悕浠ユ暟瀛楀紑澶存椂锛屽繀椤荤敤鏂规嫭鍙疯娉曪細

javascript澶嶅埗
const year = 2023
console.log(user[year + '_score'])  // 杈撳嚭95

鈥?strong>鈥嬪叧閿偣鈥?/strong>鈥嬶細

  • 鏂规嫭鍙烽噷鍙互鏀锯€?strong>鈥嬪瓧绗︿覆鎷兼帴琛ㄨ揪寮忊€?/strong>鈥?/li>
  • 鏀寔鍙橀噺銆佽繍绠楄〃杈惧紡锛堟瘮濡?code>'key_' + index锛?/li>
  • 鑳藉鐞嗙壒娈婂瓧绗﹀睘鎬у悕锛堝obj['data-list']锛?/li>

绗簩鎷涳細璁$畻灞炴€у悕绉樼睄

鈥?strong>鈥嬮€傜敤鍦烘櫙鈥?/strong>鈥嬶細鍒涘缓瀵硅薄鏃跺氨鍔ㄦ€佺敓鎴愬睘鎬у悕
鏈夋椂鍊欏挶浠繛灞炴€у悕閮芥槸涓存椂鍐冲畾鐨勶紝姣斿鏍规嵁鎺ュ彛杩斿洖鏁版嵁鍔ㄦ€佺敓鎴愬瓧娈点€傝繖鏃跺€欏氨瑕佺キ鍑篍S6鐨勮绠楀睘鎬у悕鍔熻兘浜嗐€?/p>

鈥?strong>鈥嬪疄鎴樻渚嬧€?/strong>鈥嬶細

javascript澶嶅埗
const dynamicKey = 'currentStatus'
const app = {
  [dynamicKey]: '杩愯涓?,
  ['ver_' + new Date().getFullYear()]: '2.0.1'
}
console.log(app.currentStatus)  // 杈撳嚭"杩愯涓?

鈥?strong>鈥嬭嚜闂嚜绛斺€?/strong>鈥嬶細
Q锛氳繖鍜屾柟鎷彿璁块棶鏈変粈涔堝尯鍒紵
A锛氳绠楀睘鎬у悕鏄€?strong>鈥嬪湪瀵硅薄鍒涘缓闃舵鈥?/strong>鈥嬪姩鎬佺敓鎴愰敭鍚嶏紝鑰屾柟鎷彿璁块棶鏄€?strong>鈥嬪湪璇诲彇闃舵鈥?/strong>鈥嬪姩鎬佹煡鎵俱€傜浉褰撲簬涓€涓槸鍐欏悕瀛楁椂灏辨悶浜嬫儏锛屼竴涓槸鏌ユ埛鍙f椂鍐嶆悶浜嬫儏銆?/p>


绗笁鎷涳細鍙€夐摼鍙屼繚闄?/h3>

鈥?strong>鈥嬫渶鏂版鍣ㄢ€?/strong>鈥嬶細ES2020鐨勫彲閫夐摼鎿嶄綔绗?.
杩欎釜璇硶绯栦笓娌诲悇绉嶅姩鎬佽闂椂鐨勬姤閿欑劍铏戠棁銆傜壒鍒槸澶勭悊澶氬眰宓屽瀵硅薄鏃讹紝绠€鐩存晳鍛界ɑ鑽夛紒

鈥?strong>鈥嬪姣斿疄楠屸€?/strong>鈥嬶細
浼犵粺鍐欐硶锛?/p>

javascript澶嶅埗
// 瀹规槗鎶annot read property 'xxx' of undefined
const city = user.info.address.city  

鍙€夐摼鍐欐硶锛?/p>

javascript澶嶅埗
// 瀹夊叏绯绘暟+10086
const city = user?.info?.address?.city

鈥?strong>鈥嬬壒娈婃妧宸р€?/strong>鈥嬶細
鍜屾柟鎷彿閰嶅悎浣跨敤鏁堟灉鏇翠匠锛?/p>

javascript澶嶅埗
const key = 'homeAddress'
const address = user?.preferences?.[key]

鈥?strong>鈥嬫敞鎰忕偣鈥?/strong>鈥嬶細

  • 闇€瑕佺幇浠f祻瑙堝櫒鎴朆abel杞瘧鏀寔
  • 涓嶈兘鐢ㄥ湪瀵硅薄璧嬪€兼搷浣滃乏渚э紙姣斿obj?.a = 1浼氭姤閿欙級

鏂规硶瀵规瘮閫熸煡琛?/h3>
鎷涘紡鍚嶇О閫傜敤闃舵闃茬炕杞﹁兘鍔?/th>娴忚鍣ㄦ敮鎸?/th>
鏂规嫭鍙?/td>灞炴€ц鍙栨椂鈽呪槄鈽呪槅鈽?/td>鍏ㄦ敮鎸?/td>
璁$畻灞炴€у悕瀵硅薄鍒涘缓鏃?/td>鈽呪槄鈽呪槄鈽?/td>ES6+
鍙€夐摼澶氬眰宓屽璁块棶鏃?/td>鈽呪槄鈽呪槄鈽?/td>鐜颁唬娴忚鍣?/td>

涓汉韪╁潙缁忛獙璋?/h3>

鍒氬紑濮嬬敤鍔ㄦ€佸睘鎬у悕鏃讹紝鎴戝彲娌″皯鎺夊潙閲屻€傝寰楁湁娆$敤obj[鍙橀噺鍚峕姝绘椿鎷夸笉鍒板€硷紝璋冭瘯鍗婂ぉ鎵嶅彂鐜板彉閲忓€煎眳鐒舵槸鏁板瓧绫诲瀷锛佲€?strong>鈥嬪垝閲嶇偣鈥?/strong>鈥嬶細鏂规嫭鍙烽噷鐨勫彉閲忎細鑷姩杞瓧绗︿覆锛屼絾閬囧埌Symbol绫诲瀷灏变細缈昏溅銆?/p>

鐜板湪鎴戠殑缂栫爜涔犳儻鏄細

  1. 鍔ㄦ€佸睘鎬у悕缁熶竴鐢ㄥ瓧绗︿覆绫诲瀷鍙橀噺瀛樺偍
  2. 澶氬眰璁块棶蹇呭姞鍙€夐摼?.淇濆钩瀹?/li>
  3. 澶嶆潅鍦烘櫙鐢?code>Object.hasOwnProperty鍏堟鏌ュ啀鎿嶄綔

鏈€鍚庤鍙ュぇ瀹炶瘽锛氳繖涓夌鏂规硶娌℃湁缁濆鐨勫ソ鍧忥紝灏卞儚铻轰笣鍒€鍜屾壋鎵嬭閰嶅悎浣跨敤銆備笅娆¢亣鍒板姩鎬佸睘鎬у悕鐨勯棶棰樻椂锛屽厛鍒€ョ潃鍐欎唬鐮侊紝鍋滀笅鏉ユ兂鎯宠鐢ㄥ摢鎷涙渶鍚堥€傗€斺€旇繖涓€濊€冭繃绋嬫瘮姝昏纭儗璇硶閲嶈澶氬暒锛?/p>

搜索