一个 map 如何创建一个数组以创建一个具有更改数组项但不改变原始数组或其任何项的新数组？

Question

I have an array of objects for example I want to replace the key normal with value www.test.com/is/images/383773?@HT_dtImage . I am using .replace with regex to basically replace the wid and hei with @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"}
]

I tried using a .map like this which just returns the original object.

const updateImages = images => {
  images.map(image => {
    return image.normal.replace(/\b(?:wid|hei)=[^&]*&?/g, "") + "@HT_dtImage"
  });
  return images;
};

I also tried this but it returns it in an array without not as an array with objects. I feel like I'm just missing something simple.

const updateImages = images => {
   return images.map(image => {
     return image.normal.replace(/\b(?:wid|hei)=[^&]*&?/g, "") + "@HT_dtImage"
  })
};

The expected output I am looking for is

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"}
]

Answer 1

  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);

Here's your output:

Answer 2

The OP not only needs to map the original array but also has to create and return a shallow [1] (and accordingly changed) copy of each array item.

[1] which for the OP's use case is sufficient enough due to not having to deal with deeper nested object/data structures.

Thus one could...

• either utilize Object.assign
• or one makes use of spread syntax ...

 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; }

In case the OP intentionally wants to mutate every of the original array's url item, then map was not the right method but forEach was...

 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; }

Answer 3

On your first try, images.map returns a new array which you don't assign to anything. You are returning the same array as the one passed as parameter.

const newImages = images.map(....);
return newImages

Answer 4

You neen to return an array with some object that have the needed key, so something like:

const updateImages = images => images.map(image => (
  {
     ...image,
     normal: image.normal.replace(/\b(?:wid|hei)=[^&]*&?/g, "") + "@HT_dtImage",
  }
);