首頁猿問使用 map 設置對象數組返回相同的值

使用 map 設置對象數組返回相同的值

JavaScript

郎朗坤 2022-10-27 16:57:15

我有一個數組listItems 0: "/static/media/m1.895f1b11.jpg"1: "/static/media/m2.895f1b11.jpg"length: 2和一個對象item={ src: "", key: ""}我正在嘗試將每個 listItems 添加到 src 中的項目中，例如：item={ src: "/static/media/m1.895f1b11.jpg", key: 0}并將此項目放入項目：//before :items = [];//after (this is what I want) :items = [ { src: "/static/media/m1.895f1b11.jpg", key: 0},{ src: "/static/media/m2.895f1b11.jpg", key: 1}];為此，我在 listItems 中使用地圖，并為每個項目將其添加到我的項目對象的 src 中，然后將我的項目對象添加到我的對象數組中listItems.map( (img,index) => { item.src = img; item.key = index; console.log("item.src : " +item.src + " item.key : "+item.key + " img : "+img + " index "+ index); items.push(item); }); for(k=0;k<items2.length;k++) console.log("items["+k+"] : "+items[k].src);它看起來不錯，但是當我得到我的日志結果時：item.src : /static/media/m1.895f1b11.jpg item.key : 0 img : /static/media/m1.895f1b11.jpg index 0 item.src : /static/media/m2.895f1b11.jpg item.key : 1 img : /static/media/m2.895f1b11.jpg index 1 items[0] : /static/media/m2.895f1b11.jpg items[1] : /static/media/m2.895f1b11.jpg展位 items[0] 和 items[1] 是一樣的，問題出在哪里？

查看完整描述

3 回答

慕桂英4014372

TA貢獻1871條經驗獲得超13個贊

問題是您只有一個 item對象，您只需在循環中對其進行修改。意識到即使你推入item了一個數組，這并不意味著你仍然不能改變它。并且您這樣做（在循環的下一次迭代中），然后item再次推送，因此您的數組現在有兩個對同一對象的引用（處于其最新狀態）。

旁注：.map旨在返回一個數組。使用那個力量。

let items = listItems.map((img, index) => {

return { // a NEW object

src: img,

key: index

};

});

甚至更短，通過為變量使用智能名稱和箭頭函數表達式語法：

let items = listItems.map((src, key) => ({src, key}));

反對回復 2022-10-27

慕田峪7331174

TA貢獻1828條經驗獲得超13個贊

因為您在同一個對象實例上進行操作。由于item.src = img您只是在更新src同一對象實例的屬性，因此您在數組中獲得了 2 次相同的對象。

您需要為每個項目創建新的對象實例：

const items = listItems.map((src, index) => ({

key: index,

src,

}));

為每個... => ({ ... })項目創建一個新的對象實例，它也可以這樣寫：

const items = listItems.map((src, index) => {

return {

key: index,

src,

}

});

反對回復 2022-10-27

千巷貓影

TA貢獻1829條經驗獲得超7個贊

你應該做這樣的事情

const listItems = ["/static/media/m1.895f1b11.jpg", "/static/media/m2.895f1b11.jpg"]

const list = []

listItems.map((item, index) => {

let newObj = {}

newObj.src = item;

newObj.key = index;

list.push(newObj);

} )

console.log(list)

在地圖內創建每個對象并將該對象推送到數組。

反對回復 2022-10-27

3 回答
0 關注
224 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

使用 map 設置對象數組返回相同的值

使用 map 設置對象數組返回相同的值

3 回答

添加回答