如何使用 JQuery 或 Javascript 使用动态路径从 JSON 对象中删除答案

【问题标题】：How to delete from JSON Object using dynamic path using JQuery or Javascript如何使用 JQuery 或 Javascript 使用动态路径从 JSON 对象中删除
【发布时间】：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

标签： javascript jquery html css json

【解决方案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>

【讨论】：