如何使用RxJ执行嵌套的reduce操作?

FerdTurgusen

我正在尝试将一系列文件路径变形为Angular Material Tree组件的嵌套递归结构结构必须是这样的:

interface FileTreeNode {
    name: string;
    children?: FileTreeNode[];
}

因此,诸如这样的文件路径列表['path/to/file/01.txt', 'path/to/file/02.txt', 'another/to/file/03.txt']将转换为:

[
    {name: 'path', children: [
        {name: 'to', children: [
            {name: 'file', children: [
                {name: '01.txt'}, {name: '02.txt'}
                ]
            }]
        }]
    },
    {name: 'another', children: [
        {name: 'to', children: [
            {name: 'file', children: [
                {name: '03.txt'}
                ]
            }]
        }]
    }
]

我在这里看到了一个很好的答案,该问题使用了内置Array.reduce()方法,但是我想使用RxJs运算符来实现。

这是我要复制的代码:

var paths = ["path/to/file1.doc", "path/to/file2.doc", "foo/bar.doc"],
    result = [];
    
paths.reduce((r, path) => {
    path.split('/').reduce((o, name) => {
        var temp = (o.children = o.children || []).find(q => q.name === name);
        if (!temp) o.children.push(temp = { name });
        return temp;
    }, r);
    return r;
}, { children: result });

console.log(result);

这是我到目前为止的内容:

reduce((acc, curr) => {
    return curr.split('/').reduce((obj, name) => {
        let temp = (obj.children != null ? obj.children : obj.children = []).find(node => node.name === name);
        if (temp == null) {
            obj.children.push(temp = {name});
        }
        return temp;
    }, acc);
}, {children: []} as FileTreeNode),

但这仅返回可观察到的最后一个节点(例如{name: 03.txt})。我想传递的是acc上述代码所做的最终值我还想仅使用RxJs运算符来完成此操作,而不是Array.reduce()尽可能地依靠内部Js函数。

谢谢!

欧文·凯尔文(Owen Kelvin)

使用reduce的方式完全相同,不同之处在于您需要将数组转换为流。您可以使用from运算符

  paths = ["path/to/file1.doc", "path/to/file2.doc", "foo/bar.doc"];
  paths$ = from(this.paths).pipe(
    reduce(
      (r, path) => {
        path.split("/").reduce((o, name) => {
          var temp = (o.children = o.children || []).find(q => q.name === name);
          if (!temp) o.children.push((temp = { name }));
          return temp;
        }, r);
        return r;
      },
      { children: [] }
    )
  );

这个演示

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章