在 JavaScript 中從物件中刪除屬性
Moataz Farid
2023年10月12日
-
在 JavaScript 中使用
delete
運算子從物件中刪除一個屬性 -
在 JavaScript 中使用
underscore
庫刪除物件的屬性 -
使用
spread
語法從 JavaScript ECMAScript 6 中的物件中刪除屬性
本教程將解釋我們如何通過多種方法從 JavaScript 物件中刪除一個屬性。我們將演示使用 ECMAScript 6 中的 delete
運算子、重賦值機制、underscore
庫和 spread
語法。
在 JavaScript 中使用 delete
運算子從物件中刪除一個屬性
刪除任何物件的任何屬性的一種方法是 delete
運算子。這個運算子將屬性從物件中刪除。例如,我們有一個物件 myObject
,其屬性為 id
、subject
和 grade
,我們需要刪除 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"}