在 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}'
在上面的代码片段中,我们使用了解构赋值并删除了属性one和two。
示例 2
在下面的示例中,我们删除了name和bat属性。解构运算符将创建一个包含所有属性的新对象,除了被删除的值。由于这是一个不可变的操作,因此删除属性不会影响原始对象。
<!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>
数据结构
网络
RDBMS
操作系统
Java
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP