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