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

Question

我有一个对象数组，例如我想用值 www.test.com/is/images/383773?@HT_dtImage 替换键 normal。我将 .replace 与正则表达式一起使用，基本上将 wid and hei 替换为 @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"}
]

我试过使用 .map 这样的 returns 原始对象。

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

我也试过这个，但是它 returns 它在一个数组中而不是一个包含对象的数组。我觉得我只是缺少一些简单的东西。

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

我正在寻找的预期输出是

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

在您的第一次尝试中，images.map returns 一个您未分配给任何内容的新数组。您返回的数组与作为参数传递的数组相同。

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

Answer 2

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

这是你的输出：

Answer 3

OP 不仅需要 map 原始数组，而且还必须创建和 return 浅层 [1]（并相应更改）每个数组项的副本。

[1] 对于 OP 的用例来说已经足够了，因为不必处理更深的嵌套 object/data 结构。

因此可以...

要么利用 Object.assign
或使用 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; }

如果 OP 故意想要改变原始数组的每个 url 项，那么 map 不是正确的方法，但 forEach 是 ...

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 4

您需要 return 一个包含具有所需键的对象的数组，执行如下操作：

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

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

How does one map an array in order to create both a new array with changed array items but without mutating the original array or any of its items?

javascript

arrays

mapping

object

shallow-copy