0
242
Vistas¿Cómo se asigna una matriz para crear una nueva matriz con elementos de matriz cambiados pero sin mutar la matriz original o cualquiera de sus elementos?
Tengo una matriz de objetos, por ejemplo, quiero reemplazar la clave normal con el valor www.test.com/is/images/383773?@HT_dtImage . Estoy usando .replace with regex para reemplazar básicamente wid and hei con @HT_dtImage
const urls = [ {"normal": "www.test.com/is/images/383773?wid=200&hei=200", "thumbnail": "www.test.com/is/images/383773?wid=200&hei=200"}, {"normal": "www.test.com/is/images/383773?wid=200&hei=200", "thumbnail": "www.test.com/is/images/383773?wid=200&hei=200"}, {"normal": "www.test.com/is/images/383773?wid=200&hei=200", "thumbnail": "www.test.com/is/images/383773?wid=200&hei=200"} ] Intenté usar un .map como este que solo devuelve el objeto original.
const updateImages = images => { images.map(image => { return image.normal.replace(/\b(?:wid|hei)=[^&]*&?/g, "") + "@HT_dtImage" }); return images; };También probé esto, pero lo devuelve en una matriz sin una matriz con objetos. Siento que me estoy perdiendo algo simple.
const updateImages = images => { return images.map(image => { return image.normal.replace(/\b(?:wid|hei)=[^&]*&?/g, "") + "@HT_dtImage" }) };El resultado esperado que estoy buscando es
const urls = [ {"normal": "www.test.com/is/images/383773?@HT_dtImage", "thumbnail": "www.test.com/is/images/383773?wid=200&hei=200"}, {"normal": "www.test.com/is/images/383773?@HT_dtImage", "thumbnail": "www.test.com/is/images/383773?wid=200&hei=200"}, {"normal": "www.test.com/is/images/383773?@HT_dtImage", "thumbnail": "www.test.com/is/images/383773?wid=200&hei=200"} ]3 Respuestas
Responde la pregunta0
El OP no solo necesita map la matriz original, sino que también debe crear y devolver una copia superficial [1] (y modificada en consecuencia) de cada elemento de la matriz.
[1] que para el caso de uso del OP es suficiente debido a que no tiene que lidiar con estructuras de datos/objetos anidados más profundos.
Así uno podría...
- ya sea utilizar Object.assign
- o uno hace uso de la sintaxis extendida ...
const getNewListOfUpdatedUrlItems = itemList => { return itemList.map(item => { return { // create shallow `item` copy. ...item, // change `item` copy's `normal` property accordingly. normal: item.normal.replace(/\b(?:wid|hei)=[^&]*&?/g, "@HT_dtImage"), }; }); }; const urlItemList = [{ "normal": "www.test.com/is/images/383773?wid=200&hei=200", "thumbnail": "www.test.com/is/images/383773?wid=200&hei=200", }, { "normal": "www.test.com/is/images/383773?wid=200&hei=200", "thumbnail": "www.test.com/is/images/383773?wid=200&hei=200", }, { "normal": "www.test.com/is/images/383773?wid=200&hei=200", "thumbnail": "www.test.com/is/images/383773?wid=200&hei=200", }]; const newUrlItemList = getNewListOfUpdatedUrlItems(urlItemList); console.log({ newUrlItemList, urlItemList }); .as-console-wrapper { min-height: 100%!important; top: 0; } En caso de que el OP quiera mutar intencionalmente cada uno de los elementos de URL de la matriz original, entonces el map no era el método correcto, pero forEach era ...
function changeUrlNormal(urlItem) { urlItem.normal = urlItem.normal.replace(/\b(?:wid|hei)=[^&]*&?/g, "@HT_dtImage"); } const urlItemList = [{ "normal": "www.test.com/is/images/383773?wid=200&hei=200", "thumbnail": "www.test.com/is/images/383773?wid=200&hei=200", }, { "normal": "www.test.com/is/images/383773?wid=200&hei=200", "thumbnail": "www.test.com/is/images/383773?wid=200&hei=200", }, { "normal": "www.test.com/is/images/383773?wid=200&hei=200", "thumbnail": "www.test.com/is/images/383773?wid=200&hei=200", }]; urlItemList.forEach(changeUrlNormal); console.log({ urlItemList }); .as-console-wrapper { min-height: 100%!important; top: 0; }0
En su primer intento, images.map devuelve una nueva matriz que no asigna a nada. Está devolviendo la misma matriz que la pasada como parámetro.
const newImages = images.map(....); return newImages0
let mapped_urls = urls.map((url) => { url.normal.replace(/\b(?:wid|hei)=[^&]*&?/g, '') + '@HT_dtImage'; return url; }); console.log('URLs', mapped_urls); const urls = [ { normal: 'www.test.com/is/images/383773?wid=200&hei=200', thumbnail: 'www.test.com/is/images/383773?wid=200&hei=200', }, { normal: 'www.test.com/is/images/383773?wid=200&hei=200', thumbnail: 'www.test.com/is/images/383773?wid=200&hei=200', }, { normal: 'www.test.com/is/images/383773?wid=200&hei=200', thumbnail: 'www.test.com/is/images/383773?wid=200&hei=200', }, ]; let mapped_urls = urls.map((url) => { url.normal = url.normal.replace(/\b(?:wid|hei)=[^&]*&?/g, '') + '@HT_dtImage'; return url; }); console.log('URLs', mapped_urls);Aquí está su salida:
