javascript - 为什么这个 forEach 函数在所有元素中重复最后一个值？

Question

看这段代码:

var machines = [{
  "name": "inclinedPlane",
  "images": {
    "draggable": {
      "src": "@@instanceAssets/assets/images/mc_inclinedPlane.png",
      "sound": "@@instanceAssets/assets/audios/inclinedPlane.mp3"
    },
    "drop": {
      "default": "@@instanceAssets/assets/images/inclinedPlaneSong.png",
      "onDrop": "@@instanceAssets/assets/images/inclinedPlaneSongFilled.png"
    }
  }
},
{
  "name": "pulley",
  "images": {
    "draggable": {
      "src": "@@instanceAssets/assets/images/mc_pulley.png",
      "sound": "@@instanceAssets/assets/audios/pulley.mp3"
    },
    "drop": {
      "default": "@@instanceAssets/assets/images/pulleySong.png",
      "onDrop": "@@instanceAssets/assets/images/pulleySongFilled.png"
    }
  }
},
{
  "name": "lever",
  "images": {
    "draggable": {
      "src": "@@instanceAssets/assets/images/mc_lever.png",
      "sound": "@@instanceAssets/assets/audios/lever.mp3"
    },
    "drop": {
      "default": "@@instanceAssets/assets/images/leverSong.png",
      "onDrop": "@@instanceAssets/assets/images/leverSongFilled.png"
    }
  }
}];

var drops = {
  "component": "DropContainer",
  "parent": "main",
  "style": {
    "type": "image",
    "scale": { "x": 1, "y": 1 }
  }
};

我想将每台机器 drop 图像的 default 值分配给合并对象的 style< 的 src 属性.

machines.forEach((machine) => {
    const config = Object.assign(machine.images.drop, drops);
    config.style.src = machine.images.drop.default;
    console.log(config);
});

但由于某些原因，每个对象的样式 上的src 值始终是所有对象的最后一个。我不明白为什么会这样，我花了很多时间在这上面没有结果。你能看到这里发生了什么吗？

Answer 1

• 您需要将 drops 对象放入函数 forEach 中。

  The problem you're facing is the reference of the same object drops in every assign you're executing.

• 设置默认值如下:config.style.src = machine.images.drop.default;

var machines = [{    "name": "inclinedPlane",    "images": {      "draggable": {        "src": "@@instanceAssets/assets/images/mc_inclinedPlane.png",        "sound": "@@instanceAssets/assets/audios/inclinedPlane.mp3"      },      "drop": {        "default": "@@instanceAssets/assets/images/inclinedPlaneSong.png",        "onDrop": "@@instanceAssets/assets/images/inclinedPlaneSongFilled.png"      }    }  },  {    "name": "pulley",    "images": {      "draggable": {        "src": "@@instanceAssets/assets/images/mc_pulley.png",        "sound": "@@instanceAssets/assets/audios/pulley.mp3"      },      "drop": {        "default": "@@instanceAssets/assets/images/pulleySong.png",        "onDrop": "@@instanceAssets/assets/images/pulleySongFilled.png"      }    }  },  {    "name": "lever",    "images": {      "draggable": {        "src": "@@instanceAssets/assets/images/mc_lever.png",        "sound": "@@instanceAssets/assets/audios/lever.mp3"      },      "drop": {        "default": "@@instanceAssets/assets/images/leverSong.png",        "onDrop": "@@instanceAssets/assets/images/leverSongFilled.png"      }    }  }];

machines.forEach((machine) => {
  var drops = {    "component": "DropContainer",    "parent": "main",    "style": {      "type": "image",      "scale": {        "x": 1,        "y": 1      }    }  };
  
  const config = Object.assign(machine.images.drop, drops);
  config.style.src = machine.images.drop.default;
});

console.log(JSON.stringify(machines, null, 2))

.as-console-wrapper { max-height: 100% !important; top: 0; }