在 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