在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)文章
基于JS實現(xiàn)發(fā)送短信驗證碼后的倒計時功能(無視頁面刷新，頁面關(guān)閉不進(jìn)行倒計時功能)
這篇文章主要介紹了基于JS實現(xiàn)發(fā)送短信驗證碼后的倒計時功能(無視頁面刷新，頁面關(guān)閉不進(jìn)行倒計時功能)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
微信小程序webview中wx.miniProgram.navigateTo()的使用方法及其問題解決方法
這篇文章主要介紹了微信小程序webview中wx.miniProgram.navigateTo()的使用方法及其問題解決方法,文章描述了微信小程序中web-view嵌入H5頁面時遇到的問題,特別是當(dāng)H5頁面中包含iframe時,如何在iframe中實現(xiàn)跳轉(zhuǎn)到小程序的index頁面,需要的朋友可以參考下2024-11-11
js 通過html()及text()方法獲取并設(shè)置p標(biāo)簽的顯示值
這篇文章主要介紹了js 通過html()及text()方法獲取并設(shè)置p標(biāo)簽的顯示值,需要的朋友可以參考下2014-05-05
本文主要介紹了js仿淘寶商品放大預(yù)覽功能的實例。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)自定義拍攝組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要為大家介紹了MySQL SUM Function函數(shù)使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
js面向?qū)ο蠓庋b級聯(lián)下拉菜單列表的實現(xiàn)步驟
這篇文章主要介紹了js面向?qū)ο蠓庋b級聯(lián)下拉菜單列表的實現(xiàn)步驟，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2021-02-02
js阻止瀏覽器默認(rèn)行為觸發(fā)的通用方法(推薦)
下面小編就為大家?guī)硪黄猨s阻止瀏覽器默認(rèn)行為觸發(fā)的通用方法(推薦)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
setTimeout函數(shù)是一個原生的javascript函數(shù)。setTimeout函數(shù)會在一個指定的延遲時間之后調(diào)用一個函數(shù)或執(zhí)行一段指定的代碼。它的應(yīng)用非常廣泛，例如我們希望用戶在瀏覽器某個頁面一段時間后彈出一個對話框，或者是鼠標(biāo)點擊某個元素后隔幾秒鐘在刪除這個元素。2017-02-02
本文給大家分享一個簡單的js路由跳轉(zhuǎn)功能，非常不錯，需要的朋友參考下吧2017-09-09