如何在Javascript中将路径数组转换为对象？ [复制]

Question

我有一个路径数组：

const paths = [
    "/path/to/first",
    "/path/to/second",
    "/path/to/third",
    "/path/from/first",
    "/path/from/second",
    "/users/bill",
    "/users/john"
];

我想将其转换为这种形式的 javascript 对象：

{
    path: {
        to: {
            first,
            second,
            third
        },
        from: {
            first,
            second
        }
    },
    users: {
        bill,
        john
    }
}

我将如何使用纯 javascript（不是 jQuery，而不是使用 JSON.parse 或其他快捷方式）来做到这一点。

如有必要，端点可以是指向“null”的键：值对，例如：

user: {
     bill: null,
     john: null
}

我希望有一个非递归的解决方案，但如果这通过递归明显更简单，那没关系！

Answer 1

您应该使用分隔符/ 分割字符串，这应该会为数组中的第一个路径生成一个类似['', 'path', 'to', 'first'] 的数组。那么它就像检查path是否在数组中一样简单，如果是，则to在数组中，如果是，则将first添加到obj.path.to。

类似的东西（这可以重构更多，这是第 0 次尝试）

const obj = {
  path: {
    to: {
    },
    from: {
    }
  },
  users: {
  }
}
for (let path of paths) {
  const pathArr = path.split('/');
  if (pathArr.includes('path') && pathArr.includes('to')) {
    obj.path.to[pathArr[3]] = null;
  }
  else if (pathArr.includes('path') && pathArr.includes('from')) {
    obj.path.from[pathArr[3]] = null;
  }
  ...
}

等等。

显然这可以提高效率，动态创建键 path、to、from 和 users，但这会起作用

Answer 2

这是一个简单的方法。它最多只能处理三个。如果需要，您可以尝试扩展它。

const paths = [
  "/path/to/first",
  "/path/to/second",
  "/path/to/third",
  "/path/from/first",
  "/path/from/second",
  "/users/bill",
  "/users/john"
];

const res = paths.reduce((acc, path) => {
  const [first, second, third] = path.split("/").filter((a) => a);
  if (first && !acc[first]) acc[first] = {};
  if (second && !acc[first][second]) acc[first][second] = {};
  if (third && !acc[first][second][third]) acc[first][second][third] = {};
  return acc;
}, {});

console.log(res);

Answer 3

这是一个基于一些简单辅助函数构建的版本：

const setPath = ([p, ...ps]) => (v) => (o) =>
  p == undefined ? v : Object .assign (
    Array .isArray (o) || Number .isInteger (p) ? [] : {},
    {...o, [p]: setPath (ps) (v) ((o || {}) [p])}
  )

const hydrate = (xs) =>
  xs .reduce ((a, [p, v]) => setPath (p) (v) (a), {})

const build = (ps) => 
  hydrate (ps .map (p => [p .slice (1) .split ('/'), null]))

const paths = ["/path/to/first", "/path/to/second", "/path/to/third", "/path/from/first", "/path/from/second", "/users/bill", "/users/john"]

console .log (build (paths))

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

在这里，setPath 采用诸如 ['path', 'to', 'first'], and a value such as 'null' and an object and returns a copy of that object, setting the value at that path, creating any intermediate nodes as needed. hydrate 之类的路径，采用路径-值对数组并根据需要创建一个全新的对象。

我们的build 函数然后拆分"/" 上的路径，将每个路径映射到[['path', 'to', 'first'], null] 样式的条目，然后将结果数组传递给hydrate。

递归使这段代码更简单。我们可以用更命令式的方式编写setPath，使用迭代与递归，但我希望代码更丑陋，但收益甚微。不过，我很想被证明是错误的。