如何在 JavaScript 对象中删除属性？

在本教程中，我们将了解几种从 JavaScript 对象中删除属性的方法。并比较它们以了解哪种方法适用于给定的上下文。

让我们继续讨论这个问题。

使用 delete 运算符

在这里，delete 运算符一次删除对象中的键。delete 运算符不会直接清除内存。

delete 关键字仅适用于对象。我们不能将其用于变量或函数。我们不应在预定义的 JavaScript 对象属性上使用 delete 关键字，因为它可能会导致错误。如果我们尝试访问已删除的属性，它将显示undefined。

delete 操作是可变的，因为它会修改实际的对象。但这是从对象中删除属性的正确方法。

用户可以按照以下语法使用此方法。

语法

//static property
delete object.property;

//dynamic 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”来优化删除过程。delete 操作比使用“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>

使用对象解构

这里的想法很简单。我们应该将对象解构到我们要删除的属性。然后将剩余的属性保存在另一个对象中。

对象解构是从对象中提取数据到新变量的过程。对象解构是一种不可变的方法，因为它不会更改实际的对象，而是创建一个新对象以获取所需的属性（除了要删除的属性）。

主要优点是此方法可以一次删除多个属性。

语法

//static property
const {prop, ...remainObj} = obj

//dynamic property
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 对象。

  • accumulator − 如果键小于累加器值，则键值成为下一个累加器。

  • key − 当前值 = 键。

示例

在此示例中，我们的对象是 pets。我们将仅从该对象中删除 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 函数，这是一个不错的选择。用户可以根据需要选择任何方法。

更新于：2022-09-06

2K+ 次浏览

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告