在JavaScript中创建具有给定深度的嵌套列表项

我正在尝试使用以下数据创建嵌套列表项：

当深度按-1+1排序时，它会创建正确的缩进，但我无法生成完美的缩进。任何帮助都将不胜感激

const data=[
{depth:1，title:“一些标题放在这里-第一个标题”，url:#Some-title-Goes-Here-First-title-prs7ztig15“，
{depth:2，标题：“恶心，差点抓到它！”，url:#恶心，差点抓到，它-qlx0i4727h}，
{深度：1，标题：“哎哟！出问题了”，url:#哎哟-出问题了-qoflcur4iw”}，
{depth:1，标题：“别担心，我们会帮你搞定”，url:#别担心，我们会帮你搞定的，ug4kxqz4kp”}，
{深度：3，标题：“我讨厌写标题”，url:#I-Hate-Writing-Titles-jrlw78vulm}，
{深度：4，标题：“将要开始学习Lorem”，url:#将要开始学习Lorem-whzh8e3qus”}，
{深度：2，标题：“Lorem ipsum dolor sit amet，Concertetur Adipising Elite.Quisquam，voluptate！”，url:“#Lorem-ipsum-dolor-sit-amet-Concertetur-Adipising-elit-Quisquam-voluptate-agxlhkvs8c”，
{深度：1，标题：“concertetur adipising elit.Quo，corporis！”，url:#concertetur-adipising-elit-Quo-corporis-4xurvdulcn}，
{深度：1，标题：“Dolor sit amet，Concertetur Adipising Elite.Fugiat，quae？”，url:#Dolor-sit-amet-Concertetur-Adipising-elit-Fugiat-quae-txu46oaitk”，
{深度：2，标题：“adipising elit.Dolor，rem.”，url:#adipising-elit-Dolor-rem-x6coih7o36“，
{深度：3，标题：“Elit.consequeuntur，cum.”，url:#Elit-consequeuntur-cum-zqyhfglbd4}，
{深度：4，标题：“Ipsum-dolor-sit-amet.”，url:#Ipsum-dolor-sit-amet-sz09eh07ma}，
{深度：2，标题：“Lorem ipsum dolor sit amet，Concertetur Adipising Elite.Quo，corporis！”，url:“#Lorem-ipsum-dolor-sit-amet-Concertetur-Adipising-elit-Quo-corporis-18g13jn4j5”}]
函数getTOCOutput（数据）{
如果（data.length<1）返回“”；
让tocOutput=“
”；
设currentDepth=数据[0]。深度；
设c=data.length；
for（设i=0；i'.重复（currentDepth-itemDepth）+'
'；
}
currentDepth=数据[i]。深度；
}
TOC输出+=“
”；
返回输出；
}
document.body.innerHTML+=getTOCOutput（数据）您可以在for循环内使用两个while循环来说明深度变化。重复这些操作，直到当前深度正确为止：


函数getTOCOutput（数据）{
设currentDepth=0；
让tocOutput=“”；
for（让数据的{depth，title，url}）{
while（深度>当前深度）{
TOC输出+=“
”；
currentDepth++；
}
while（深度<当前深度）{
TOC输出+=“
”；
当前深度--；
}
TOC输出+='
'；
}
返回输出；
}
let data=[{depth:1，title:“某个标题在这里-第一个标题”，url:“#某个标题在这里-第一个标题在这里-第一个标题在这里-第一个标题在这里”}，{depth:2，title:“恶心几乎到了！”，url:“{depth:1，标题在哪里出了问题”，url:“#呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜，网址：“#别担心，我们给你盖上盖子，{depth:3，标题：“我讨厌写标题”，网址：“#我讨厌写标题-jrlw78vulm”}，{depth:4，标题：“要开始学习Lorem”，网址：{depth:2，标题：“Lorem ipsum dolor sit amet，Concertetur Adipising Elite.Quisquam，voluptate，网址：“#lorem-ipsum-dolor-sit-amet-Concertetur-Adipising-elit-quisquam-voluptate-agxlhkvs8c”{深度：1，标题：“Concertetur-Adipising elit.Quo，corporis！”，url:#Concertetur-Adipising-elit-corporis-4xurvdulcn}，{深度：1，标题：“dolor-sit-amet，Concertetur-Adipising elit.Fugiat，quae？”，url:#dolor-sit-amet-Concertetur-Adipising-elit-fugiat-quae-txu46oaitk“，{深度：2，标题：“Adipising Elite.dolor，rem.”，url:{Adipising-elit-dolor-rem-x6coih7o36}，{深度：3，标题：“elit.Consequintur，cum.”，url:{elit-Consequintur-zqyhfglbd4，{深度：4，标题：“Ipsum-dolor-sit，url-Sehum.”，{深度：2，标题：“Lorem ipsum dolor sit amet，Concertetur Adipising Elite.Quo，corporis！”，url:“#Lorem-ipsum-dolor-sit-amet-Concertetur-Adipising-elit-Quo-corporis-18g13jn4j5”}，]；
document.body.insertAdjacentHTML（“beforeend”，getTOCOutput（data））；
感谢您的回复。也许它没有返回完美的列表，但最终会如预期的那样工作。您太棒了！很高兴听到它为您工作！