如何更改树视图中的键？

Question

我有一个可能的无限树视图数组：

type Tree = {
  id: number;
  name: string;
  email: string;
  children: Tree[];
};

const tree: Tree = [
  {
    id: 1,
    name: 'Truck',
    email: '@mail',
    children: [
      {
        id: 11,
        name: 'Car',
        email: '@mail',
        children: [],
      },
    ],
  },
  {
    id: 2,
    name: 'Bus',
    email: '@mail',
    children: [],
  },
];

我想对这个数组做 3 件事。

将属性键 'id' 更改为 'userId'
将 id 类型从数字更改为字符串
删除电子邮件属性

因此输出将匹配此类型：

type NewTree = {
  userId: string;
  name: string;
  children: NewTree[];
};

// output of the new tree
const newTree: NewTree = [
  {
    userId: '1',
    name: 'Truck',
    children: [
      {
        userId: '11',
        name: 'Car',
        children: [],
      },
    ],
  },
  {
    userId: '2',
    name: 'Bus'
    children: [],
  },
];

这是我目前拥有的

const restructuredTree = (tree: any[]) => {
  for (const node in tree) {
    const { id: userId, name, children } = tree[node];
    restructuredTree(children);
    tree[node] = { userId, name, children };
  }
};

不确定在哪里做 return 语句，当我 return “tree[node] = { userId, name, children };”它只改变了一层深度。

Answer 1

您可以使用 .map() 以及解构来提取所需的属性（id、name、children）。对于每个对象，您可以映射到一个新对象，您可以通过递归地重新调用您的函数来执行相同的解构 + 映射逻辑，将子键设置为当前 children 数组的重新映射版本。最终，您将到达一个对象，其中子键是一个空数组 []，因此不会调用映射回调，这意味着 getNewTree() 也不会被调用 - 这充当您将结束递归的基本情况/终止条件：

const tree = [ { id: 1, name: 'Truck', email: '@mail', children: [ { id: 11, name: 'Car', email: '@mail', children: [], }, ], }, { id: 2, name: 'Bus', email: '@mail', children: [], }, ];

const getNewTree = (tree) => tree.map(({id, name, children}) => ({
  userId: String(id),
  name,
  children: getNewTree(children)
})); 
console.log(getNewTree(tree));

如何更改树视图中的键？

How to change a key in tree-view?

javascript

typescript

recursion

tree

treeview