วิธีประมวลผลอาร์เรย์ซ้อนและแสดงลำดับตัวเลขตามระดับการซ้อนใน JavaScript

ภาพรวม

สมมติว่าเรามีอาร์เรย์ซ้อนของตัวเลข:

const arr = [23, 6, [2,[6,2,1,2], 2], 5, 2];

เราต้องเขียนโปรแกรมที่พิมพ์ตัวเลขตามระดับการซ้อน (indentation แสดงระดับ)

ผลลัพธ์ที่คาดหวัง

23 6
  2
    6
    2
    1
    2
  2
5 2

ตัวอย่างโค้ด (HTML + JavaScript)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>PATTERN</title>
</head>
<body>
  <script>
    const arr = [23, 6, [2, [6, 2, 1, 2], 2], 5, 2];
    arr.reduce(function iter(level) {
      return function (node, item) {
        var pTag = document.createElement('p');
        pTag.style.marginLeft = level + 'px';
        node.appendChild(pTag);
        if (Array.isArray(item)) {
          item.reduce(iter(level || 50), pTag);
        } else {
          pTag.appendChild(document.createTextNode(item));
        }
        return node;
      };
    }(0), document.body);
  </script>
  <p></p>
</body>
</html>

ผลลัพธ์บนหน้าจอ

แสดงตัวเลขแบบย่อหน้าลงลึกตามระดับการซ้อน