数组转树结构的自定义层数的循环实现方式

<div class="setting">
  <p>自定义层级：</p>
  <div class="radios"></div>
</div>
<div class="container"></div>

.setting {
  padding: 20px;
}
.setting label {
  margin-right: 10px;
  white-space: nowrap;
}
.setting label span {
  padding-left: 10px;
  padding-right: 20px;
}
.container {
  padding: 20px;
}
.comment {
  background-color: rgba(105, 218, 91, 0.17);
  margin-bottom: 10px;
  padding: 10px;
}
.list .list {
  margin-left: 40px;
}

const list = [
    { id: 1, pid: 0, replyid: 0, nick: '111', content: '' },
    { id: 2, pid: 0, replyid: 0, nick: '222', content: '' },
    { id: 3, pid: 2, replyid: 2, nick: '333', content: '' },
    { id: 4, pid: 2, replyid: 3, nick: '444', content: '' },
    { id: 5, pid: 2, replyid: 4, nick: '555', content: '' },
    { id: 6, pid: 1, replyid: 1, nick: '666', content: '' },
    { id: 7, pid: 2, replyid: 3, nick: '777', content: '' },
    { id: 8, pid: 2, replyid: 5, nick: '888', content: '' },
    { id: 9, pid: 2, replyid: 8, nick: '999', content: '' },
    { id: 10, pid: 2, replyid: 9, nick: 'aaa', content: '' },
    { id: 11, pid: 2, replyid: 10, nick: 'bbb', content: '' },
  ];

const listToTreeSelf = (list, maxPath = 4) => {
    const newList = JSON.parse(JSON.stringify(list)); // 避免影响之前的数组
    const map = new Map();
    const result = [];

    newList.forEach((comment) => {
      map.set(comment.id, comment);

      if (comment.replyid) {
        // 楼中楼的评论
        const parentComment = map.get(comment.replyid) || {};
        comment.deep = parentComment.deep + 1;

        if (comment.deep >= maxPath) {
          const ancestorComment = map.get(parentComment.pid);

          comment.replyNick = parentComment.nick;
          if (!ancestorComment.children) {
            ancestorComment.children = [];
          }
          comment.pid = ancestorComment.id;
          ancestorComment.children.push(comment);
        } else {
          if (!parentComment.children) {
            parentComment.children = [];
          }
          comment.pid = parentComment.id;
          parentComment.children.push(comment);
        }
      } else {
        comment.deep = 0;
        result.push(comment);
      }
    });
    return result;
  };

const render = (list) => {
    let html = '<div class="list">';
    list.forEach((comment) => {
      html += `<div class="comment"><p>${comment.nick}${
        comment.replyNick ? ` to ${comment.replyNick}` : ''
      }</p></div>`;

      if (Array.isArray(comment.children)) {
        html += render(comment.children);
      }
    });
    html += '</div>';
    return html;
  };
document.querySelector('.container').innerHTML = render(listToTreeSelf(list));

const renderRadio = () => {
  const min = 2;
  const max = 10;
  let html = '';
  for (let i = min; i < max; i++) {
    html += `<label><input type="radio" name="ceng" value="${i}" ${
      i === 4 ? 'checked' : ''
    } /><span>${i}</span></label>`;
  }
  document.querySelector('.radios').innerHTML = html;
};
renderRadio();

document.querySelector('.radios').addEventListener('click', () => {
  if (event.target.tagName.toUpperCase() === 'INPUT') {
    const value = Number(event.target.value) || 4;
    document.querySelector('.container').innerHTML = render(listToTreeSelf(list, value));
  }
});