如何处理 JavaScript 多维数组？答案

【问题标题】：How to process JavaScript multidimensional array?如何处理 JavaScript 多维数组？
【发布时间】：2017-04-29 14:38:23
【问题描述】：

var givenArray = [23, 6, [2,[6,2,1,2], 2], 5, 2];

输入： var givenArray 是任何数组，可能是也可能不是多维数组。

过程：请使用HTML、CSS和JavaScript（控制结构、内置函数、递归函数）保持数组元素的层次输出。

样本输出：

【问题讨论】：

你能解释一下第二和第三行或整个输出吗？
如果要保持水平，我认为第一行必须是23, 6, 5, 2 ?
这真的像是一道作业题。
我不明白我如何保持数组元素的输出水平？你能简单解释一下吗

标签： javascript arrays

【解决方案1】：

如果我正确理解了您的问题，以下内容可能会有所帮助

var givenArray = [23, 6, [2, [6, 2, 1, 2], 2], 5, 2];

function display(arr, indent) {
    for (var x=0; x<arr.length; x++) {
        var i = arr[x]
        if (i instanceof Array) {
            display(i, indent + 4)
        }
        else {
            console.log(" ".repeat(indent) + i)
        }
    }
}

display(givenArray, 0)

输出：

小提琴example

【讨论】：

是的，兄弟..你是对的..但是我可以用不同的方式使用这个循环吗？如果可以的话，怎么可能？
取决于different way是什么
当我尝试运行此代码时，我的 ide 显示一个错误，即当前 javascript 版本不支持 for(..) 循环。我现在该怎么办？
答案已更新。现在试试。你用的是哪个ide。并且大多数最新的浏览器都支持 in 语法
phpstroam..虽然它没有显示任何错误，但浏览器没有显示任何结果

【解决方案2】：

您可以使用迭代和递归方法，并在级别缩进上加上一个闭包。

var array = [23, 6, [2, [6, 2, 1, 2], 2], 5, 2];

array.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);

p { padding: 0; margin: 0; }

【讨论】：