如何在对象列表的每个元素中更改字符串的部分?

Question

这是一个代码块的一部分，用于从IGDB的API获取游戏列表的响应和每个游戏的详细信息作为JSON数据:

.then(response => {
const collections = response.data;
const images = [];

collections.forEach(collection => {
collection.cover.url.replace('t_thumb', 't_1080p')
// let imageURL = collection.cover.url;
// imageURL.replace('t_thumb', 't_1080p');
// images.push(imageURL);
})
})

在IGDB的数据库中，它们有不同的游戏封面大小和质量，你可以通过将URL的一部分从t_thumb更改为t_1080p来访问每种类型。我试图通过使用forEach和.replace()来改变URL的那一部分，如代码中所示，但字符串没有改变。我还尝试通过复制每个元素，替换字符串的一部分，然后将其插入新数组(注释掉的代码)，将每个URL逐个添加到新数组中，但这也不起作用。如何更改集合列表中每个字符串的一部分?

Answer 1

String.replace()方法返回一个替换值的新字符串。replace()方法不改变原字符串

Try this:

collection.cover.url = collection.cover.url.replace('t_thumb', 't_1080p')

Live Demo:

let collections = [{
cover: {
url: 'alpha'
}
}, {
cover: {
url: 't_thumb'
}
}, {
cover: {
url: 'beta'
}
}, {
cover: {
url: 't_thumb'
}
}, {
cover: {
url: 't_thumb'
}
}];
collections.forEach(collection => {
collection.cover.url = collection.cover.url.replace('t_thumb', 't_1080p')
});
console.log(collections);

Answer 2

由于javascript中的字符串是不可变的，所以你不能修改原始字符串。

string.replace()

在修改后返回一个新字符串。要获得更改后的字符串，您需要将replace()返回的值赋值给变量。

你可以这样做

collection.cover.url = collection.cover.url.replace('t_thumb', 't_1080p')

Answer 3

您可以将map与扩展运算符一起使用，并替换为:

const updatedCollections = collections.map(el => ({
...el,
cover: { ...el.cover, url: el.cover.url.replace('t_thumb', 't_1080p') },
}));