JavaScript không đồng bộ đệ quy để chế biến cấu trúc dữ liệu lồng nhau

Question

Tôi đang tìm để viết một hàm JavaScript trong đó có cấu trúc dữ liệu sau đây là một cuộc tranh cãi:

let data = [ 
    {value: 'a'}, 
    {delay: [ 
    {value: 'b'}, 
    {delay: [ 
     {value: 'c'} 
    ]} 
    ]}, 
    {value: 'd'} 
]; 

Như bạn có thể thấy, các cấu trúc dữ liệu là một mảng của các đối tượng . Mỗi đối tượng chứa một thuộc tính duy nhất. Mỗi thuộc tính này là "giá trị" với chuỗi hoặc "độ trễ" với một mảng khác có cùng loại với giá trị của nó.

Chức năng sẽ in ra bàn điều khiển từng chuỗi "giá trị" và tạm dừng trong hai giây cho mỗi "độ trễ" trước khi xử lý mảng trễ theo cùng một cách. Hàm sẽ hỗ trợ bất kỳ độ sâu làm tổ trễ nào. Độ trễ sâu hai cấp được lồng ở trên chỉ là một ví dụ.

Đầu ra của chức năng để giao diện điều khiển cho các dữ liệu ví dụ trên nên (theo thứ tự này, và chỉ có thứ tự này):

a 
b 
c 
d 

Làm thế nào người ta sẽ viết code để thực hiện chức năng này?

Answer 1

Bạn có thể sử dụng Promises và async/chờ:

let data = [ 
 
    {value: 'a'}, 
 
    {delay: [ 
 
    {value: 'b'}, 
 
    {delay: [ 
 
     {value: 'c'} 
 
    ]} 
 
    ]}, 
 
    {value: 'd'} 
 
]; 
 

 
const delay =() => new Promise(res => 
 
    setTimeout(res, 2000)) 
 

 
const recFn = async data =>{ 
 
    for(let obj of data){ 
 
    if(obj.value){ 
 
     console.log(obj.value) 
 
    } else if(obj.delay){ 
 
     await delay(); 
 
     await recFn(obj.delay) 
 
    } 
 
    } 
 
} 
 

 
recFn(data);

Answer 2

Đây là một ý tưởng. Những gì bạn sẽ kết thúc là một mảng values trông giống như ["a", "delay", "b", "delay", "c", "d"]

Ngoài ra, here's a working fiddle.

let data = [ 
    {value: 'a'}, 
    {delay: [ 
     {value: 'b'}, 
     {delay: [ 
     {value: 'c'} 
     ]} 
    ]}, 
    {value: 'd'} 
    ]; 

let values = []; 

while(data.length) { 
    if(typeof data[0].value !== 'undefined') { 
    values.push(data[0].value); 
    data.shift(); 
    }else { 
    values.push('delay'); 
    var delayArray = data[0].delay; 
    data.shift(); 
    data = delayArray.concat(data); 
    } 
}; 

outputDelay(values); 

function outputDelay(elements) { 
    if(!elements.length) return false; 
    if(elements[0] == "delay") { 
    setTimeout(function(){ 
     elements.shift(); 
     outputDelay(elements); 
    }, 2000); 
    } else { 
    console.log(elements[0]); 
    elements.shift(); 
    outputDelay(elements); 
    } 
} 

Answer 3

Sử dụng async/await và đối tượng destructuring, đây là một cách tiếp cận dễ đọc hơn cho đệ quy đi bộ và in các đối tượng:

let data = [ 
 
    { value: 'a' }, 
 
    { delay: [ 
 
     { value: 'b' }, 
 
     { delay: [ 
 
      { value: 'c' } 
 
     ] 
 
     } 
 
    ] 
 
    }, 
 
    { value: 'd' } 
 
] 
 

 
function sleep(ms) { 
 
    return new Promise(resolve => { 
 
    setTimeout(resolve, ms) 
 
    }) 
 
} 
 

 
async function walk(array) { 
 
    for (const { value, delay } of array) { 
 
    if (value) { 
 
     console.log(value) 
 
    } else if (delay) { 
 
     await sleep(1000) 
 
     await walk(delay) 
 
    } 
 
    } 
 
} 
 

 
walk(data)