1. 主页 > 好文章

前端开发必备:5分钟掌ES6对象新方法(附代码案例)


涓€銆佲€?strong>鈥嬪璞℃搷浣滄€昏俯鍧戯紵杩?涓柊鏂规硶蹇呴』浼氾紒鈥?/strong>鈥?/h3>

"鍚勪綅鍓嶇钀屾柊浠紝鏈夋病鏈夐亣鍒拌繃涓や釜鍙橀噺鏄庢槑鐪嬭捣鏉ヤ竴鏍凤紝浣嗙敤===姣旇緝鍗磋繑鍥瀎alse锛熸垨鑰呮兂鍚堝苟涓や釜瀵硅薄鍗存悶寰楁墜蹇欒剼涔憋紵"鍒厡锛丒S6缁欏挶浠暣浜嗕竴鍫嗗璞℃搷浣滅殑鏂版柟娉曪紝浠婂ぉ鎴戝氨鐢ㄥぇ鐧借瘽+浠g爜妗堜緥锛屽甫浣?鍒嗛挓鎼炲畾杩欎簺绁炲櫒锛?/p>


鈥?strong>鈥?. 绮剧‘鍒ゆ柇锛歄bject.is()鈥?/strong>鈥?/h4>

鍏堟潵涓句釜鏍楀瓙馃尠锛?/p>

javascript澶嶅埗
console.log(NaN === NaN);  // false  
console.log(0 === -0);     // true  

鏄笉鏄寰楄繖缁撴灉鐗瑰弽鐩磋锛熻繖鏃跺€欏氨璇モ€?strong>鈥婳bject.is()鈥?/strong>鈥嬬櫥鍦轰簡锛?/p>

javascript澶嶅埗
console.log(Object.is(NaN, NaN));  // true  
console.log(Object.is(0, -0));      // false  

鈥?strong>鈥嬫牳蹇冧綔鐢ㄢ€?/strong>鈥嬶細

  • 瑙e喅NaN涓嶇瓑浜庤嚜韬?/code>鍜?code>0涓?0琚鍒?/code>鐨勫潙鐖归棶棰?/li>
  • 閫傚悎闇€瑕佷弗鏍煎垽鏂殑鍦烘櫙锛堟瘮濡傝〃鍗曟暟鎹牎楠岋級

鈥?strong>鈥嬪紑鍙戝皬璐村+鈥?/strong>鈥嬶細
鏃ュ父鐢?code>===
瓒冲浜嗭紝浣嗛亣鍒扮壒娈婂€煎姣旀椂锛岃鎺忓嚭杩欐妸鐟炲+鍐涘垁馃敧锛?/p>


鈥?strong>鈥?. 瀵硅薄鍚堝苟锛歄bject.assign()鈥?/strong>鈥?/h4>

"灏忔槑鎯冲悎骞剁敤鎴蜂俊鎭拰璁㈠崟鏁版嵁锛岀粨鏋滃睘鎬ц鐩栦簡鎬庝箞鍔烇紵"鐢ㄢ€?strong>鈥婳bject.assign()鈥?/strong>鈥嬪氨瀵逛簡锛?/p>

javascript澶嶅埗
const user = { name: '灏忔槑', age: 20 };  
const order = { product: '鎵嬫満', age: 18 };  

const merged = Object.assign({}, user, order);  
console.log(merged);  // {name:'灏忔槑', product:'鎵嬫満', age:18}  

鈥?strong>鈥嬫敞鎰忎笁涓噸鐐光€?/strong>鈥嬶細

  1. 绗竴涓弬鏁板繀椤绘槸鐩爣瀵硅薄锛堢┖瀵硅薄{}鏈€瀹夊叏锛?/li>
  2. 鍚屽悕灞炴€т細琚悗闈㈢殑瑕嗙洊锛堜緥瀛愰噷鐨刟ge琚鍗曟暟鎹鐩栦簡锛?/li>
  3. 鈥?strong>鈥嬫祬鎷疯礉璀﹀憡鈥?/strong>鈥嬶細宓屽瀵硅薄浼氬叡浜唴瀛橈紙鏀瑰壇鏈細褰卞搷鍘熷璞★紒锛?/li>

鈥?strong>鈥嬫浛浠f柟妗堚€?/strong>鈥嬶細
鎯虫繁鎷疯礉锛熻瘯璇?code>JSON.parse(JSON.stringify(obj))锛屼絾浼氫涪澶卞嚱鏁板拰鐗规畩绫诲瀷鍝︼紒


鈥?strong>鈥?. 閿€煎澶勭悊涓夊墤瀹⑩€?/strong>鈥?/h4>

ES6缁欏挶浠暣浜嗕笁涓粍閲戞惌妗o細

鏂规硶浣滅敤绀轰緥浠g爜
鈥?strong>鈥婳bject.keys()鈥?/strong>鈥?/td>鑾峰彇鎵€鏈夊睘鎬у悕Object.keys({a:1,b:2}) // ['a','b']
鈥?strong>鈥婳bject.values()鈥?/strong>鈥?/td>鑾峰彇鎵€鏈夊睘鎬у€?/td>Object.values({a:1,b:2}) // [1,2]
鈥?strong>鈥婳bject.entries()鈥?/strong>鈥?/td>鑾峰彇閿€煎鏁扮粍Object.entries({a:1}) // [['a',1]]

鈥?strong>鈥嬪疄鎴樺満鏅€?/strong>鈥嬶細

  • 琛ㄦ牸鏁版嵁閬嶅巻锛?code>Object.entries(userInfo).forEach(([key,val])=> {...})
  • 涓嶮ap瀵硅薄浜掕浆锛?code>new Map(Object.entries(obj))

鈥?strong>鈥?. 瀵硅薄杞崲绁炲櫒锛歄bject.fromEntries()鈥?/strong>鈥?/h4>

"鎬庝箞鎶婇敭鍊煎鏁扮粍鍙樺洖瀵硅薄锛?鍙嶅悜鎿嶄綔鐪嬭繖閲岋紒

javascript澶嶅埗
const arr = [['name','灏忔槑'], ['age',20]];  
const obj = Object.fromEntries(arr);  
console.log(obj);  // {name:'灏忔槑', age:20}  

鈥?strong>鈥嬪吀鍨嬬敤娉曗€?/strong>鈥嬶細

  • URL鍙傛暟杞崲锛?code>Object.fromEntries(new URLSearchParams('a=1&b=2'))
  • 閰嶅悎Map瀵硅薄浣跨敤锛?code>Object.fromEntries(myMap)

鈥?strong>鈥?. 灞炴€ф弿杩扮锛歄bject.getOwnPropertyDescriptors()鈥?/strong>鈥?/h4>

杩涢樁鐜╁蹇呭锛佽繖涓柟娉曡兘鎷垮埌瀵硅薄灞炴€х殑瀹屾暣閰嶇疆淇℃伅锛?/p>

javascript澶嶅埗
const obj = {  
  name: '灏忔槑',  
  get age() { return this._age },  
  set age(v) { this._age = v+1 }  
};  

console.log(Object.getOwnPropertyDescriptors(obj));  
/* 杈撳嚭锛?
{  
  name: {value:'灏忔槑', writable:true, enumerable:true...},  
  age: {get:茠, set:茠, enumerable:true...}  
}  
*/  

鈥?strong>鈥嬩娇鐢ㄥ満鏅€?/strong>鈥嬶細

  • 鍏嬮殕鍖呭惈getter/setter鐨勫璞?/li>
  • 閰嶅悎Object.defineProperties()瀹炵幇绮剧粏灞炴€ф帶鍒?/li>

浜屻€佲€?strong>鈥嬭繖浜涢殣钘忔妧宸т綘鐭ラ亾鍚楋紵鈥?/strong>鈥?/h3>

鈥?strong>鈥?. 瀵硅薄瑙f瀯鐨勯獨鎿嶄綔鈥?/strong>鈥?/h4>

浣犱互涓鸿В鏋勫彧鑳借繖鏍凤紵

javascript澶嶅埗
const {name, age} = user;  

璇曡瘯杩欎簺楂橀樁鐜╂硶锛?/p>

  • 鈥?strong>鈥嬪埆鍚嶅鐞嗏€?/strong>鈥嬶細const {name: userName} = user锛堝彉閲忛噸鍛藉悕锛?/li>
  • 鈥?strong>鈥嬮粯璁ゅ€尖€?/strong>鈥嬶細const {role = '娓稿'} = user锛堥槻undefined鎶ラ敊锛?/li>
  • 鈥?strong>鈥嬪祵濂楄В鏋勨€?/strong>鈥嬶細
javascript澶嶅埗
const { 
  address: { city } 
} = {address: {city:'鍖椾含', street:'涓叧鏉?}};  

鈥?strong>鈥?. 鎵╁睍杩愮畻绗?...)鐨勫鐢ㄢ€?/strong>鈥?/h4>

闄や簡鍚堝苟瀵硅薄锛岃繕鑳界帺鍑鸿姳锛?/p>

  • 鈥?strong>鈥嬫祬鎷疯礉鈥?/strong>鈥嬶細const newObj = {...oldObj}
  • 鈥?strong>鈥嬭鐩栧睘鎬р€?/strong>鈥嬶細
javascript澶嶅埗
const defaults = {color:'red', size: 'M'};  
const config = {...defaults, color:'blue'};  // color琚鐩栦负blue  
  • 鈥?strong>鈥嬭繃婊ゅ睘鎬р€?/strong>鈥嬶細
javascript澶嶅埗
const {password, ...safeData} = user;  // 鍓旈櫎鏁忔劅瀛楁  

涓夈€佲€?strong>鈥嬩釜浜鸿俯鍧戠粡楠岃皥鈥?/strong>鈥?/h3>

骞蹭簡浜斿勾鍓嶇锛岃繖涓変釜鏁欒鍊煎崈閲戯細

  1. 鈥?strong>鈥嬫厧鐢↗SON.parse(JSON.stringify())鍋氭繁鎷疯礉鈥?/strong>鈥嬶細浼氫涪澶盌ate銆佸嚱鏁扮瓑鐗规畩绫诲瀷锛岄亣鍒板惊鐜紩鐢ㄧ洿鎺ュ穿
  2. 鈥?strong>鈥婳bject.assign()涓嶆槸閾跺脊鈥?/strong>鈥嬶細
    • 鍚堝苟10灞傚祵濂楀璞★紵璇风敤lodash鐨刜.merge()
    • 闇€瑕佷繚鐣欏師鍨嬮摼锛熻瘯璇?code>Object.create(Object.getPrototypeOf(obj))
  3. 鈥?strong>鈥嬫€ц兘浼樺寲灏忔暟鎹€?/strong>鈥嬶細
    • 閬嶅巻10涓囨瀵硅薄鏃讹紝Object.keys()姣?code>for...in蹇?0%
    • 鐢?code>Object.freeze()鍐荤粨閰嶇疆瀵硅薄锛岃兘鎻愬崌V8寮曟搸浼樺寲姒傜巼

鍥涖€佲€?strong>鈥嬫渶鍚庤鐐瑰疄鍦ㄧ殑鈥?/strong>鈥?/h3>

寰堝鏂版墜瑙夊緱"瀵硅薄鎿嶄綔涓嶅氨鏄偣绗﹀彿鍜屾柟鎷彿鍚楋紵"锛屼絾瀹為檯寮€鍙戜腑锛岃〃鍗曟暟鎹鐞嗐€丄PI鍙傛暟缁勮銆佺姸鎬佺鐞?..鍝摢閮界涓嶅紑杩欎簺鏂规硶銆傛垜瑙佽繃鏈変汉鐢╢or寰幆鎷兼帴瀵硅薄灞炴€э紝缁撴灉浠g爜鍙堥暱鍙堥毦缁存姢銆?/p>

璁颁綇锛氣€?strong>鈥嬩細鐢ㄥ伐鍏风殑绋嬪簭鍛樺拰鍙細鍐欏惊鐜殑绋嬪簭鍛橈紝鏁堢巼鑳藉樊10鍊嶏紒鈥?/strong>鈥?杩欎簺ES6鏂规硶灏辨槸浣犵殑鐟炲+鍐涘垁锛岃姳5鍒嗛挓瀛︿細浜嗭紝鐪佷笅鐨勬椂闂村浣犳懜楸煎枬涓夋澂濂惰尪浜嗮煣嬶紒

锛堝樋锛佺湅瀹屽埆蹇樹簡鍔ㄦ墜鏁蹭唬鐮佽瘯璇曪紝鍏夌湅涓嶅姩閮芥槸鍋囨妸寮弤锛?/p>

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