Отображение объектов с глубокой вложенностью
У меня есть объект:
const object = {
children: [{
uuid: '1',
children: [{
uuid: '2',
children: [{
uuid: '3',
children: []
},
{
uuid: '4',
children: [{
uuid: '5',
children: []
}]
}
]
},
{
uuid: '6',
children: []
}
]
}]
}
Мне нужна функция, которая будет отображать каждого ребенка:
Javascript
deepMapChildren(object, (child) => ({...child, uuid: 'new uuid'}))
У кого-нибудь есть сценарий для этого или он знает встроенный способ сделать это?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Это решение вызывает deepMapChildren рекурсивно для каждого дочернего элемента, чтобы обновить дочерний элемент и его дочерние элементы. Функция использует деструктурирование с отдыхом, чтобы отделить children от текущего дочернего элемента. Затем он распространяет результаты применения обратного вызова cb к дочернему элементу и отображает дочерние элементы с помощью deepMapChildren.
const deepMapChildren = (obj, cb, childrenKey = 'children') => {
const { [childrenKey]: children = [], ...child } = cb(obj); // update the child, and seperate the child's content and it's children
return {
...child,
[childrenKey]: children.map(c => deepMapChildren(c, cb)) // map the children (if any)
};
}
const object = {"children":[{"uuid":"1","children":[{"uuid":"2","children":[{"uuid":"3","children":[]},{"uuid":"4","children":[{"uuid":"5","children":[]}]}]},{"uuid":"6","children":[]}]}]}
const result = deepMapChildren(object, (child) =>
({...child, uuid: 'new uuid'})
)
console.info(result)Пожалуйста. Трудно разработать что-то для всех случаев, не зная случаев. Где он терпит неудачу?
deepMapChildren(state, (node) => { if (node.uuid === parentId) { return { ...node, children: [...node.children, newElement], }; } return node; }); node.children не определен
Спасибо, но это все еще не работает, когда я добавляю новых дочерних элементов внутри обратного вызова: deepMapChildren(state, (node) => { if (node.uuid === parentId) { return { ...node, children: [... node.children, newElement], }; } возвращаемый узел; })
Вам нужно проверить, есть ли у узла дети, прежде чем пытаться манипулировать им - if (node.uuid === parentId && node.children)
«Дети» иногда могут быть пустым массивом, но так должно было быть всегда. Пожалуйста, проверьте это stackblitz.com/edit/typescript-rjjvxw
Спасибо за элегантное решение, но оно работает не во всех случаях.