如何使用 JQuery 或 Javascript 使用动态路径从 JSON 对象中删除
Posted
技术标签:
【中文标题】如何使用 JQuery 或 Javascript 使用动态路径从 JSON 对象中删除【英文标题】：How to delete from JSON Object using dynamic path using JQuery or Javascript 【发布时间】：2019-07-08 01:54:50 【问题描述】：我有一个 JSON 对象“person”，我需要删除一个键“age”，它应该作为参数传递给函数，如下面的示例所示。在函数内部，删除密钥的语句被添加为delete person+key;，但它不起作用。请建议以以下方式删除密钥的方法，因为我必须在“p”元素单击时动态删除密钥。
<!DOCTYPE html>
<html>
<head>
<script>
var person =
firstname: "John",
lastname: "Doe",
age: 50,
eyecolor: "blue"
;
function funToDelete(key)
delete person+key;
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.age + " years old.";
</script>
</head>
<body>
<p id="demo"></p>
<p onclick="funToDelete('.age')">Click me</p>
</body>
</html>
【问题讨论】：
使用delete person[key]。
不要将参数作为 '.age.而是只使用 'age' 并在删除时使用 delete person[key] (person['age'])
我在上面添加了一个简单的 JSON 示例。但在我的实际情况中，对象是复杂和动态的，所以我需要传递对象路径“.category[1].additionalinfo”（只是一个例子）来删除对象内部的一个元素
在调用函数写入时动态传递密钥，例如删除密钥delete person.key;，如果您传递想要打印的 person.firstname、person.age 等密钥，则将打印 undefined
【参考方案1】：
使用带有方括号表示法的delete 运算符：
const person =
firstname: "John",
lastname: "Doe",
age: 50,
eyecolor: "blue"
;
const key = 'age';
delete person[key];
console.log(person);【讨论】：
【参考方案2】：使用括号表示法[]:
delete person[key];
这样调用：
funToDelete("age");
演示：
var person =
firstname: "John",
lastname: "Doe",
age: 50,
eyecolor: "blue"
;
function funToDelete(key)
delete person[key];
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.age + " years old.";
<p id="demo"></p>
<p onclick="funToDelete('age')">Click me</p>注意 - 由于您要删除 age，因此上面显示的是 undefined。
【讨论】：
【参考方案3】：您应该使用 [] 运算符而不是 +。因为您想使用变量访问对象中的属性。代码应该是
delete person[key]
方括号表示法用于使用变量名称或表达式访问对象的属性。
<!DOCTYPE html>
<html>
<head>
<script>
var person =
firstname: "John",
lastname: "Doe",
age: 50,
eyecolor: "blue"
;
function funToDelete(key)
delete person[key]; // This is where the key gets evaluated to a sting
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.age + " years old.";
</script>
</head>
<body>
<p id="demo"></p>
<p onclick="funToDelete('age')">Click me</p>
</body>
</html>
【讨论】：
【参考方案4】：当您希望通过变量访问密钥时，请使用 Bracket Notation 。
你应该delete[key]只传递age作为参数而不是.key
var person =
firstname: "John",
lastname: "Doe",
age: 50,
eyecolor: "blue"
;
function funToDelete(key)
delete person[key];
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.age + " years old.";
<p id="demo"></p>
<p onclick="funToDelete('age')">Click me</p>【讨论】：
【参考方案5】：基于此OP 评论：
我在上面添加了一个简单的 JSON 示例。但在我的实际情况下，对象是复杂和动态的，所以我需要传递对象路径“.category[1].additionalinfo”（只是一个例子）来删除对象内部的一个元素
更通用的方法是通过key 路径，split() 传递dot 并使用reduce() 获取要删除的密钥：
var person =
firstname: "John",
lastname: "Doe",
age: 50,
eyecolor: "blue",
foo: bar: "something"
;
function funToDelete(pathToKey)
let keys = pathToKey.split(".");
let toDelete = keys.reduce((acc, key, idx, arr) =>
if (idx < arr.length - 1) acc = acc[key];
return acc;
, person);
delete toDelete[keys[keys.length - 1]];
console.log(person);
<p id="demo"></p>
<p onclick="funToDelete('foo.bar')">Click me</p>【讨论】：
以上是关于如何使用 JQuery 或 Javascript 使用动态路径从 JSON 对象中删除的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 JavaScript 或 jQuery 更改数组内对象的值？
如何使用 jquery 或 javascript 删除索引处的行？ [复制]
如何使用 jQuery 或 JavaScript 设置底边距
如何使用 PHP 或 JavaScript/jQuery 禁用地址栏？