在 Javascript 中保持对象递归循环输出的顺序

Question

我正在尝试使用JSON文件来填充网页。我递归地循环遍历对象，将 [key， value] 属性写入字符串并使用"list"属性来增加嵌套级别。我需要它井井有条。

这是我编写的函数：

function recurOBJ(my_obj){
let x, str
str = ``
for( x in my_obj ){
str += x + `: ` + my_obj[x].copy
console.log(x);
if ( my_obj[x].hasOwnProperty('list') ){
recurOBJ(my_obj[x].list)
}
}
console.log(str);
return str
}

这是一个示例对象：

{
"item_01": {
"copy": ["Some text."]
},
"item_02": {
"copy": ["More text."],
"list": {
"listItem01": {
"copy": ["List text."],
"list": {
"item_a": { "copy": ["A: Lorem ipsum dolor sit amet."]},
"item_b": { "copy": ["B: Lorem ipsum dolor sit amet."]},
"item_c": { "copy": ["C: Lorem ipsum dolor sit amet."]},
"item_d": { "copy": ["D: Lorem ipsum dolor sit amet."]}
}
}}
}
}

问题是，当我查看 console.log(x( 输出时，所有内容都以正确的顺序显示，但是当返回字符串 console.log(str( 时，它首先显示嵌套值，然后显示更高级别的项目，即 item01 和 item02，之后。

正确 => 控制台.log(x(：

item_01
item_02
listItem01
item_a
item_b
item_c
item_d

不正确 => 控制台.log(str(：

item_a: A: Lorem ipsum dolor sit amet.
item_b: B: Lorem ipsum dolor sit amet.
item_c: C: Lorem ipsum dolor sit amet.
item_d: D: Lorem ipsum dolor sit amet.
listItem01: List text.
item_01: Some text.
item_02: More text.

我不知道如何解决这个问题。我尝试将对象转换为地图以保留顺序，但这也没有用。

Answer 1

所以，你做的一切都是对的。除了你也应该返回递归的值。

稍微更改一下您的代码，它应该可以工作。

function recurOBJ(my_obj){
let x, str
str = ``
for( x in my_obj ){
str += x + ': ' + my_obj[x].copy + 'n'
if ( my_obj[x].hasOwnProperty('list') ){
str += recurOBJ(my_obj[x].list) + 'n'
}
}
return str
}

输出：

item_01: Some text.
item_02: More text.
listItem01: List text.
item_a: A: Lorem ipsum dolor sit amet.
item_b: B: Lorem ipsum dolor sit amet.
item_c: C: Lorem ipsum dolor sit amet.
item_d: D: Lorem ipsum dolor sit amet.

Answer 2

您可以通过返回字符串数组和带有list属性或空对象的子项来采用递归方法。

function getData(object) {
return [].concat(
...Object
.entries(object)
.map(([k, v]) => [k + ': ' + v.copy[0], ...getData(v.list || {})])
);
}
var data = { item_01: { copy: ["Some text."] }, item_02: { copy: ["More text."], list: { listItem01: { copy: ["List text."], list: { item_a: { copy: ["A: Lorem ipsum dolor sit amet."] }, item_b: { copy: ["B: Lorem ipsum dolor sit amet."] }, item_c: { copy: ["C: Lorem ipsum dolor sit amet."] }, item_d: { copy: ["D: Lorem ipsum dolor sit amet."] } } } } } };
console.log(getData(data));

.as-console-wrapper { max-height: 100% !important; top: 0; }