我有以下 JSON 数组
{"type":"doc","version":1,"content":[{"type":"paragraph","content":[{"type":"image","attrs":{"src":"cid:avatar_de332fbebe0906c451c8859294d1553d"},"marks":[{"type":"link","attrs":{"href":"https://wiki.infosysta.com/display/~malhajj?src=mail&src.mail.product=confluence-server&src.mail.timestamp=1659168756680&src.mail.notification=com.atlassian.confluence.plugins.confluence-mentions-plugin%3Amention-created-notification&src.mail.recipient=30baf1ba7ccdddd3017fca13007e00c4"}}]},{"type":"text","text":" Mohamad AL HAJJ "},{"type":"text","text":"mentioned","marks":[{"type":"strong"}]},{"type":"text","text":" you on a page"}]},{"type":"paragraph","content":[{"type":"text","text":" ","marks":[{"type":"textColor","attrs":{"color":"#ffffff"}}]},{"type":"text","text":" "},{"type":"image","attrs":{"src":"cid:mention-icon","alt":"mention icon","title":"mention icon"},"marks":[{"type":"link","attrs":{"href":"https://wiki.infosysta.com/display/MDT/Bassem+1-1+2022-07-28?src=mail&src.mail.product=confluence-server&src.mail.timestamp=1659168756680&src.mail.notification=com.atlassian.confluence.plugins.confluence-mentions-plugin%3Amention-created-notification&src.mail.recipient=30baf1ba7ccdddd3017fca13007e00c4&src.mail.action=view"}}]},{"type":"text","text":" "},{"type":"text","text":"Bassem 1-1 2022-07-28","marks":[{"type":"link","attrs":{"href":"https://wiki.infosysta.com/display/MDT/Bassem+1-1+2022-07-28?src=mail&src.mail.product=confluence-server&src.mail.timestamp=1659168756680&src.mail.notification=com.atlassian.confluence.plugins.confluence-mentions-plugin%3Amention-created-notification&src.mail.recipient=30baf1ba7ccdddd3017fca13007e00c4&src.mail.action=view"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"···"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"@"},{"type":"text","text":"Bassem Alameddine","marks":[{"type":"link","attrs":{"href":"https://wiki.infosysta.com/display/~balameddine"}}]},{"type":"text","text":" "}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Release 3.0.7 is ready"}]},{"type":"paragraph","content":[{"type":"text","text":"@"},{"type":"text","text":"Bassem Alameddine","marks":[{"type":"link","attrs":{"href":"https://wiki.infosysta.com/display/~balameddine"}}]},{"type":"text","text":" "}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[]}]}]},{"type":"paragraph","content":[{"type":"hardBreak"},{"type":"text","text":" Research about supporting React in windows app"}]},{"type":"paragraph","content":[{"type":"text","text":"@"},{"type":"text","text":"Bassem Alameddine","marks":[{"type":"link","attrs":{"href":"https://wiki.infosysta.com/display/~balameddine"}}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"hardBreak"},{"type":"text","text":" "},{"type":"hardBreak"},{"type":"text","text":" Test server changes done by Ahmad"}]},{"type":"paragraph","content":[{"type":"text","text":"@"},{"type":"text","text":"Bassem Alameddine","marks":[{"type":"link","attrs":{"href":"https://wiki.infosysta.com/display/~balameddine"}}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"paragraph","content":[{"type":"image","attrs":{"src":"cid:com.atlassian.confluence.plugins.confluence-email-resources_view-page-email-adg-footer-item_icon","alt":"View page Icon","title":"View page Icon"},"marks":[{"type":"link","attrs":{"href":"https://wiki.infosysta.com/display/MDT/Bassem+1-1+2022-07-28?src=mail&src.mail.product=confluence-server&src.mail.timestamp=1659168756680&src.mail.notification=com.atlassian.confluence.plugins.confluence-mentions-plugin%3Amention-created-notification&src.mail.recipient=30baf1ba7ccdddd3017fca13007e00c4&src.mail.action=view"}}]},{"type":"text","text":" "},{"type":"text","text":"View page","marks":[{"type":"link","attrs":{"href":"https://wiki.infosysta.com/display/MDT/Bassem+1-1+2022-07-28?src=mail&src.mail.product=confluence-server&src.mail.timestamp=1659168756680&src.mail.notification=com.atlassian.confluence.plugins.confluence-mentions-plugin%3Amention-created-notification&src.mail.recipient=30baf1ba7ccdddd3017fca13007e00c4&src.mail.action=view"}}]},{"type":"text","text":" • "},{"type":"image","attrs":{"src":"cid:com.atlassian.confluence.plugins.confluence-email-resources_add-comment-to-content-email-adg-footer-item_icon","alt":"Add comment Icon","title":"Add comment Icon"},"marks":[{"type":"link","attrs":{"href":"https://wiki.infosysta.com/display/MDT/Bassem+1-1+2022-07-28?showComments=true&showCommentArea=true&src=mail&src.mail.product=confluence-server&src.mail.timestamp=1659168756680&src.mail.notification=com.atlassian.confluence.plugins.confluence-mentions-plugin%3Amention-created-notification&src.mail.recipient=30baf1ba7ccdddd3017fca13007e00c4&src.mail.action=comment#addcomment"}}]},{"type":"text","text":" "},{"type":"text","text":"Add comment","marks":[{"type":"link","attrs":{"href":"https://wiki.infosysta.com/display/MDT/Bassem+1-1+2022-07-28?showComments=true&showCommentArea=true&src=mail&src.mail.product=confluence-server&src.mail.timestamp=1659168756680&src.mail.notification=com.atlassian.confluence.plugins.confluence-mentions-plugin%3Amention-created-notification&src.mail.recipient=30baf1ba7ccdddd3017fca13007e00c4&src.mail.action=comment#addcomment"}}]},{"type":"text","text":" • "},{"type":"image","attrs":{"src":"cid:com.atlassian.confluence.plugins.confluence-like_view-email-adg-content-item_icon","alt":"Like Icon","title":"Like Icon"},"marks":[{"type":"link","attrs":{"href":"https://wiki.infosysta.com/plugins/likes/like.action?contentId=26543947&src=mail&src.mail.product=confluence-server&src.mail.timestamp=1659168756680&src.mail.notification=com.atlassian.confluence.plugins.confluence-mentions-plugin%3Amention-created-notification&src.mail.recipient=30baf1ba7ccdddd3017fca13007e00c4&src.mail.action=like&jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ4c3JmOjMwYmFmMWJhN2NjZGRkZDMwMTdmY2ExMzAwN2UwMGM0IiwicXNoIjoiODEwNWNmMmVlZjcwMGQ1MjVmYjUyODkzMjFmYTMzZGQyNDNmNDNmM2M2MWY1YmU5NzU3YjhjMWVmZmIxZTk1MSIsImlzcyI6ImNvbmZsdWVuY2Vfbm90aWZpY2F0aW9uc0JFOFUtTDNMWi1USzFPLVBGM00iLCJleHAiOjE2NTk3NzM1NTYsImlhdCI6MTY1OTE2ODc1Nn0.R4yPR6SKdUg5mc8fwgdGUa7BeWOdN_2LXDZbAKC5A-o"}}]},{"type":"text","text":" "},{"type":"text","text":"Like","marks":[{"type":"link","attrs":{"href":"https://wiki.infosysta.com/plugins/likes/like.action?contentId=26543947&src=mail&src.mail.product=confluence-server&src.mail.timestamp=1659168756680&src.mail.notification=com.atlassian.confluence.plugins.confluence-mentions-plugin%3Amention-created-notification&src.mail.recipient=30baf1ba7ccdddd3017fca13007e00c4&src.mail.action=like&jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ4c3JmOjMwYmFmMWJhN2NjZGRkZDMwMTdmY2ExMzAwN2UwMGM0IiwicXNoIjoiODEwNWNmMmVlZjcwMGQ1MjVmYjUyODkzMjFmYTMzZGQyNDNmNDNmM2M2MWY1YmU5NzU3YjhjMWVmZmIxZTk1MSIsImlzcyI6ImNvbmZsdWVuY2Vfbm90aWZpY2F0aW9uc0JFOFUtTDNMWi1USzFPLVBGM00iLCJleHAiOjE2NTk3NzM1NTYsImlhdCI6MTY1OTE2ODc1Nn0.R4yPR6SKdUg5mc8fwgdGUa7BeWOdN_2LXDZbAKC5A-o"}}]},{"type":"text","text":" "},{"type":"text","text":" ","marks":[{"type":"textColor","attrs":{"color":"#ffffff"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Manage notifications","marks":[{"type":"link","attrs":{"href":"https://wiki.infosysta.com/users/editmyemailsettings.action?src=mail&src.mail.product=confluence-server&src.mail.timestamp=1659168756680&src.mail.notification=com.atlassian.confluence.plugins.confluence-mentions-plugin%3Amention-created-notification&src.mail.recipient=30baf1ba7ccdddd3017fca13007e00c4&src.mail.action=manage"}}]},{"type":"text","text":" "},{"type":"image","attrs":{"src":"cid:footer-desktop-logo","alt":"Confluence logo big","title":"Confluence logo big"}},{"type":"text","text":" This message was sent by Atlassian Confluence 7.18.1"},{"type":"hardBreak"},{"type":"image","attrs":{"src":"cid:footer-mobile-logo","alt":"","title":""}}]}]}
我想做的是创建一个递归函数，它定位所有类型为 image 的元素，并尝试将它从它的父元素内部移动并将它作为根元素推送
但我无法在它的原始父级之后或之前推送它。
这是我做的
static recur = (arr, AttachmentsArr, madfdoc, htmlbody) => {
if (arr && arr.length > 0) {
arr.forEach(item => {
try {
switch (item.type) {
case "image":
this.handleImages(arr, madfdoc, item, htmlbody, AttachmentsArr)
break;
case "paragraph":
this.handleParaphs(item, htmlbody, AttachmentsArr)
break;
default:
break;
}
if (item.content) {
this.recur(item.content, AttachmentsArr, madfdoc, htmlbody);
}
}
catch (ex) {
console.log(ex)
}
});
}
};
static handleImages(arr, madfdoc, item, htmlbody, AttachmentsArr) {
var imghtmlobj = htmlbody.querySelector(`img[src*='${item.attrs.src}']`);
let src = item.attrs.src.replace("cid:", "");
// find the image bloburl to change it
let fnd = AttachmentsArr && AttachmentsArr.length ? AttachmentsArr.find(obj => {
return obj.ContentId ? obj.ContentId === src : undefined;
}) : undefined
var imgw = undefined;
var imgh = undefined;
if (imghtmlobj) {
let img = new Image();
img.onload = function () {
imgw = this.width;
imgh = this.height;
delete item["attrs"]
delete item["marks"]
item.type = "mediaSingle";
item.content = [];
item.content.push({
type: "media",
attrs: {
type: "external",
url: fnd ? fnd.preview : src,
width: imgw,
height: imgh
}
})
const indexOfObject = arr.findIndex(object => {
return object.type === "mediaSingle";
});
**arr.splice(indexOfObject, 1); // here is where i am deleting it from inside it's parent and push it to the root inside `madfdoc`
madfdoc.content.push(item);**
}
img.src = fnd ? fnd.preview : src;
}
}
预期的 Json 应该是这样的
{
"type": "doc",
"version": 1,
"content": [
{
"type": "image",
"attrs": {
"src": "cid:avatar_de332fbebe0906c451c8859294d1553d"
},
"marks": [
{
"type": "link",
"attrs": {
"href": "https://wiki.infosysta.com/display/~malhajj?src=mail&src.mail.product=confluence-server&src.mail.timestamp=1659168756680&src.mail.notification=com.atlassian.confluence.plugins.confluence-mentions-plugin%3Amention-created-notification&src.mail.recipient=30baf1ba7ccdddd3017fca13007e00c4"
}
}
]
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": " test"
},
{
"type": "text",
"text": "mentioned",
"marks": [
{
"type": "strong"
}
]
},
{
"type": "text",
"text": " you on a page"
}
]
}
]
最佳答案
如果我正确理解了您的要求，应该这样做:
class ImagePopper {
#data;
#collector = [];
constructor(data) {
if (typeof data === "object") {
this.#data = structuredClone(data);
this.parseObject(this.#data, []);
this.#collector.reverse().forEach(({ entry, path }) => {
this.#data[path[0]].splice(path[1], 0, entry);
});
}
return this.#data || data;
}
parseArray = (arr, path) => {
_.set(
this.#data,
path,
arr.reduce((acc, entry, index) => {
if (typeof entry === "object") {
this.parseObject(entry, [...path, index]);
}
if (entry?.type === "image") {
this.#collector.push({ entry, path });
} else {
acc.push(entry);
}
return acc;
}, [])
);
};
parseObject = (obj, path) =>
Object.entries(obj).forEach(
([key, value]) =>
Array.isArray(value) && this.parseArray(value, [...path, key])
);
}
const json = {"type":"doc","version":1,"content":[{"type":"paragraph","content":[{"type":"image","attrs":{"src":"cid:avatar_de332fbebe0906c451c8859294d1553d"},"marks":[{"type":"link","attrs":{"href":"https://wiki.infosysta.com/display/~malhajj?src=mail&src.mail.product=confluence-server&src.mail.timestamp=1659168756680&src.mail.notification=com.atlassian.confluence.plugins.confluence-mentions-plugin%3Amention-created-notification&src.mail.recipient=30baf1ba7ccdddd3017fca13007e00c4"}}]},{"type":"text","text":" Mohamad AL HAJJ "},{"type":"text","text":"mentioned","marks":[{"type":"strong"}]},{"type":"text","text":" you on a page"}]},{"type":"paragraph","content":[{"type":"text","text":" ","marks":[{"type":"textColor","attrs":{"color":"#ffffff"}}]},{"type":"text","text":" "},{"type":"image","attrs":{"src":"cid:mention-icon","alt":"mention icon","title":"mention icon"},"marks":[{"type":"link","attrs":{"href":"https://wiki.infosysta.com/display/MDT/Bassem+1-1+2022-07-28?src=mail&src.mail.product=confluence-server&src.mail.timestamp=1659168756680&src.mail.notification=com.atlassian.confluence.plugins.confluence-mentions-plugin%3Amention-created-notification&src.mail.recipient=30baf1ba7ccdddd3017fca13007e00c4&src.mail.action=view"}}]},{"type":"text","text":" "},{"type":"text","text":"Bassem 1-1 2022-07-28","marks":[{"type":"link","attrs":{"href":"https://wiki.infosysta.com/display/MDT/Bassem+1-1+2022-07-28?src=mail&src.mail.product=confluence-server&src.mail.timestamp=1659168756680&src.mail.notification=com.atlassian.confluence.plugins.confluence-mentions-plugin%3Amention-created-notification&src.mail.recipient=30baf1ba7ccdddd3017fca13007e00c4&src.mail.action=view"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"···"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"@"},{"type":"text","text":"Bassem Alameddine","marks":[{"type":"link","attrs":{"href":"https://wiki.infosysta.com/display/~balameddine"}}]},{"type":"text","text":" "}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Release 3.0.7 is ready"}]},{"type":"paragraph","content":[{"type":"text","text":"@"},{"type":"text","text":"Bassem Alameddine","marks":[{"type":"link","attrs":{"href":"https://wiki.infosysta.com/display/~balameddine"}}]},{"type":"text","text":" "}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[]}]}]},{"type":"paragraph","content":[{"type":"hardBreak"},{"type":"text","text":" Research about supporting React in windows app"}]},{"type":"paragraph","content":[{"type":"text","text":"@"},{"type":"text","text":"Bassem Alameddine","marks":[{"type":"link","attrs":{"href":"https://wiki.infosysta.com/display/~balameddine"}}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"hardBreak"},{"type":"text","text":" "},{"type":"hardBreak"},{"type":"text","text":" Test server changes done by Ahmad"}]},{"type":"paragraph","content":[{"type":"text","text":"@"},{"type":"text","text":"Bassem Alameddine","marks":[{"type":"link","attrs":{"href":"https://wiki.infosysta.com/display/~balameddine"}}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"paragraph","content":[{"type":"image","attrs":{"src":"cid:com.atlassian.confluence.plugins.confluence-email-resources_view-page-email-adg-footer-item_icon","alt":"View page Icon","title":"View page Icon"},"marks":[{"type":"link","attrs":{"href":"https://wiki.infosysta.com/display/MDT/Bassem+1-1+2022-07-28?src=mail&src.mail.product=confluence-server&src.mail.timestamp=1659168756680&src.mail.notification=com.atlassian.confluence.plugins.confluence-mentions-plugin%3Amention-created-notification&src.mail.recipient=30baf1ba7ccdddd3017fca13007e00c4&src.mail.action=view"}}]},{"type":"text","text":" "},{"type":"text","text":"View page","marks":[{"type":"link","attrs":{"href":"https://wiki.infosysta.com/display/MDT/Bassem+1-1+2022-07-28?src=mail&src.mail.product=confluence-server&src.mail.timestamp=1659168756680&src.mail.notification=com.atlassian.confluence.plugins.confluence-mentions-plugin%3Amention-created-notification&src.mail.recipient=30baf1ba7ccdddd3017fca13007e00c4&src.mail.action=view"}}]},{"type":"text","text":" • "},{"type":"image","attrs":{"src":"cid:com.atlassian.confluence.plugins.confluence-email-resources_add-comment-to-content-email-adg-footer-item_icon","alt":"Add comment Icon","title":"Add comment Icon"},"marks":[{"type":"link","attrs":{"href":"https://wiki.infosysta.com/display/MDT/Bassem+1-1+2022-07-28?showComments=true&showCommentArea=true&src=mail&src.mail.product=confluence-server&src.mail.timestamp=1659168756680&src.mail.notification=com.atlassian.confluence.plugins.confluence-mentions-plugin%3Amention-created-notification&src.mail.recipient=30baf1ba7ccdddd3017fca13007e00c4&src.mail.action=comment#addcomment"}}]},{"type":"text","text":" "},{"type":"text","text":"Add comment","marks":[{"type":"link","attrs":{"href":"https://wiki.infosysta.com/display/MDT/Bassem+1-1+2022-07-28?showComments=true&showCommentArea=true&src=mail&src.mail.product=confluence-server&src.mail.timestamp=1659168756680&src.mail.notification=com.atlassian.confluence.plugins.confluence-mentions-plugin%3Amention-created-notification&src.mail.recipient=30baf1ba7ccdddd3017fca13007e00c4&src.mail.action=comment#addcomment"}}]},{"type":"text","text":" • "},{"type":"image","attrs":{"src":"cid:com.atlassian.confluence.plugins.confluence-like_view-email-adg-content-item_icon","alt":"Like Icon","title":"Like Icon"},"marks":[{"type":"link","attrs":{"href":"https://wiki.infosysta.com/plugins/likes/like.action?contentId=26543947&src=mail&src.mail.product=confluence-server&src.mail.timestamp=1659168756680&src.mail.notification=com.atlassian.confluence.plugins.confluence-mentions-plugin%3Amention-created-notification&src.mail.recipient=30baf1ba7ccdddd3017fca13007e00c4&src.mail.action=like&jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ4c3JmOjMwYmFmMWJhN2NjZGRkZDMwMTdmY2ExMzAwN2UwMGM0IiwicXNoIjoiODEwNWNmMmVlZjcwMGQ1MjVmYjUyODkzMjFmYTMzZGQyNDNmNDNmM2M2MWY1YmU5NzU3YjhjMWVmZmIxZTk1MSIsImlzcyI6ImNvbmZsdWVuY2Vfbm90aWZpY2F0aW9uc0JFOFUtTDNMWi1USzFPLVBGM00iLCJleHAiOjE2NTk3NzM1NTYsImlhdCI6MTY1OTE2ODc1Nn0.R4yPR6SKdUg5mc8fwgdGUa7BeWOdN_2LXDZbAKC5A-o"}}]},{"type":"text","text":" "},{"type":"text","text":"Like","marks":[{"type":"link","attrs":{"href":"https://wiki.infosysta.com/plugins/likes/like.action?contentId=26543947&src=mail&src.mail.product=confluence-server&src.mail.timestamp=1659168756680&src.mail.notification=com.atlassian.confluence.plugins.confluence-mentions-plugin%3Amention-created-notification&src.mail.recipient=30baf1ba7ccdddd3017fca13007e00c4&src.mail.action=like&jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ4c3JmOjMwYmFmMWJhN2NjZGRkZDMwMTdmY2ExMzAwN2UwMGM0IiwicXNoIjoiODEwNWNmMmVlZjcwMGQ1MjVmYjUyODkzMjFmYTMzZGQyNDNmNDNmM2M2MWY1YmU5NzU3YjhjMWVmZmIxZTk1MSIsImlzcyI6ImNvbmZsdWVuY2Vfbm90aWZpY2F0aW9uc0JFOFUtTDNMWi1USzFPLVBGM00iLCJleHAiOjE2NTk3NzM1NTYsImlhdCI6MTY1OTE2ODc1Nn0.R4yPR6SKdUg5mc8fwgdGUa7BeWOdN_2LXDZbAKC5A-o"}}]},{"type":"text","text":" "},{"type":"text","text":" ","marks":[{"type":"textColor","attrs":{"color":"#ffffff"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Manage notifications","marks":[{"type":"link","attrs":{"href":"https://wiki.infosysta.com/users/editmyemailsettings.action?src=mail&src.mail.product=confluence-server&src.mail.timestamp=1659168756680&src.mail.notification=com.atlassian.confluence.plugins.confluence-mentions-plugin%3Amention-created-notification&src.mail.recipient=30baf1ba7ccdddd3017fca13007e00c4&src.mail.action=manage"}}]},{"type":"text","text":" "},{"type":"image","attrs":{"src":"cid:footer-desktop-logo","alt":"Confluence logo big","title":"Confluence logo big"}},{"type":"text","text":" This message was sent by Atlassian Confluence 7.18.1"},{"type":"hardBreak"},{"type":"image","attrs":{"src":"cid:footer-mobile-logo","alt":"","title":""}}]}]}
const result = new ImagePopper(json);
// console.log({ before: json, after: result });
before.innerHTML = JSON.stringify(json, null, 2)
after.innerHTML = JSON.stringify(result, null, 2)@media (min-width: 800px) {
.side-by-side {
display: flex;
}
.side-by-side > div {
width: 50%;
}
.scroller {
overflow: auto;
height: calc(100vh - 84px);
}
}
pre {
padding: .5rem;
background-color: #f5f5f5;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<div class="side-by-side">
<div>
<h2>Before</h2>
<div class="scroller">
<pre id="before"></pre>
</div>
</div>
<div>
<h2>After</h2>
<div class="scroller">
<pre id="after"></pre>
</div>
</div>
</div>我正在递归遍历数据并收集所有图像，存储它们的当前路径。在每个级别，我都会从它们的父级中删除图像(通过遗漏)。我为此使用了 lodash 的 set(它允许将路径作为数组传递，这在这里非常方便)。 1, 2
然后我将每个图像以相反的顺序注入(inject)其根父级之前的顶层。这样我就不需要总是根据之前处理过的图像的数量来增加拼接索引。
为了清洁、可读性和可重用性，决定将其包装为一个类以防止它与外部作用域交互。
就是这样。
注意事项:
1 - 如果您不想使用 lodash 的 set，请考虑使用 this implementation .
2 - 在您的项目中，您不应该像我在这里所做的那样导入所有的 lodash。只导入set:
import { set } from 'lodash-es'
// replace `_.set(` in the class with just `set(`
关于javascript - 将子对象移动到 root 之前，它是 json 数组中的原始父对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73191645/