Angular 角度8-按值类型对递归树组件进行排序

鉴于以下目标：

const数据={
“根”：{
“标题”：“形状”，
“形状”：{…}，
“描述”：“各种几何奇才”
}
}

我需要找到一种方法对该对象进行排序，使带有对象的键显示在带有字符串的键的上方，如下图所示：

const数据={
“根”：{
“形状”：{…}，
“标题”：“形状”，
“描述”：“各种几何奇才”
}
}

我尝试的是

sort（）

函数：

const sorted=Object.values（root.sort）（（v）=>typeof v==='Object'？-1:1）

虽然这样可以在保持根对象原始的同时对值进行排序，但在这个新的

sorted

数组中会丢失键

[
{...}, 
“形状”，
“各种几何奇才”
]

…虽然它必须作为对象保留，因为键由递归树组件使用，但这样的排序是没有意义的：

{{key}}

由于组件仍将基于

根的结构进行渲染

：

↓ root
    |- title
    |- > shapes
    |- description

所需的结构如下所示：

↓ root
    |- > shapes
    |- title
    |- description

因此，在单个问题中定义问题

---

我如何能够按照键值的类型对对象进行排序，以便呈现递归组件，在带字符串的项之前显示带对象的项？

通过使用

对象。条目

和reduce，您应该能够获得所需的结果：

const数据={
“根”：{
“形状”：{/*…*/}，
“标题”：“形状”，
“描述”：“各种几何奇才”
}
}
const sorted=Object.entries（data.root）
.sort（（[key，v]）=>typeof v==='object'？-1:1）
.reduce（（newObj[key，v]）=>（{…newObj[key]：v}），{}）
log（已排序）

一个不那么优雅但快速的解决方案是

    const data = {
      "root": {
           "title": "Shapes",
           "shapes": { a: 'name' },
           "description": "All sorts of geometrical whizz"
      }
  };

  const object = {};

  Object.values(data.root).forEach((a, i) => {
    // console.log(a);
    if (typeof(a) === 'object') {
      object[Object.keys(data.root)[i]] = a;
    }
  });

  Object.values(data.root).forEach((a, i) => {
    // console.log(a);
    if (!(typeof(a) === 'object')) {
      object[Object.keys(data.root)[i]] = a;
    }
  });
  console.log(object);

简短一点的回答

let data = {
  "root": {
    "title": "Shapes",
    "shapes": { key: 'value' },
    "description": "All sorts of geometrical whizz"
  }
};

/*
 * looping through your `root` object's keys
 * if the value of the key is object then assign the whole `data.root` object to a new object which starts with
 * that key-value pair
 */
Object.keys(data.root).map(key => {
  if ((typeof data.root[key]) === "object")
    data.root = Object.assign({ [key]: data.root[key] }, data.root);
});

---

这还将更改字符串属性顺序。我认为您应该在排序中返回“0”而不是“1”。使用

1

时，确实会将字符串的顺序更改为降序，但将其更改为

0

会使排序无效。将

-1

替换为

0

并四处移动时，也会出现相同的效果。话虽如此，我确实尝试用reduce链接排序，但在生成的

newObj

对象中创建关键点时遇到了困难，Teddy Sterne的示例适合作为拼图的最后一块。

.reduce（）

函数功能非常强大，但确实需要一些培训才能使用！为了进一步说明字符串顺序，在应用程序（typescript）中使用

运行semi-oneliner-1:1

按降序（从上到下-从上到下）对字符串进行排序，但在节点REPL中，顺序不变。有趣！