Question

我的目标是将 input 数组转换为 output 数组的结构。输入数组和输出数组如下所示。如果仔细观察，我们会发现ID在两个数组中都是相同的，并且只有标题更改。

var output = [{
        id: "1",
        title: 'title',
        children: [],
    },
    {
        id: "2",
        title: 'title2',
        children: [],
    },
    {
        id: "3",
        title: 'title3',
        children: [{
            id: "4",
            title: 'title4',
            children: [],
        }, {
            id: "5",
            title: 'title5',
            children: [{
                id: "6",
                title: 'title6',
                children: [],
            }, {
                id: "7",
                title: 'title7',
                children: [],
            }, {
                id: "9",
                title: 'title9',
                children: [],
            }]
        }],
    }
]

var input = [{
        id: "1",
        title: 'title_chnaged',
        children: [],
    },
    {
        id: "2",
        title: 'title_changed',
        children: []
    },
    {
        id: "3",
        title: 'title_changed',
        children: [{
            id: "4",
            title: 'title_changed',
            children: [],
        }, {
            id: "5",
            title: 'title_changed',
            children: [],
            children: [{
                    id: "6",
                    title: 'title_changed',
                    children: [],
                },
                {
                    id: "7",
                    title: 'title_changed',
                    children: [],
                }
            ]
        }],
    },
    {
        id: "9",
        title: 'title_chnaged',
        children: [],
    }
]

此函数将查找上输出数组对应元素的输入数组。 ID的基础

let found;

function findTheKey(id, widget) {
    let newObj = [...widget];
    for (var key in newObj) {
        if (newObj[key]["id"] == id) {
            found = newObj[key];
            break;
        }
        if (newObj[key].hasOwnProperty("children")) {
            findTheKey(id, newObj[key].children);
        }
    }
    return found;
}

此函数将遍历输出数组并在输入数组中查找相应的元素

function findAllObjectOnArray(output) {
    let newObj = [...output];
    for (let key in newObj) {
        newObj[key] = {
            ...findTheKey(newObj[key]['id'], input),
            children: newObj[key].children
        };
        if (newObj[key].hasOwnProperty("children")) {
            findAllObjectOnArray(newObj[key].children, input);
        }
    }
    return newObj;
}



var result = findAllObjectOnArray(output)
console.log(result)

结果与标签1上预期的一样，但是当我们移入嵌套对象时，它没有改变。

请给我建议一些可以使它工作的东西。任何提示或解决方案都非常受欢迎吗？

Answer 1

我创建了一个函数fn，该函数将数组元素映射到具有属性title = "title"+id的元素，然后递归地映射子节点。

var output = [
{
	id: "1",
	title: 'title',
	children: [],
},
{
	id: "2",
	title: 'title2',
	children: [],
},
{
	id: "3",
	title: 'title3',
	children: [
	{
		id: "4",
		title: 'title4',
		children: [],
	},
	{
		id: "5",
		title: 'title5',
		children: [
		{
			id: "6",
			title: 'title6',
			children: [],
		},
		{
			id: "7",
			title: 'title7',
			children: [],
		},
		{
			id: "9",
			title: 'title9',
			children: [],
		}]
	}],
}]

var input = [
{
	id: "1",
	title: 'title_chnaged',
	children: [],
},
{
	id: "2",
	title: 'title_changed',
	children: []
},
{
	id: "3",
	title: 'title_changed',
	children: [
	{
		id: "4",
		title: 'title_changed',
		children: [],
	},
	{
		id: "5",
		title: 'title_changed',
		children: [],
		children: [
		{
			id: "6",
			title: 'title_changed',
			children: [],
		},
		{
			id: "7",
			title: 'title_changed',
			children: [],
		}]
	}],
},
{
	id: "9",
	title: 'title_chnaged',
	children: [],
}]

var fn =  node =>
	node && node.map( x => 
		({
			...x,
			title: "title"+x.id,
			children: fn(x.children)
		})
	)



var result = fn(output)
console.log(result)

Answer 2

提示：坚持不变（复制所有对象）或就地对其进行修改。除非您知道自己在做什么，否则将两者混在一起会使事情变得非常复杂。

我不确定这是否是您的意思吗？由于title_changed字符串都是相同的，因此很难确定它是否可以正常工作。我刚刚添加了newObj[key].children = findAllObjectOnArray(newObj[key].children);，以使children属性得到正确更新（因为您在每次调用时都对数组进行了克隆，因此当您尝试通过引用对其进行修改时，children不会得到更新）。

    var output = [
    {
    	id: "1",
    	title: 'title',
    	children: [],
    },
    {
    	id: "2",
    	title: 'title2',
    	children: [],
    },
    {
    	id: "3",
    	title: 'title3',
    	children: [
    	{
    		id: "4",
    		title: 'title4',
    		children: [],
    	},
    	{
    		id: "5",
    		title: 'title5',
    		children: [
    		{
    			id: "6",
    			title: 'title6',
    			children: [],
    		},
    		{
    			id: "7",
    			title: 'title7',
    			children: [],
    		},
    		{
    			id: "9",
    			title: 'title9',
    			children: [],
    		}]
    	}],
    }]

    var input = [
    {
    	id: "1",
    	title: 'title_chnaged',
    	children: [],
    },
    {
    	id: "2",
    	title: 'title_changed',
    	children: []
    },
    {
    	id: "3",
    	title: 'title_changed',
    	children: [
    	{
    		id: "4",
    		title: 'title_changed',
    		children: [],
    	},
    	{
    		id: "5",
    		title: 'title_changed',
    		children: [],
    		children: [
    		{
    			id: "6",
    			title: 'title_changed',
    			children: [],
    		},
    		{
    			id: "7",
    			title: 'title_changed',
    			children: [],
    		}]
    	}],
    },
    {
    	id: "9",
    	title: 'title_chnaged',
    	children: [],
    }]

let found;

function findTheKey(id, widget) {
    let newObj = [...widget];
    for (var key in newObj) {
        if (newObj[key]["id"] == id) {
            found = newObj[key];
            break;
        }
        if (newObj[key].hasOwnProperty("children")) {
            findTheKey(id, newObj[key].children);
        }
    }
    return found;
}

function findAllObjectOnArray(output) {
    let newObj = [...output];
    for (let key in newObj) {
        newObj[key] = {
            ...findTheKey(newObj[key]['id'], input),
            children: newObj[key].children
        };
        if (newObj[key].hasOwnProperty("children")) {
            newObj[key].children = findAllObjectOnArray(newObj[key].children);
        }
    }
    return newObj;
}

    var result = findAllObjectOnArray(output)
    console.log(result)

如何基于id使用另一个嵌套数组对嵌套数组对象进行排序？

2 个答案: