我正在尝试拆分下面的数组
{
"Base/Brand/0101-color-brand-primary-red": "#fe414d",
"Base/Brand/0106-color-brand-secondary-green": "#00e6c3",
"Base/Brand/0102-color-brand-primary-light-gray": "#eaecf0",
"Base/Brand/0107-color-brand-secondary-black": "#000000",
"Base/Brand/0103-color-brand-primary-white": "#ffffff",
"Base/Brand/0108-color-brand-secondary-dark-gray": "#b4b4b4",
"Base/Brand/0104-color-brand-secondary-blue": "#079fff",
"Base/Light/Extended/Red/0201-color-extended-900-red": "#7f1d1d",
"Base/Brand/0105-color-brand-secondary-yellow": "#ffe63b",
"Base/Light/Extended/Red/0202-color-extended-800-red": "#991b1b"
}
这样的事情
{
"Base": {
"Brand": {
"0101-color-brand-primary-red": "#fe414d",
"0106-color-brand-secondary-green": "#00e6c3",
"Light": {
"Extended": {
"Red": {
"0201-color-extended-900-red": "#7f1d1d",
"0202-color-extended-800-red": "#991b1b"
}
}
}
}
}
}
基本上我需要分裂数组'/'和创建嵌套数组请帮助我如何才能实现这一点。
4条答案
按热度按时间nsc4cvqm1#
使用
Object.entries
获取原始对象中的所有条目。使用split('/')
在输出中获取对象路径键的数组。然后在该路径数组上使用reduce
在结果中创建级别,直到到达路径中的最后一个元素。此时,我们将最后一个路径元素设置为所需的颜色值。erhoui1w2#
由于所提供的结构是键值对(条目)的平面(非嵌套)对象,因此可以通过
reduce
源对象的entries
来开始聚合OP所需的目标数据结构。这个外部
reduce
任务的 initial value 将是一个空对象(文字)。同一个任务的 reducer函数 * 在每次迭代时都会接收到要聚合的对象引用(一开始就是初始值/空对象)。它还接收当前迭代的条目*,该条目是作为数组提供的 * 键值对 。
key
实际上是key-path*,一个字符串,它可以在每一个出现的斜杠处进一步是split
。value
是***路径值***,必须作为任何聚合(部分)对象引用的最后一个值分配。因此,需要第二个嵌套的
reduce
任务来处理每个键路径的部分key
值。initial value 将始终是要聚合的对象的基或根引用。内部的reduce
任务通过either accessing an already existing node, or by creating a new (empty node) or by assigning将接收到的node
引用聚合到最后创建的节点的最终路径值。它也总是将这个引用作为当前节点传递到下一个迭代步骤。3yhwsihp3#
首先,在未来,请分享你自己的努力时,问一个问题。我不会回答,直到我看到你自己的方法,如果没有已经体面的答案在这里。
我手边有许多实用函数。其中之一是hydrate,它接受一个我称之为
pathEntries
的数组(类似于Object .entries
的结果,但使用字符串/整数的 * 数组 * 表示 * 路径 *,而不是属性的单个字符串)并返回一个对象。有了这些,我们可以编写一个非常简单的版本:hydrate
基于setPath
,它创建了一个对象的副本(尽可能多地共享),在给定的路径上有一个新的值,在此过程中创建新的节点。比如说
综合起来,我的解决方案看起来像这样:
mzsu5hc04#
你可以用下面的递归函数来实现。它所做的是用“/”分割每个路径,然后以递归的方式检查它们,并将每个部分添加到输出对象中,如果它们还没有被追加。