从索引/键数组创建字符串对象路径

Question

我正在使用Zod来验证我的申请表的输入，当验证错误发生时，我会收到一组带有message属性和path属性的错误。

我需要将接收到的path属性转换为string对象路径，以便使用它为React Final Form创建ValidationError

给定path:

["user", "name"]
["company", 0, "name"]

预期的string对象路径：

"user.name"
"company[0].name"

令人惊讶的是，我在Stack Overflow、Google Search或NPM上没有发现任何实现此功能的代码：(

Answer 1

快速尝试：

const string_path = (path) =>
path.reduce(
(acc, item) => acc + (Number.isInteger(item) ? '[' + item + ']' : '.' + item),
''
).substring(1);
console.log(string_path(["user", "name"]));
console.log(string_path(["company", 0, "name"]));

编辑：所以，从@vich的帖子中，我了解到reduce会很乐意使用数组的第一个元素作为累加器，如果你没有指定的话，所以这里有一个稍微短一点的版本：

const string_path = (path) =>
path.reduce(
(acc, item) => acc + (Number.isInteger(item) ? '[' + item + ']' : '.' + item)
);
console.log(string_path(["user", "name"]));
console.log(string_path(["company", 0, "name"]));
console.log(string_path(["user"]));

Answer 2

您可以使用Array.reduce来实现您想要的。

const paths = ["company", 0, "name"];
const result = paths.reduce((acc, item) => {
return typeof item === "string" ?
acc + "." + item :
`${acc}[${item}]`
}, "");
console.log(result.slice(1));

Answer 3

这很琐碎。值得你自己尝试。

["user", "name"].reduce((string, item) => (typeof item === "number") ? string + "[" + item + "]" : string + "." + item)

"user.name"；

["company", 0, "name"].reduce((string, item) => (typeof item === "number") ? string + "[" + item + "]" : string + "." + item)

"company[0].name"；