js刪除對象屬性的多種方法舉例
更新時間：2022年12月09日 11:07:49 作者：黑蓮烈焰使
刪除屬性有很多方法,學(xué)到了就在這里記錄一下,下面這篇文章主要給大家介紹了關(guān)于js刪除對象屬性的多種方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
1.將屬性設(shè)置為 undefined
屬性本身仍將存在于對象中，它還會改變原始對象。
const pet = {
species: 'dog',
age: 3,
name: 'celeste',
gender: 'female'
};
pet.gender = undefined;
Object.keys(pet); // ['species', 'age', 'name', 'gender']
2.使用 delete 操作符
delete 將完全從對象中刪除屬性，會導(dǎo)致原始對象的發(fā)生改變，但速度很慢。
const pet = {
species: 'dog',
age: 3,
name: 'celeste',
gender: 'female'
};
delete pet.gender;
Object.keys(pet); // ['species', 'age', 'name']
- delete操作符移除對象指定屬性，刪除成功返回true，否則返回false。
- 刪除的屬性不存在，delete不會起任何作用 ，但是仍會返回true。
- 如果原型鏈有同名屬性，只會刪除自身的屬性。
- delete不能刪除全局作用域函數(shù)以及作用域中用let或const聲明的屬性。
- delete可以刪除對象的函數(shù)。
- 不可設(shè)置屬性不能被刪除。比如Math、Array、Object內(nèi)置對象屬性以及使用Object.defineProperty()方法設(shè)置的屬性。
3.使用對象解構(gòu)
通過用展開運算符(…)可以將需要省略特定屬性的對象解構(gòu)到新對象。這個技巧在需要刪除多個屬性時特別有用，并且不會更改原始對象。
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(對象，屬性名)，返回一個布爾值。
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ù)組長度不變，原索引下元素變?yōu)閚ull。
- splice
會改變原數(shù)組。
補充：delete 運算符刪除對以前定義的對象屬性或方法的引用
不可以刪除的如下：
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)建對象 delete arguments//false
可刪除的如下：
1 未定義的變量 b=1;delete b;//true
2 刪除對象的屬性 var obj={x:1};delete obj.x;//true
總結(jié)
到此這篇關(guān)于js刪除對象屬性的多種方法的文章就介紹到這了,更多相關(guān)js刪除對象屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面的代碼注意實現(xiàn)先判斷l(xiāng)i是否有樣式，如果沒有，就添加一個樣式，原理呢，就是批量檢測li的className屬性2008-09-09
深入解析JS實現(xiàn)3D標(biāo)簽云的原理與方法
這篇文章主要介紹了深入解析JS實現(xiàn)3D標(biāo)簽云的原理與方法,結(jié)合實例形式詳細(xì)分析了3D標(biāo)簽云原理、實現(xiàn)技巧與相關(guān)操作注意事項,需要的朋友可以參考下2019-08-08
引用類型的值是應(yīng)用類型的的一個實例，對象是某個特定引用類型的實例。新對象是使用new操作符后跟一個構(gòu)造函數(shù)創(chuàng)建的。下面我們就從一個小例子爛研究下這個問題吧。2015-04-04
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實現(xiàn)屏幕滾動效果的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要給大家介紹了關(guān)于如何在JS中如何使用css變量以及export之javascript關(guān)鍵字的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2021-09-09
這個思路是最近寫XScroll.js類的時候想明白的。平常我們說的淡入淡出效果，一般分成兩部分，一半是淡入，另一半就是淡出了。不過經(jīng)過分析，我覺得其實只需要一半就行了2012-03-03
JavaScript必知必會（二) null 和undefined
這篇文章主要介紹了JavaScript必知必會（二) null 和undefined的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
事件機制是幾乎所有開發(fā)語言都有的機制，并不是deviceone的獨創(chuàng)，在某些語言稱之為消息(Event),有些地方稱之為(Message).接下來通過本文給大家介紹JS事件機制的理解 ，需要的朋友一起學(xué)習(xí)吧2023-04-04
非常不錯的，收藏效果代碼，增加當(dāng)前頁的現(xiàn)實，實現(xiàn)對比2008-08-08
本文主要介紹了Webpack提取頁面公共資源的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01