如何根据物体上的键绘制地图？

Question

如果键在JavaScript上，我试图映射对象值并添加文本。我们的目标是：

{
    "id": "n27",
    "name": "Thomas More",
    "className": "level-1",
    "children": [
        {
            "id": "n1",
            "name": "Rousseau",
            "className": "level-2",
            "children": [
                {
                    "id": "n2",
                    "name": "Machiavelli",
                    "className": "level-3",
                    "children": [
                        {
                            "id": "n9",
                            "name": "Edison, Thomas",
                            "className": "level-4"
                        }
                    ]
                }
            ]
        },
        {
            "id": "n3",
            "name": "Einstein",
            "className": "level-2",
            "children": [
                {
                    "id": "n10",
                    "name": "Arf, Cahit",
                    "className": "level-3",
                    "children": [
                        {
                            "id": "n15",
                            "name": "Rawls, John",
                            "className": "level-4"
                        }
                    ]
                },
                {
                    "id": "n12",
                    "name": "Smith, Adam",
                    "className": "level-3",
                    "children": [
                        {
                            "id": "n11",
                            "name": "Kant, Immanuel",
                            "className": "level-4"
                        }
                    ]
                }
            ]
        },
        {
            "id": "n60",
            "name": "Turing, Alan",
            "className": "level-2"
        }
    ]
}

我想将" YES"添加到他们的className中。所以新对象应该如下所示：

{
    "id": "n27",
    "name": "Thomas More",
    "className": "level-1 YES",
    "children": [
        {
            "id": "n1",
            "name": "Rousseau",
            "className": "level-2 YES",
            "children": [
                {
                    "id": "n2",
                    "name": "Machiavelli",
                    "className": "level-3 YES",
                    "children": [
                        {
                            "id": "n9",
                            "name": "Edison, Thomas",
                            "className": "level-4 YES"
                        }
                    ]
                }
            ]
        },
        {
            "id": "n3",
            "name": "Einstein",
            "className": "level-2 YES",
            "children": [
                {
                    "id": "n10",
                    "name": "Arf, Cahit",
                    "className": "level-3 YES",
                    "children": [
                        {
                            "id": "n15",
                            "name": "Rawls, John",
                            "className": "level-4 YES"
                        }
                    ]
                },
                {
                    "id": "n12",
                    "name": "Smith, Adam",
                    "className": "level-3 YES",
                    "children": [
                        {
                            "id": "n11",
                            "name": "Kant, Immanuel",
                            "className": "level-4 YES"
                        }
                    ]
                }
            ]
        },
        {
            "id": "n60",
            "name": "Turing, Alan",
            "className": "level-2 YES"
        }
    ]
}

我试过了，但它增加了所有的钥匙：

const addToClassName = (datasource, fn) => {
    return Object.fromEntries(Object
        .entries(datasource, fn)
        .map(([k, v]) => [k, v && v.children != undefined && v.children.length > 0 ? addToClassName(v.children, fn) : fn(v)])
    );
}

let res = addToClassName(obj, v => v + ' YEP');

我该怎么做呢？

Answer 1

您不需要使用Object.fromEntries()，而是让您的函数返回一个新对象，并根据fn的返回值转换一个className。然后，可以将对象上的children:键设置为子数组中所有对象的映射版本。映射时，可以将每个子函数传递到对addToClassName()函数的递归调用中。可以将children键有条件地添加到输出对象中，但检查它是否存在(使用children &&)，然后使用扩展语法...传播结果。

​

const data = { "id": "n27", "name": "Thomas More", "className": "level-1", "children": [ { "id": "n1", "name": "Rousseau", "className": "level-2", "children": [ { "id": "n2", "name": "Machiavelli", "className": "level-3", "children": [ { "id": "n9", "name": "Edison, Thomas", "className": "level-4" } ] } ] }, { "id": "n3", "name": "Einstein", "className": "level-2", "children": [ { "id": "n10", "name": "Arf, Cahit", "className": "level-3", "children": [ { "id": "n15", "name": "Rawls, John", "className": "level-4" } ] }, { "id": "n12", "name": "Smith, Adam", "className": "level-3", "children": [ { "id": "n11", "name": "Kant, Immanuel", "className": "level-4" } ] } ] }, { "id": "n60", "name": "Turing, Alan", "className": "level-2" } ] };
const addToClassName = (obj, fn) => ({
  ...obj, 
  className: fn(obj.className), 
  ...(obj.children && {children: obj.children.map(child => addToClassName(child, fn))})
});

console.log(addToClassName(data, v => v + " YES"));

​

Answer 2

如果可以更改当前的obj对象，则可以使用递归实现

function addClass(obj) {
  obj.className += " YES";
  obj.children && obj.children.forEach(addClass);
}

​

const obj = {
  id: "n27",
  name: "Thomas More",
  className: "level-1",
  children: [
    {
      id: "n1",
      name: "Rousseau",
      className: "level-2",
      children: [
        {
          id: "n2",
          name: "Machiavelli",
          className: "level-3",
          children: [
            {
              id: "n9",
              name: "Edison, Thomas",
              className: "level-4",
            },
          ],
        },
      ],
    },
    {
      id: "n3",
      name: "Einstein",
      className: "level-2",
      children: [
        {
          id: "n10",
          name: "Arf, Cahit",
          className: "level-3",
          children: [
            {
              id: "n15",
              name: "Rawls, John",
              className: "level-4",
            },
          ],
        },
        {
          id: "n12",
          name: "Smith, Adam",
          className: "level-3",
          children: [
            {
              id: "n11",
              name: "Kant, Immanuel",
              className: "level-4",
            },
          ],
        },
      ],
    },
    {
      id: "n60",
      name: "Turing, Alan",
      className: "level-2",
    },
  ],
};

function addClass(obj) {
  obj.className += " YES";
  obj.children && obj.children.forEach(addClass);
}

addClass(obj);
console.log(obj);

​

Answer 3

如果你不介意的话，你可以使用。

const _ = require('lodash');
const data = { "id": "n27", "name": "Thomas More", "className": "level-1", "children": [ { "id": "n1", "name": "Rousseau", "className": "level-2", "children": [ { "id": "n2", "name": "Machiavelli", "className": "level-3", "children": [ { "id": "n9", "name": "Edison, Thomas", "className": "level-4" } ] } ] }, { "id": "n3", "name": "Einstein", "className": "level-2", "children": [ { "id": "n10", "name": "Arf, Cahit", "className": "level-3", "children": [ { "id": "n15", "name": "Rawls, John", "className": "level-4" } ] }, { "id": "n12", "name": "Smith, Adam", "className": "level-3", "children": [ { "id": "n11", "name": "Kant, Immanuel", "className": "level-4" } ] } ] }, { "id": "n60", "name": "Turing, Alan", "className": "level-2" } ] };

const newData= _.cloneDeepWith(data, (val, key) => (
  (key === 'className') ? `${val} YES` : _.noop()
));

console.log(newData);
// {
//   id: 'n27',
//   name: 'Thomas More',
//   className: 'level-1 YES',
// ...
// }