在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()（適合復(fù)雜對象）
如果對象較復(fù)雜，可以用 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)換回對象，適用于更復(fù)雜的操作。
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)文章
現(xiàn)代 javscript 編程 資料...2007-04-04
這篇文章主要介紹了js生成隨機數(shù)方法和實例,由js生成一切隨機數(shù)的基礎(chǔ)都是Math.random(),有興趣的可以了解一下。2017-01-01
這篇文章主要給大家介紹了關(guān)于js中typeof用法的相關(guān)資料,typeof運算符把類型信息當作字符串返回,包括有大家常有變量類型,本文通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-11-11
JS實現(xiàn)根據(jù)文件字節(jié)數(shù)返回文件大小的方法
這篇文章主要介紹了JS實現(xiàn)根據(jù)文件字節(jié)數(shù)返回文件大小的方法,涉及javascript數(shù)值計算與字符串操作相關(guān)技巧,需要的朋友可以參考下2016-08-08
詳解微信小程序scroll-view橫向滾動的實踐踩坑及隱藏其滾動條的實現(xiàn)
這篇文章主要介紹了詳解微信小程序scroll-view橫向滾動的實踐踩坑及隱藏其滾動條的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要為大家介紹了JS拖拽組件的開發(fā)過程，以及如何正確使用JS拖拽組件，做到舉一反三，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了微信小程序滑動選擇器的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
js+html5實現(xiàn)canvas繪制圓形圖案的方法
這篇文章主要介紹了js+html5實現(xiàn)canvas繪制圓形圖案的方法,涉及html5圖形繪制的基礎(chǔ)技巧,需要的朋友可以參考下2015-06-06
JavaScript 格式化數(shù)字、金額、千分位、保留幾位小數(shù)、舍入舍去
這篇文章主要介紹了JavaScript 格式化數(shù)字、金額、千分位、保留幾位小數(shù)、舍入舍去，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
Django1.7+JQuery+Ajax驗證用戶注冊集成小例子
下面是散仙使用Django+Jquery+Ajax的方式來模擬實現(xiàn)了一個驗證用戶注冊時，用戶名存在不存在的一個小應(yīng)用。注意，驗證存在不存在使用的是Ajax的方式，不用讓用戶點擊按鈕驗證是否存在,需要的朋友可以參考下2017-04-04