在JavaScript中循環遍歷數組數組

Question

我有一個看起來像這樣的數組：

var arrayElements=
[
        ["1","description 1",
            [
                ["1.1","description 1.1"],
                ["1.2","description 1.2"],
                ["1.2","description 1.3"]
            ]
        ]
        ,
        ["2","description 2"],
        ["3","description 3",
            [
                ["3.1","description 3.1"],
                ["3.2","description 3.2",
                    [
                        ["3.2.1","description 3.2.1"],
                        ["3.2.2","description 3.2.2"],
                        ["3.2.2","description 3.2.3"]
                    ]
                ],
                ["3.3","description 3.3"]
            ]
        ],
        ["4","description 4"]
];

我想循環通過以下數組，能夠訪問所有值以及每個元素的打印深度。 控制台中的預期結果將是這樣的：

description 1, depth 1
description 1.1, depth 2
description 1.2, depth 2
description 1.3, depth 2
description 2, depth 1
description 3, depth 1
description 3.1, depth 2
description 3.2, depth 2
description 3.2.1, depth 3
description 3.2.2, depth 3
description 3.2.3, depth 3
description 3.3, depth 2
description 4, depth 1

這是我嘗試過的：

var depth = 0;

function listNodes(array){

    for(i = 0; i < array.length;i++){
        if( /* itearating over root array */ ){
            depth = 1;
        }

        if(array[i][2] instanceof Array){
            depth++;
            console.log(array[i][1] + " depth: "+depth);
            listNodes(array[i][2]);
        }else{
            console.log(array[i][1] + " depth: "+depth);
        }
    }
}

listNodes(arrayElements);

我無法遍歷此數組，即使它應該繼續，它也會卡住。 另一個問題是我的變量存儲深度無法正常工作，因為我無法確定何時在根數組上進行循環迭代，從而無法重置depth計數器。 有任何想法嗎？

Answer 1

 var arrayElements= [ ["1","description 1", [ ["1.1","description 1.1"], ["1.2","description 1.2"], ["1.2","description 1.3"] ] ] , ["2","description 2"], ["3","description 3", [ ["3.1","description 3.1"], ["3.2","description 3.2", [ ["3.2.1","description 3.2.1"], ["3.2.2","description 3.2.2"], ["3.2.2","description 3.2.3"] ] ], ["3.3","description 3.3"] ] ], ["4","description 4"] ]; function listNodes(array, depth) { depth = typeof depth === 'undefined' ? 1 : depth; var len = array.length; for(var i = 0; i < array.length;i++) { console.log(array[i][1] + " depth: "+ depth); if(array[i][2] instanceof Array) { listNodes(array[i][2], depth + 1); } } } listNodes(arrayElements); 

這給了我您示例的確切輸出。 請注意，我將深度作為參數傳遞給函數。

Answer 2

如果您可以使用對象而不是記住索引，那么它將更漂亮，更靈活：

 var arrayElements = [{ id: "1", description: "description 1", children: [{ id: "1.1", description: "description 1.1", children: [] }] }, { id: "2", description: "description 2", children: [{ id: "2.1", description: "description 2.1", children: [{ id: "2.1.1", description: "description 2.1.1", children: [] }, { id: "2.1.2", description: "description 2.1.2", children: [] } ] }] } ]; function deepSearch(arr, depth, cb) { if (depth === void 0) { depth = 0; } if (cb === void 0) { cb = function(val) { console.log(val); }; } for (var i = 0; i < arr.length; i++) { var val = arr[i]; cb(val.id + " - " + val.description + " at depth " + depth); if (val.children.length > 0) { deepSearch(val.children, depth + 1, cb); } } } deepSearch(arrayElements); 

Answer 3

你可以做這樣的事情

function listNodes(array, depth) {
    depth++;
    for (let i = 0; i < array.length; i++) {
        console.log(array[i][1] + ' - ' + depth);
        if (typeof array[i][2] === 'object') {
            listNodes(array[i][2], depth);
        }
    }
}

listNodes(arrayElements, 0);

考慮到您的示例，這將是：

description 1 - 1
description 1.1 - 2
description 1.2 - 2
description 1.3 - 2
description 2 - 1
description 3 - 1
description 3.1 - 2
description 3.2 - 2
description 3.2.1 - 3
description 3.2.2 - 3
description 3.2.3 - 3
description 3.3 - 2
description 4 - 1