js刪除對(duì)象屬性的多種方法舉例
1.將屬性設(shè)置為 undefined
屬性本身仍將存在于對(duì)象中,它還會(huì)改變?cè)紝?duì)象。
const pet = { species: 'dog', age: 3, name: 'celeste', gender: 'female' }; pet.gender = undefined; Object.keys(pet); // ['species', 'age', 'name', 'gender']
2.使用 delete 操作符
delete 將完全從對(duì)象中刪除屬性,會(huì)導(dǎo)致原始對(duì)象的發(fā)生改變,但速度很慢。
const pet = { species: 'dog', age: 3, name: 'celeste', gender: 'female' }; delete pet.gender; Object.keys(pet); // ['species', 'age', 'name']
- delete操作符移除對(duì)象指定屬性,刪除成功返回true,否則返回false。
- 刪除的屬性不存在,delete不會(huì)起任何作用 ,但是仍會(huì)返回true。
- 如果原型鏈有同名屬性,只會(huì)刪除自身的屬性。
- delete不能刪除全局作用域函數(shù)以及作用域中用let或const聲明的屬性。
- delete可以刪除對(duì)象的函數(shù)。
- 不可設(shè)置屬性不能被刪除。比如Math、Array、Object內(nèi)置對(duì)象屬性以及使用Object.defineProperty()方法設(shè)置的屬性。
3.使用對(duì)象解構(gòu)
通過用展開運(yùn)算符(…)可以將需要省略特定屬性的對(duì)象解構(gòu)到新對(duì)象。這個(gè)技巧在需要?jiǎng)h除多個(gè)屬性時(shí)特別有用,并且不會(huì)更改原始對(duì)象。
const pet = { species: 'dog', age: 3, name: 'celeste', gender: 'female' }; const { gender, ...newPet } = pet; Object.keys(pet); // ['species', 'age', 'name', 'gender'] Object.keys(newPet); // ['species', 'age', 'name']
4.使用Reflect
ES6新增的方法,Reflect.deleteProperty(對(duì)象,屬性名),返回一個(gè)布爾值。
const pet = { species: 'dog', age: 3, name: 'celeste', gender: 'female' }; Reflect.deleteProperty(pet, 'gender') Object.keys(pet); // ['species', 'age', 'name']
5.刪除數(shù)組元素
- delete
delete arr[0];
刪除后數(shù)組長(zhǎng)度不變,原索引下元素變?yōu)閚ull。
- splice
會(huì)改變?cè)瓟?shù)組。
補(bǔ)充:delete 運(yùn)算符刪除對(duì)以前定義的對(duì)象屬性或方法的引用
不可以刪除的如下:
1通過var定義的變量 var a=1;delete a//false
2 聲明后的函數(shù) function a(){};delete a//false
3 prototype定義的屬性 a.prototype.b=2;delete b//false
4 函數(shù)傳進(jìn)來的參數(shù) function(a){delete a//false}
5 內(nèi)建對(duì)象 delete arguments//false
可刪除的如下:
1 未定義的變量 b=1;delete b;//true
2 刪除對(duì)象的屬性 var obj={x:1};delete obj.x;//true
總結(jié)
到此這篇關(guān)于js刪除對(duì)象屬性的多種方法的文章就介紹到這了,更多相關(guān)js刪除對(duì)象屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript實(shí)現(xiàn)淘寶商品圖切換效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)淘寶商品圖切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04javascript html5實(shí)現(xiàn)表單驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了javascript html5實(shí)現(xiàn)表單驗(yàn)證的具體代碼,感興趣的小伙伴們可以參考一下2016-03-03JavaScript轉(zhuǎn)換與解析JSON方法實(shí)例詳解
這篇文章主要介紹了JavaScript轉(zhuǎn)換與解析JSON方法,實(shí)例分析了JavaScript解析json的技巧,并附帶分析了jQuery解析與轉(zhuǎn)換json的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11JavaScript實(shí)現(xiàn)獲取某個(gè)元素相鄰兄弟節(jié)點(diǎn)的prev與next方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)獲取某個(gè)元素相鄰兄弟節(jié)點(diǎn)的prev與next方法,涉及JavaScript基于函數(shù)的判定及調(diào)用previousSibling與nextSibling的相關(guān)技巧,需要的朋友可以參考下2016-01-01