使用 map 设置对象数组返回相同的值

Question

我有一个数组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] 是一样的，问题出在哪里？

Answer 1

问题是您只有一个 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}));

Answer 2

因为您在同一个对象实例上进行操作。由于item.src = img您只是在更新src同一对象实例的属性，因此您在数组中获得了 2 次相同的对象。

您需要为每个项目创建新的对象实例：

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

  key: index,

  src,

}));

为每个... => ({ ... })项目创建一个新的对象实例，它也可以这样写：

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

  return {

    key: index,

    src,

  }

});

Answer 3

你应该做这样的事情

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)

在地图内创建每个对象并将该对象推送到数组。