Question

我输入的数据如下：

<div class>

现在，我想像这样将其转换为treeview数组：

['Level 1/Level 2/Level 3/ Level4a',
'Level 1/Level 2/Level 3/ Level4b',
'Level 1/Level 2/Level 3/ Level4c',
'Level 1/Level 2/Level 3/ Level4a',
'Level 1c/Level 2d/Level 3b/ Level4d',
'Level 1c/Level 2d/Level 3b/ Level4e',
'Level 1c/Level 2d/Level 3b/ Level4f']

有一种方法可以迭代，但是我想它非常复杂。最佳的最佳方式是什么？

Answer 1

您可以获取最后插入的对象的数组，并检查名称是否不等于最后一个。如果是这样，请添加一个新对象。

var data = ['Level 1/Level 2/Level 3/Level4a', 'Level 1/Level 2/Level 3/Level4b', 'Level 1/Level 2/Level 3/Level4c', 'Level 1/Level 2/Level 3/Level4a', 'Level 1c/Level 2d/Level 3b/Level4d', 'Level 1c/Level 2d/Level 3b/Level4e', 'Level 1c/Level 2d/Level 3b/Level4f'],
    tree = [],
    levels = [{ children: tree }];

data.forEach(s => s.split('/').forEach((name, i) => {
    if (!levels[i + 1] || levels[i + 1].name !== name) {
        levels[i].children = levels[i].children || [];
        levels[i].children.push(levels[i + 1] = { name });
    }
}));

console.log(tree);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

您可以使用2个reduce。第一个是通过数组循环。第二个reduce是通过split()字符串循环。使用find()检查数组中是否存在元素

var arr = ['Level 1/Level 2/Level 3/ Level4a', 'Level 1/Level 2/Level 3/ Level4b', 'Level 1/Level 2/Level 3/ Level4c', 'Level 1/Level 2/Level 3/ Level4a', 'Level 1c/Level 2/Level 3/ Level4d', 'Level 1c/Level 2/Level 3/ Level4e', 'Level 1c/Level 2/Level 3/ Level4f'];

var result = arr.reduce((c, v) => {
  v.split('/').reduce((a, o, i) => {
    if (i === 0) var p = a;
    else var p = a.children = a.children || [];

    let f = p.find(x => x.name === o.trim());
    if (!f) {
      f = {name: o.trim()};
      p.push(f);
    }

    return f;
  }, c);

  return c;
}, []);


console.log(result);

到树视图的路径名字符串数组

2 个答案: