如何简化将嵌套对象转换为对象数组的过程？

Question

这是我的嵌套对象

var arr = [{
    "children": [{
        "children": [{
            "children": [],
            "Id": 1,
            "Name": "A",
            "Image": "http://imgUrl"
        }],
        "Id": 2
        "Name": "B",
        "Image": "http://imgUrl"
    }],
    "Id":3,
    "Name": "C",
    "Image": "http://imgUrl"
}]

我想将以上内容转换为以下格式

[{
    "Name": "C",
    "Id": 3,
    "Image": "http://imgUrl"
}, {
    "Name": "B",
    "Id": 2,
    "Image": "http://imgUrl"
}, {
    "Name": "A",
    "Id": 1,
    "Image": "http://imgUrl"
}]

我写了下面的代码来做到这一点

    var newArr = []
    function getNestedObj(obj){

        if(obj.length){
            for ( var i=0; i<obj.length; i++){
                var newObj = {};
                newObj.Name = obj[i].Name;
                newObj.Id = obj[i].Id;
                newObj.Image = obj[i].Image;
                newArr.push(newObj);

                if(obj[i].children.length !=0 ){
                    getNestedObj(obj[i].children)
                }
                else {
                    return newArr;
                }
        }
       }
    }

我想简化以上功能吗？我该如何实现？

Answer 1

尝试关注

let arr = [{"children":[{"children":[{"children":[],"Id":1,"Name":"A","Image":"http://imgUrl"}],"Id":2,"Name":"B","Image":"http://imgUrl"}],"Id":3,"Name":"C","Image":"http://imgUrl"}];

function fillWithChildren(a, r=[]) {
  a.forEach(({children, ...rest}) => {
    r.push(rest);
    if(children) fillWithChildren(children, r);
  });
  return r;
}
let result = fillWithChildren(arr);
console.log(result);

Answer 2

这可以像递归减少一样简单。

arr.reduce (function spr (res, cur) {
    let obj = {...cur}
    let children = obj.children
    delete obj.children;
    return children.reduce (spr, res).concat ([{
        ...obj
    }])
}, [])

let result = arr.reduce (function spr (res, cur) {
    let obj = {...cur}
    let children = obj.children;
    delete obj.children;
    return children.reduce (spr, res).concat ([{
      	...obj
    }])
}, [])

console.log (result)

<script>
var arr = [{
    "children": [{
        "children": [{
            "children": [{
                "children": [],
                "Id": 1,
                "Name": "A",
                "Image": "http://imgUrl"
            }],
            "Id": 1,
            "Name": "A",
            "Image": "http://imgUrl"
        }],
        "Id": 2,
        "Name": "B",
        "Image": "http://imgUrl"
    }],
    "Id":3,
    "Name": "C",
    "Image": "http://imgUrl"
}
, {
    "children": [{
        "children": [{
            "children": [],
            "Id": 1,
            "Name": "A",
            "Image": "http://imgUrl"
        }],
        "Id": 2,
        "Name": "B",
        "Image": "http://imgUrl"
    }],
    "Id":3,
    "Name": "C",
    "Image": "http://imgUrl"
}]
</script>

Answer 3

递归减少：

const fillWithChildren = (a = []) =>
a.reduce(
    (result, { children, ...rest }) =>
        result
            .concat(rest)
            .concat(fillWithChildren(children)),
    [],
);
fillWithChildren(arr);