Javascript 基于字符串值6的嵌套分组依据

假设我有一个字符串数组，其值如下-

animal
animal.mammal
animal.bird
animal.reptile
animal.mammal.human
animal.mammal.horse
animal.bird.crow
animal.reptile.snake

当我必须显示这个数组时，我想这样显示它-

-animal
  -animal.mammal
    -animal.mammal.human
    -animal.mammal.horse
  -animal.bird
    -animal.bird.crow
  -animal.reptile
    -animal.reptile.snake

我的方法应该是什么？我应该使用分组方式或筛选器还是什么？

---

我使用的是angular 6和material UI。

我已经开始了解您需要什么：

const groups = arr => {
    const res = [];
    arr.forEach(v => {
        let current = res
        const splits = v.split('.');
        splits.forEach(s => {
            if (current[s] === undefined) {
                current[s] = [];
            }
            current = current[s];
        });
        current.push(v);
    }
    return res;

 groups(yourArrayHere);

输入：

const arr = ['animal', 'animal.mammal', 'animal.mammal.human'];

输出：

[
   'animal': [
       0: 'animal',
       'animal.mammal': [
           0: 'animal.mammal.human'
       ]
   ]
]

编辑：

您还可以使用reduce语句，它也可以很好地工作：）

---

我有一个你需要的开始：

const groups = arr => {
    const res = [];
    arr.forEach(v => {
        let current = res
        const splits = v.split('.');
        splits.forEach(s => {
            if (current[s] === undefined) {
                current[s] = [];
            }
            current = current[s];
        });
        current.push(v);
    }
    return res;

 groups(yourArrayHere);

输入：

const arr = ['animal', 'animal.mammal', 'animal.mammal.human'];

输出：

[
   'animal': [
       0: 'animal',
       'animal.mammal': [
           0: 'animal.mammal.human'
       ]
   ]
]

编辑：

您还可以使用reduce语句，它也可以很好地工作：）

---

您必须分组，但不确定angular是否提供任何内置的分组。你可以创建一个自定义的，但你能不能再亮一点？使用

ngfor

循环以在html上显示，发布你的输入JSONY你必须分组，但不确定angular是否提供任何内置的。你可以创建一个自定义的，但你能不能再亮一点？使用

ngfor

循环，以便在html上显示，发布你的输入JSON