Obtengo una respuesta de varias API con relativamente la misma estructura de objetos, pero los nombres de las claves pueden variar como ejemplo:
response1 = {name:"Something", image:"path_to_image", ...} response2 = {title:"Something", image:"path_to_image", ...} response3 = {label:"Something", image:"path_to_image", ...}Quiero desestructurar esos objetos con el mismo nombre de variable:
const {name|title|label: title, ...rest} = responsepara usarlo en el componente sin la necesidad de múltiples comprobaciones de claves de objeto como este como ejemplo:
const title = response?.title || response?.name || response?.label;¿Se puede hacer con la desestructuración directamente o con cualquier solución de una sola línea?
El uso de reduce con una lista de claves esperadas le permitiría encontrar la primera de las utilizadas. Esto lo hace dinámico sobre el foo.title ?? foo.name ... tipo de enfoque, que podría ser útil.
Por supuesto, podría envolver esto en una función para su reutilización y convertirlo en una sola línea que se describa a sí misma.
response1 = {name:"Something name", image:"path_to_image", } response2 = {title:"Something title", image:"path_to_image", } response3 = {label:"Something label", image:"path_to_image", } const result = [ response1, response2, response3 ].map(response => { return { name: [ 'name', 'title', 'label' ].reduce((acc, key) => acc ?? response[key], undefined), image: response.image, } }) console.log(result)Podrías hacer algo extraño con los inicializadores predeterminados:
const {name, label=name, title=label, ...rest} = response; // or const {name, label, title = name ?? label, ...rest} = response; Tenga en cuenta, sin embargo, que esto también declarará las variables name y label . Su solución de una línea es mucho más limpia y mejor de entender:
const title = response.title ?? response.name ?? response.label;Alternativamente, si realmente tiene muchas propiedades, es posible que desee realizar un bucle:
const key = ['name', 'title', 'label', 'subject', 'content', 'body'].find(key => key in response); const {[key]: title, ...rest} = response;Realmente no existe una técnica de desestructuración simple disponible. Al menos no se me ocurre ninguno.
const arr=[ {name: "Something1", image:"path_to_image1",xtra:"property"}, {title:"Something2", image:"path_to_image2",something:"else"}, {label:"Something3", image:"path_to_image3",here:"too"}]; const res=arr.map(o=>{ let t=o.name||o.title||o.label; t={name:t, ...o}; delete t.title; delete t.label; return t; }) console.log(res);