JavaScript >> Javascript 文檔 >  >> Tags >> object

JavaScript:從對像中刪除屬性

簡介

JavaScript 中的對像是 key-value 的集合 對。這些鍵值對之一稱為對象property .屬性的鍵和值都可以是任何數據類型——數字、字符串、數組、對像等。

例如:

const dog = {
    name: "Sandy",
    age: 3,
    emoji: "🐶"
}

這裡,name: "Sandy" , age: 3 , 和 emoji: "🐶" 是狗對象的屬性。

在本文中,我們將介紹幾種從 Object 中刪除屬性的方法,並進行比較以了解哪種方法適合給定的上下文。

從對像中刪除屬性

刪除 運算符

從對像中刪除屬性的語義正確方法是 delete 操作員。讓我們看看它的實際效果:

const student = {
    name: "Jane",
    age: 16,
    score: {
        maths: 95,
        science: 90
    }
}

// Deleting a property from an object
delete student.age
delete student["score"]

console.log(student) // {name: "Jane"}

在上面的例子中,delete 運算符用於刪除 namescore student 的屬性 對象。

嘗試訪問任何已刪除的屬性將返回 undefined

console.log(student.age) // undefined

此外,delete 運算符返回一個布爾值,表示刪除是否成功:

if (delete student.age) {
    console.log("Removed 'age' property from student");
} else {
    console.log("Failed to remove 'age' property, perhaps it doesn't exist?");
}

如果我們運行這段代碼,由於屬性已經被刪除,我們會看到:

Failed to remove 'age' property, perhaps it doesn't exist?

沒有屬性的新對象

如果我們不想就地修改一個對象,但又想要一個沒有特定屬性的版本,我們可以生成另一個具有所有相同屬性但只有一個屬性的對象。

如果我們知道要刪除的屬性的名稱,我們可以使用對象 destructuring 將對象解壓縮成兩部分:

  1. 我們要移除的屬性
  2. 代表對像其餘部分的對象
const car = {
    brand: "Ford",
    color: "blue",
    yearOfManufacturing: 2019
}

const {yearOfManufacturing, ...rest} = car;

console.log(rest); // {brand: "Ford", color: "blue"}

免費電子書:Git Essentials

查看我們的 Git 學習實踐指南,其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它!

但是,如果我們不知道要刪除的屬性的確切名稱,我們需要創建一個過濾器來檢查屬性是否符合刪除條件。

例如,讓我們刪除所有具有數值的屬性:

const developer = {
  name : "Fred",
  dailyCoffeIntake : 2,
  favoriteLanguage : "Haskell",
  age : 27
};

const keysToKeep = Object.keys(developer).filter(
  (key)=> {
    return !Number.isInteger(developer[key])
});

const newDeveloper = {};
keysToKeep.forEach((key)=>{
  newDeveloper[key] = developer[key]
});

console.log(newDeveloper); // {name: "Fred", favoriteLanguage: "Haskell"}

reduce() 功能

或者我們可以使用 reduce() 方法,這是一個內置的數組方法,它接受一個集合和一個歸約函數作為參數。

然後該函數遍歷集合中的所有元素並修改累加器(您可以將其視為每個步驟的臨時結果)並返回它。讓我們看看這個方法的實際效果:

const dog = {
    name: "Sandy",
    age: 3,
    emoji: "🐶"
}

const newDog = Object.keys(dog).reduce((accumulator, key) => {
    // Copy all except emoji
    if(key !== "emoji"){
        accumulator[key] = dog[key]
    }
    return accumulator
}, {})

console.log(newDog) // {name: "Sandy", age: 3}

結論

在本文中,我們了解瞭如何通過幾種方式從對像中刪除屬性。我們已經看到使用 delete 將改變對象。所以,我們討論了幾種方法 - ...rest 語法和 reduce() 方法,從對像中刪除屬性而不改變它。


Tutorial JavaScript 教程
  1. 首次前往 ng-conf 並訪問美國

  2. Angular Dart 路由器 - 配置 LocationStrategy

  3. 基於角色的訪問控制 (RBAC) 和 React 應用程序

  4. GitHubs 內置新功能:在 Visual Studio Code 中快速打開任何存儲庫

  5. 在 SvelteKit 中更改查詢參數,無需頁面重新加載或導航

  6. 使用 React 嵌入 Google 日曆

  7. 增量間隔 - JS

  1. 為什麼使用了 await 卻執行了函數?

  2. 如何在 React js 應用程序中為 seo 和社交共享動態添加元標記

  3. Javascript:超越 Console.log()

  4. 網格顏色#CodePenChallenge

  5. JavaScript 映射最大值 |示例代碼

  6. Angular 安全 - 禁用內聯關鍵 CSS

  7. 對數組對象進行分組和求和

  1. React 面試問題:在瀏覽器中渲染了什麼,一個組件還是一個元素?

  2. 使用 jQuery 捕獲垂直滾動百分比

  3. 使用 TailwindCSS 創建儀表板 - 添加 Storyblok

  4. 5個你可能不知道的非常有用的javascript方法