快捷導(dǎo)航

javaScript刪除對象屬性的幾種方法總結(jié)

更新時(shí)間：2023年06月10日 11:09:26 作者：十六Code

這篇文章主要給大家介紹了關(guān)于javaScript刪除對象屬性的幾種方法的相關(guān)資料,它們在不同場景下有不同的應(yīng)用,需要根據(jù)實(shí)際情況選擇最合適的刪除方法,文中通過實(shí)例代碼介紹的非常詳細(xì),下面需要的朋友可以參考下

刪除js中對象中屬性

1.使用delete運(yùn)算符

例：

1) 使用點(diǎn)屬性訪問器刪除：

delete object.property;

在屬性訪問器上應(yīng)用delete運(yùn)算符時(shí)，運(yùn)算符會(huì)從對象中刪除相應(yīng)的屬性：

const obj = {name: '十六個(gè)人博客',url: 'rwlok.com'};
delete obj.url;
console.log(obj); // { name: '十六個(gè)人博客' }

2) 使用方括號(hào)屬性訪問器刪除：

delete object['property'];// orconst name = 'dynamicProperty';
delete object[name];

使用delete運(yùn)算符刪除屬性是可變的，因?yàn)樗鼤?huì)改變原始對象。

如果要?jiǎng)h除的屬性名稱是動(dòng)態(tài)確定的，則可以使用方括號(hào)語法：

const obj = {  name: '十六個(gè)人博客',  url: 'rwlok.com'};
const name = 'url';
delete obj[name];
console.log(obj); // { name: '十六個(gè)人博客' }

2.使用rest解構(gòu)對象

1) 屬性名稱已知：

const { property, ...restObject } = object;

應(yīng)用解構(gòu)和rest語法后，restObject將包含與object相同的屬性，只是沒有刪除的屬性。

const obj= {
  name: '十六個(gè)人博客',
  url: 'rwlok.com'
};
const { url, ...objRest } = obj;
console.log(objRest); // { name: '十六個(gè)人博客' }
console.log(obj); // { name: '十六個(gè)人博客',url: 'rwlok.com' }

2) 屬性名稱是動(dòng)態(tài)的：

const name = 'property';
const { [name]: removedProperty, ...restObject } = object;

如果要?jiǎng)h除的屬性名稱是動(dòng)態(tài)確定的，則可以使用動(dòng)態(tài)屬性名稱解構(gòu)語法：

const obj = {  name: '十六個(gè)人博客',  url: 'rwlok.com'};
const name = 'url';
const { [name]: removedProperty, ...objRest } = obj;
console.log(objRest); // { name: '十六個(gè)人博客' }

rest結(jié)構(gòu)方法還可以一次性刪除多個(gè)屬性：

const obj = {
  name: '十六個(gè)人博客',
  url: 'rwlok.com',
  title: '卡卡測速網(wǎng)', 
};
const { url, title, ...objRest } = obj;
console.log(objRest); // { name: '十六個(gè)人博客' }

附：通過賦值得到方式

const car = {
? color: 'blue',
? brand: 'Ford'
}
const prop = 'color'

const newCar = Object.keys(car).reduce((object, key) => {
? if (key !== prop) {
? ? object[key] = car[key]
? }
? return object
}, {})