在 JavaScript 中從物件中刪除屬性

Moataz Farid 2023年1月30日 2020年12月19日
  1. 在 JavaScript 中使用 delete 運算子從物件中刪除一個屬性
  2. 在 JavaScript 中使用 underscore 庫刪除物件的屬性
  3. 使用 spread 語法從 JavaScript ECMAScript 6 中的物件中刪除屬性
在 JavaScript 中從物件中刪除屬性

本教程將解釋我們如何通過多種方法從 JavaScript 物件中刪除一個屬性。我們將演示使用 ECMAScript 6 中的 delete 運算子、重賦值機制、underscore 庫和 spread 語法。

在 JavaScript 中使用 delete 運算子從物件中刪除一個屬性

刪除任何物件的任何屬性的一種方法是 delete 運算子。這個運算子將屬性從物件中刪除。例如,我們有一個物件 myObject,其屬性為 idsubjectgrade,我們需要刪除 grade 屬性。

var myObject = {
    "id":"12345",
    "subject":"programming",
    "grade":"A"
};

console.log("Original object:",myObject);
//delete the grade property 
delete myObject.grade
console.log("Updated object: ",myObject)

輸出:

Original object: {id: "12345", subject: "programming", grade: "A"}
Updated object:  {id: "12345", subject: "programming"}

在 JavaScript 中使用 underscore 庫刪除物件的屬性

在 JavaScript 中,有一個庫可以幫助從物件中刪除一個屬性,但又不更新原始物件,這個庫就是 underscore。該庫提供了兩個重要的函式 _.pick()_.omit()

_.omit() 函式可以從物件中刪除給定的屬性,並返回更新後的副本。

var myObject = {
    "id":"12345",
    "subject":"programming",
    "grade":"A"
};

console.log("Original object:",myObject);

var updatedObject  = _.omit(myObject , "grade")
console.log("Updated object with omit() : ",updatedObject)
console.log("Original object after update:",myObject);

輸出:

Original object: {id: "12345", subject: "programming", grade: "A"}
Updated object with omit() :  {id: "12345", subject: "programming"}
Original object after update: {id: "12345", subject: "programming", grade: "A"}

_.pick() 函式只包含物件的給定屬性,而忽略所有其他屬性,並從該物件返回更新後的副本。

var myObject = {
    "id":"12345",
    "subject":"programming",
    "grade":"A"
};

console.log("Original object:",myObject);

var updatedObject  = _.pick(myObject , "id" ,"subject" )
console.log("Updated object with pick() : ",updatedObject)
console.log("Original object after update:",myObject);

輸出:

Original object: {id: "12345", subject: "programming", grade: "A"}
Updated object with pick() :  {id: "12345", subject: "programming"}
Original object after update: {id: "12345", subject: "programming", grade: "A"}

我們可以從這裡匯入庫。

使用 spread 語法從 JavaScript ECMAScript 6 中的物件中刪除屬性

ECMAScript 6 中的 JavaScript spread 語法提供了一種非常優雅的方法,可以在不改變原物件的情況下,從 JavaScript 物件中刪除給定的屬性,但返回新更新的物件。

當我們使用 spread 語法時,它將看起來就像我們把原始物件分成兩個變數。其中一個將是刪除的屬性。另一個變數將持有原始物件的副本,但不包括那個移除的物件。

var myObject = {
    "id":"12345",
    "subject":"programming",
    "grade":"A"
};

console.log("Original object:",myObject);

var {grade , ...myUpdatedObject} = myObject;

console.log("The removed 'grade' property : ",grade)
console.log("Updated object : ",myUpdatedObject)
console.log("Original object after update:",myObject);

輸出:

Original object: {id: "12345", subject: "programming", grade: "A"}
The removed 'grade' property :  A
Updated object :  {id: "12345", subject: "programming"}
Original object after update: {id: "12345", subject: "programming", grade: "A"}

相關文章 - JavaScript Object