在JS中刪除對(duì)象的某個(gè)屬性常見(jiàn)的幾種方案總結(jié)
前言
在 JavaScript 中，如果你想刪除一個(gè)對(duì)象的某個(gè)屬性，可以使用 delete 操作符。下面是一個(gè)簡(jiǎn)單的示例：
let obj = {
name: 'Alice',
age: 25,
city: 'New York'
};
// 刪除 'age' 屬性
delete obj.age;
console.log(obj); // { name: 'Alice', city: 'New York' }
delete 操作符會(huì)從對(duì)象中刪除指定的屬性。如果屬性存在，它會(huì)刪除該屬性并返回 true，如果屬性不存在，返回 true，但對(duì)象保持不變。注意，delete 不能刪除對(duì)象的不可配置屬性，比如由 Object.defineProperty 設(shè)置的屬性。
除了 delete 操作符，還有幾種方式可以“移除”對(duì)象的某個(gè)屬性，下面是幾種常見(jiàn)的方法：
1. 使用解構(gòu)賦值（創(chuàng)建一個(gè)新對(duì)象）
如果你不想修改原始對(duì)象，可以使用解構(gòu)賦值來(lái)創(chuàng)建一個(gè)新對(duì)象，排除掉某個(gè)屬性。
let obj = {
name: 'Alice',
age: 25,
city: 'New York'
};
// 使用解構(gòu)賦值來(lái)排除 'age' 屬性
const { age, ...newObj } = obj;
console.log(newObj); // { name: 'Alice', city: 'New York' }
這種方法會(huì)創(chuàng)建一個(gè)新的對(duì)象 newObj，不包含 age 屬性，原始對(duì)象 obj 不會(huì)被改變。
2. 使用Object.fromEntries()和Object.entries()
你還可以通過(guò) Object.entries() 將對(duì)象轉(zhuǎn)換為鍵值對(duì)數(shù)組，然后使用 filter 函數(shù)排除掉需要?jiǎng)h除的屬性，最后用 Object.fromEntries() 將結(jié)果轉(zhuǎn)換回對(duì)象。
let obj = {
name: 'Alice',
age: 25,
city: 'New York'
};
// 刪除 'age' 屬性
const newObj = Object.fromEntries(
Object.entries(obj).filter(([key]) => key !== 'age')
);
console.log(newObj); // { name: 'Alice', city: 'New York' }
這種方法也是創(chuàng)建了一個(gè)新的對(duì)象，不會(huì)修改原始對(duì)象。
3. 使用Reflect.deleteProperty()（ES6）
Reflect.deleteProperty() 是 delete 操作符的一個(gè)替代方法，它的行為更加一致，并且返回布爾值，表示是否刪除成功。
let obj = {
name: 'Alice',
age: 25,
city: 'New York'
};
// 使用 Reflect.deleteProperty 刪除 'age' 屬性
Reflect.deleteProperty(obj, 'age');
console.log(obj); // { name: 'Alice', city: 'New York' }
這種方法會(huì)修改原始對(duì)象，并返回刪除操作的結(jié)果（true 或 false）。
總結(jié)
delete是最常見(jiàn)的刪除屬性的方式，但它會(huì)直接修改原始對(duì)象。- 解構(gòu)賦值和
Object.entries()方法創(chuàng)建了新對(duì)象，適合不修改原始對(duì)象的場(chǎng)景。 Reflect.deleteProperty()是delete的替代方法，具有更一致的行為。
選擇哪種方式取決于你的需求，尤其是是否需要保持原始對(duì)象不變。
如果你有一個(gè)集合對(duì)象（例如一個(gè)數(shù)組），并且你想刪除其中每個(gè)對(duì)象的某個(gè)屬性，可以使用map()方法結(jié)合delete或其他方式來(lái)操作每個(gè)對(duì)象。
下面是幾種實(shí)現(xiàn)方式的示例：
1. 使用map()和delete
let array = [
{ name: 'Alice', age: 25, city: 'New York' },
{ name: 'Bob', age: 30, city: 'Los Angeles' },
{ name: 'Charlie', age: 35, city: 'Chicago' }
];
// 刪除每個(gè)對(duì)象的 'age' 屬性
array.forEach(obj => {
delete obj.age;
});
console.log(array);
// [
// { name: 'Alice', city: 'New York' },
// { name: 'Bob', city: 'Los Angeles' },
// { name: 'Charlie', city: 'Chicago' }
// ]
這里我們直接遍歷每個(gè)對(duì)象，使用 delete 刪除 age 屬性。注意，這會(huì)修改原始對(duì)象。
2. 使用map()和解構(gòu)賦值（創(chuàng)建新對(duì)象）
如果你不想修改原始對(duì)象，可以使用 map() 和解構(gòu)賦值來(lái)創(chuàng)建一個(gè)新對(duì)象并刪除指定屬性。
let array = [
{ name: 'Alice', age: 25, city: 'New York' },
{ name: 'Bob', age: 30, city: 'Los Angeles' },
{ name: 'Charlie', age: 35, city: 'Chicago' }
];
// 刪除每個(gè)對(duì)象的 'age' 屬性
let newArray = array.map(({ age, ...rest }) => rest);
console.log(newArray);
// [
// { name: 'Alice', city: 'New York' },
// { name: 'Bob', city: 'Los Angeles' },
// { name: 'Charlie', city: 'Chicago' }
// ]
這種方法不會(huì)修改原始的 array，而是返回一個(gè)新的數(shù)組 newArray，其中每個(gè)對(duì)象都沒(méi)有了 age 屬性。
3. 使用map()和Object.fromEntries()（適合復(fù)雜對(duì)象）
如果對(duì)象較復(fù)雜，可以用 Object.entries() 和 Object.fromEntries() 結(jié)合 map() 來(lái)刪除屬性。
let array = [
{ name: 'Alice', age: 25, city: 'New York' },
{ name: 'Bob', age: 30, city: 'Los Angeles' },
{ name: 'Charlie', age: 35, city: 'Chicago' }
];
// 刪除每個(gè)對(duì)象的 'age' 屬性
let newArray = array.map(obj =>
Object.fromEntries(Object.entries(obj).filter(([key]) => key !== 'age'))
);
console.log(newArray);
// [
// { name: 'Alice', city: 'New York' },
// { name: 'Bob', city: 'Los Angeles' },
// { name: 'Charlie', city: 'Chicago' }
// ]
這種方式是通過(guò)轉(zhuǎn)換為鍵值對(duì)數(shù)組，過(guò)濾掉不需要的屬性，再轉(zhuǎn)換回對(duì)象，適用于更復(fù)雜的操作。
4. 使用map()和Reflect.deleteProperty()（修改原對(duì)象）
let array = [
{ name: 'Alice', age: 25, city: 'New York' },
{ name: 'Bob', age: 30, city: 'Los Angeles' },
{ name: 'Charlie', age: 35, city: 'Chicago' }
];
// 使用 Reflect.deleteProperty 刪除每個(gè)對(duì)象的 'age' 屬性
array.forEach(obj => {
Reflect.deleteProperty(obj, 'age');
});
console.log(array);
// [
// { name: 'Alice', city: 'New York' },
// { name: 'Bob', city: 'Los Angeles' },
// { name: 'Charlie', city: 'Chicago' }
// ]
這種方法與 delete 類似，但是使用 Reflect.deleteProperty() 來(lái)刪除屬性。它也會(huì)修改原始對(duì)象。
總結(jié)
- 使用
delete或Reflect.deleteProperty()會(huì)直接修改原始對(duì)象。 - 使用
map()和解構(gòu)賦值或Object.fromEntries()可以避免修改原始數(shù)組，返回一個(gè)新的數(shù)組。 - 選擇哪種方法取決于是否需要修改原始數(shù)組。
到此這篇關(guān)于在JS中刪除對(duì)象的某個(gè)屬性常見(jiàn)的幾種方案的文章就介紹到這了,更多相關(guān)JS刪除對(duì)象某個(gè)屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
基于iScroll實(shí)現(xiàn)下拉刷新和上滑加載效果
這篇文章主要為大家詳細(xì)介紹了基于iScroll實(shí)現(xiàn)下拉刷新和上滑加載效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
本文通過(guò)做幾個(gè)簡(jiǎn)單的對(duì)照實(shí)驗(yàn)，根據(jù)這幾個(gè)對(duì)照實(shí)驗(yàn)的結(jié)果，幫助大家理解js的this用法。下面就跟小編一起來(lái)看看吧2016-12-12
上傳文件的類型和大小可以js進(jìn)行判斷，在本文有個(gè)不錯(cuò)的示例，適合初學(xué)者，感興趣的朋友可以參考下2013-10-10
隨著以Firefox為代表的第三方瀏覽器的興起，我們做的網(wǎng)站也不能再JUST IE了，如果把原來(lái)的一些javascript代碼放到IE以外的瀏覽器的話，往往都不能正常運(yùn)行或出錯(cuò)，所以這里介紹一下怎么改進(jìn)我們的JS，讓它能更加規(guī)范，更加具有兼容性。2008-09-09
使用 electron 實(shí)現(xiàn)類似新版 QQ 的登錄界面效果(陰影、背景動(dòng)畫(huà)、窗體3D翻轉(zhuǎn))
這篇文章主要介紹了使用 electron 實(shí)現(xiàn)類似新版 QQ 的登錄界面效果(陰影、背景動(dòng)畫(huà)、窗體3D翻轉(zhuǎn)),其實(shí)主要用到的就是 CSS3 的效果：邊框圓角、陰影，3D變換，實(shí)現(xiàn)代碼超級(jí)簡(jiǎn)單，需要的朋友可以參考下2018-10-10
用js實(shí)現(xiàn)的動(dòng)畫(huà)效果2008-04-04
js中的referrer想必大家并不陌生吧，在本文將為大家詳細(xì)介紹其是如何使用的，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-09-09
獲取offsetTop和offsetLeft值的js代碼(兼容)
offsetTop和offsetLeft的值在某些特殊的情況下是會(huì)使用到的，為了實(shí)現(xiàn)值的準(zhǔn)確獲取，本文采用js代碼實(shí)現(xiàn)下，有需求的朋友可以參考下哈2013-04-04
詳細(xì)總結(jié)Javascript中的焦點(diǎn)管理
相信大家都知道焦點(diǎn)作為javascript中的一個(gè)重要功能，基本上和頁(yè)面交互都離不開(kāi)焦點(diǎn)。但卻少有人對(duì)焦點(diǎn)管理系統(tǒng)地做總結(jié)歸納。本文就javascript中的焦點(diǎn)管理作詳細(xì)介紹，有需要的朋友們可以參考借鑒。2016-09-09
Js中FileReader讀取文件內(nèi)容方法詳解(async/await)
這篇文章主要給大家介紹了關(guān)于Js中FileReader讀取文件內(nèi)容(async/await)的相關(guān)資料,FileReader是前端進(jìn)行文件處理的一個(gè)重要的Api,特別是在對(duì)圖片的處理上,如果你想知道圖片的處理原理,你就永遠(yuǎn)不可能繞過(guò)它,需要的朋友可以參考下2023-11-11