前端开发必备: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>鈥嬶細
- 绗竴涓弬鏁板繀椤绘槸鐩爣瀵硅薄锛堢┖瀵硅薄
{}
鏈€瀹夊叏锛?/li> - 鍚屽悕灞炴€т細琚悗闈㈢殑瑕嗙洊锛堜緥瀛愰噷鐨刟ge琚鍗曟暟鎹鐩栦簡锛?/li>
- 鈥?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>
骞蹭簡浜斿勾鍓嶇锛岃繖涓変釜鏁欒鍊煎崈閲戯細
- 鈥?strong>鈥嬫厧鐢↗SON.parse(JSON.stringify())鍋氭繁鎷疯礉鈥?/strong>鈥嬶細浼氫涪澶盌ate銆佸嚱鏁扮瓑鐗规畩绫诲瀷锛岄亣鍒板惊鐜紩鐢ㄧ洿鎺ュ穿
- 鈥?strong>鈥婳bject.assign()涓嶆槸閾跺脊鈥?/strong>鈥嬶細
- 鍚堝苟10灞傚祵濂楀璞★紵璇风敤lodash鐨刜.merge()
- 闇€瑕佷繚鐣欏師鍨嬮摼锛熻瘯璇?code>Object.create(Object.getPrototypeOf(obj))
- 鈥?strong>鈥嬫€ц兘浼樺寲灏忔暟鎹€?/strong>鈥嬶細
- 閬嶅巻10涓囨瀵硅薄鏃讹紝
Object.keys()
姣?code>for...in蹇?0% - 鐢?code>Object.freeze()鍐荤粨閰嶇疆瀵硅薄锛岃兘鎻愬崌V8寮曟搸浼樺寲姒傜巼
- 閬嶅巻10涓囨瀵硅薄鏃讹紝
鍥涖€佲€?strong>鈥嬫渶鍚庤鐐瑰疄鍦ㄧ殑鈥?/strong>鈥?/h3>
寰堝鏂版墜瑙夊緱"瀵硅薄鎿嶄綔涓嶅氨鏄偣绗﹀彿鍜屾柟鎷彿鍚楋紵"锛屼絾瀹為檯寮€鍙戜腑锛岃〃鍗曟暟鎹鐞嗐€丄PI鍙傛暟缁勮銆佺姸鎬佺鐞?..鍝摢閮界涓嶅紑杩欎簺鏂规硶銆傛垜瑙佽繃鏈変汉鐢╢or寰幆鎷兼帴瀵硅薄灞炴€э紝缁撴灉浠g爜鍙堥暱鍙堥毦缁存姢銆?/p>
璁颁綇锛氣€?strong>鈥嬩細鐢ㄥ伐鍏风殑绋嬪簭鍛樺拰鍙細鍐欏惊鐜殑绋嬪簭鍛橈紝鏁堢巼鑳藉樊10鍊嶏紒鈥?/strong>鈥?杩欎簺ES6鏂规硶灏辨槸浣犵殑鐟炲+鍐涘垁锛岃姳5鍒嗛挓瀛︿細浜嗭紝鐪佷笅鐨勬椂闂村浣犳懜楸煎枬涓夋澂濂惰尪浜嗮煣嬶紒
锛堝樋锛佺湅瀹屽埆蹇樹簡鍔ㄦ墜鏁蹭唬鐮佽瘯璇曪紝鍏夌湅涓嶅姩閮芥槸鍋囨妸寮弤锛?/p>
本文由嘻道妙招独家原创,未经允许,严禁转载