在 JavaScript 中从 JSON 对象中删除属性


一个JSON(JavaScript 对象表示法)对象总是用花括号 {} 括起来。值必须是有效的 JSON 数据类型,键必须是字符串。JSON 支持以下数据类型:数字、字符串、对象、布尔值、数组和空值。

键和值之间必须用冒号 (":") 分隔。逗号分隔每个键值对。以下是 JSON 对象的语法 -

JSONObject = {}

以下是 JavaScript 中 JSON 对象的基本声明 -

JSONObject = { 
   "name" : "Suriya",  
   "designation" : "Actor",  
   "State" : "Tamil Nadu", 
   "Recent_film" : "Vikram" 
};

输入输出场景

假设我们有一个 JSON 对象,其中包含键和值,并且执行了对该对象属性的删除操作。假设在下面的示例中,我们删除了名为“Recent_film”的属性。

Input = JSONObject = { 
   "name" : "Suriya",  
   "designation" : "Actor",  
   "State" : "Tamil Nadu", 
   "Recent_film" : "Vikram" 
}; 
Output = {"name" : "Suriya", "designation" : "Actor", State" : "Tamil Nadu"} 

我们可以使用点(“.”)表示法访问对象值。还可以使用方括号表示法([])。

示例

使用 Delete 运算符

Delete 运算符是删除对象属性的最简单方法。如果我们想要删除对象中的多个属性,我们需要多次使用此运算符。

在下面的示例中,我们创建了一个带有键和值的 JSON 对象。通过使用 delete 运算符,我们删除了对象中的name值。

<!DOCTYPE html> <html> <head> <title>Deleting property of an JSON object.</title> </head> <body> <p id="para"></p> <script> var Cricketer = { 'name': "Dhoni", 'role': "Keeper-batsmen", 'age': 41, 'bat': "Right", }; delete Cricketer.role; document.getElementById("para").innerHTML = Cricketer.name + " age" + " is " + Cricketer.role; </script> </body> </html>

示例

使用解构赋值

解构赋值是 JavaScript 表达式中的语法,它将数组中的值或对象中的属性扩展到不同的变量中。这不会更改原始对象和引用,而是会创建一个新的对象引用。

const numbers = { 
   'one' : 1, 
   'two' : 2, 
   'three' : 3 
};  
const {one, two, ...excluding} = numbers;  
console.log(JSON.stringify(excluding)); 
// output: '{"three":3}'  

在上面的代码片段中,我们使用了解构赋值并删除了属性onetwo

示例 2

在下面的示例中,我们删除了namebat属性。解构运算符将创建一个包含所有属性的新对象,除了被删除的值。由于这是一个不可变的操作,因此删除属性不会影响原始对象。

<!DOCTYPE html> <html> <head> <title>Deleting property of an JSON object.</title> </head> <body> <p id = "para"> </p> <script> var Cricketer = { 'name': 'Kohli', 'role': 'Batsmen', 'age': 34, 'bat' : 'Right', } const { name, bat, ...excluding } = Cricketer; document.getElementById("para").innerHTML ="The JSON object after deleting name and bat will be:" + JSON.stringify(excluding); </script> </body> </html>

示例

使用 reduce 方法

在下面的示例中,我们使用 reduce 方法删除了对象的特定属性。

<!DOCTYPE html> <html> <head> <title>Deleting property of an JSON object.</title> </head> <body> <p id = "para"> </p> <script> var Cricketer = { 'name': 'Kohli', 'role': 'Batsmen', 'age': 34, 'bat' : 'Right', } const exceptbat = Object.keys(Cricketer).reduce((acc, prop) => { if (prop !== 'bat') { acc[prop] = Cricketer[prop] } return acc }, {}) document.getElementById("para").innerHTML ="The JSON object after deleting name and bat will be:" + JSON.stringify(exceptbat); </script> </body> </html>

示例

使用 Reflect delete property

Reflect.deleteProperty() 方法就像delete运算符一样。此方法用于删除属性。

在下面的示例中,我们使用Reflect.deleteProperty()删除了对象属性,并将对象的“role”键作为参数传递给了此方法。

<!DOCTYPE html> <html> <head> <title>Deleting property of an JSON object.</title> </head> <body> <button onClick = "func()"> click to delete property</button> <p id="para"></p> <script> var Cricketer = { 'name': "Rohit sharma", 'role': "batsmen", 'age': 33, 'bat': "Right", }; function func(){ Reflect.deleteProperty(Cricketer, 'role'); document.getElementById("para").innerHTML = Cricketer.name + " role" + " is " + Cricketer.role; }; </script> </body> </html>

示例

使用 for-in 方法

在下面的示例中,我们创建了一个 JSON 对象并遍历了该对象。我们还创建了一个空对象,用于存储除已删除元素之外的对象属性。

<!DOCTYPE html> <html> <head> <title>Deleting property of an JSON object.</title> </head> <body> <button onClick = "func()"> Click me! </button> <p id="para"></p> <script> const Cricketer = { 'name': "Rohit sharma", 'role': "batsmen", 'age': 33, 'bat': "Right", }; function func(){ let newJSONobj = {} for (const prop in Cricketer) { if (prop !== 'age') { newJSONobj[prop] = Cricketer[prop] } } document.getElementById("para").innerHTML = "The properties after removing age will be: " + JSON.stringify(newJSONobj); }; </script> </body> </html>

更新于: 2022-09-23

6K+ 次查看

开启你的职业生涯

通过完成课程获得认证

开始学习
广告

© . All rights reserved.