如何从 JavaScript 对象中删除属性?
在本教程中，我们将介绍几种从 JavaScript 对象中删除属性的方法。并比较它们以了解在给定上下文中哪种方法更合适。
让我们继续讨论这个问题。
使用 delete 运算符
在这里，delete 运算符一次从对象中删除一个键。delete 运算符不会直接清除内存。
delete 关键字仅适用于对象。我们不能将它用于变量或函数。我们不应该在预定义的 JavaScript 对象属性上使用 delete 关键字，因为它可能会出错。如果我们尝试访问它，deleted 属性将显示 undefined。
delete 操作是可变的，因为它会修改实际对象。但这是从对象中删除属性的正确方法。
用户可以按照以下语法使用此方法。
语法
//静态属性 delete object.property; //动态属性 delete object[property];
第一种方法是在属性已知时使用。第二种是在属性是运行时值时使用。
属性
object − 对象的名称。
property − 要删除的属性的名称。
示例
在此程序中，我们有一个名为 employee 的 JavaScript 对象。我们使用 delete 关键字从此对象中删除 age 属性。
<html> <body> <h3>Remove a property from a JavaScript object using the<i> delete </i>keyword </h3> <p id="result1"> </p> <p id="result2"> </p> <script> var employee = { firstname: "John", lastname: "Eagan", age: 20 }; var remPropData = "Object before delete <br>" + JSON.stringify(employee); document.getElementById("result1").innerHTML = remPropData; delete employee.age; remPropData = "Object after deleting age <br>" + JSON.stringify(employee); document.getElementById("result2").innerHTML = remPropData; </script> </body> </html>
通过将属性值设置为"undefined"
当我们使用大量循环时，可以选择此选项。通过将属性值设置为"undefined"，我们使删除过程达到最佳状态。删除操作比使用"undefined"的简单赋值慢 50 倍。
实际上，属性并未被删除。它只是被清除了。
语法
object.property = undefined;
在这里，我们将 undefined 分配给对象的属性。
示例
在此程序中，我们的对象名称为 color。使用上面的赋值语法，我们从 color 对象中删除 place 属性。
<html> <body> <h3>Remove a property from a JavaScript object</h3> <p>setting the property value to <i>undefined</i></p> <p id="result1"> </p> <p id="result2"> </p> <script> const color = { value: "blue", place: "sky" } var setPropData = "Before delete<br>" + JSON.stringify(color); document.getElementById("result1").innerHTML = setPropData; color.place = undefined; setPropData = "After delete color.place - " + color.place + "<br>" + JSON.stringify(color); document.getElementById("result2").innerHTML = setPropData; </script> </body> </html>
使用对象解构
这里的想法很简单。我们应该将对象解构为要删除的属性。然后将剩余的属性保存在另一个对象中。
对象解构是从对象中提取数据到新变量的过程。对象解构是一种不可变方法，因为它不会更改实际对象，而是创建另一个对象来获取除要删除的属性之外的所需属性。
主要优点是此方法一次可以删除多个属性。
语法
//静态属性
const {prop, ...remainObj} = obj
//动态属性
const name = 'prop';
const {[name]: removedProperty, ...remainObj} = obj
这里，当我们知道属性名称时，使用第一种语法。第二种语法用于属性名称动态变化的情况。
参数
prop − 我们需要删除的属性。
remainObj − 删除特定属性后的对象。
obj − 主对象。
name − 运行时使用属性名称的变量。
removedProperty − 语法中的内置关键字
示例
在此示例中，我们有 person 对象。我们使用扩展运算符删除 position 和属性。
<html> <body> <h3>Remove a property from a JavaScript object</h3> <p>Using object destructuring with spread operator</i></p> <p id="result1">Object before delete:<br></p> <p id="result2">Object after deleting property- position<br></p> <script> const person = { name: 'John', position: 'Manager', exp: 6 }; var sprPropData = JSON.stringify(person); document.getElementById("result1").innerHTML += sprPropData; const {position, ...personTemp} = person; sprPropData = JSON.stringify(personTemp); document.getElementById("result2").innerHTML += sprPropData; </script> </body> </html>
使用 reduce() 方法
此处，reduce() 是一个内置数组函数。此函数的输入是一个集合，而归约函数是一个参数。
该方法循环遍历所有元素并修改累加器，累加器的作用类似于新对象。
语法
const newObj = Object.keys(actualObj).reduce((accumulator, key) => {
if(key!=="property"){
accumulator[key] = actualObj[key]
}
return accumulator;
}, {})
此处，累加器归约函数逻辑用于删除属性。
属性
actualObj − JSON 对象。
累加器 − 如果键小于累加器值，键值将成为下一个累加器。
key − 当前值 = 键。
示例
在此示例中，我们的对象是宠物。我们将从此对象中单独删除 gift 属性。reduce 方法累加器和键值比较在每个循环中发生。最后，我们得到没有 gift 属性的对象。
<html> <body> <h3>Remove a property from a JavaScript object using the <i> reduce()</i>method</h3> <p id="result1">Object before delete:<br> <br></p> <p id="result2">Object after deleting property <br><br></p> <script> const pets = { name: "Tomy", age: 3, gift: "Love" } var reducPropData = JSON.stringify(pets); document.getElementById("result1").innerHTML += reducPropData; const newPet = Object.keys(pets).reduce((accumulator, key) => { // Copy all except gift property if (key !== "gift") { accumulator[key] = pets[key] } return accumulator; }, {}) reducPropData = JSON.stringify(newPet); document.getElementById("result2").innerHTML += reducPropData; </script> </body> </html>
本教程帮助我们学习如何删除 JavaScript 对象的属性。
delete 方法很简单。将 undefined 分配给属性值是一种更糟糕的方法。解构语法是一种好方法，因为它不会修改实际对象。
最后一种方法是 reduce 函数，这是一个不错的选择。用户可以根据需要选择任何方法。
