javascript - 推送对象在 JavaScript 中无法正常工作

Question

JavaScript:

var songs = {};
var song = {};
var row = 0;
$('button').on('click', function(){
  row++
  song['name'] = 'hey' + row;
  songs['row' + row] = song;
  console.log(songs);
});

每次我单击按钮时，它都应该创建一个新的 ['name'] 并将其推送到对象 'songs'。点击 5 次后，我希望对象看起来像这样:

{   "row1": {
        "name": "hey1"
    },
    "row2": {
        "name": "hey2"
    },
    "row3": {
        "name": "hey3"
    },
    "row4": {
        "name": "hey4"
    }
    "row5": {
        "name": "hey5"
    }
}

但它看起来像这样

{   "row1": {
        "name": "hey5"
    },
    "row2": {
        "name": "hey5"
    },
    "row3": {
        "name": "hey5"
    },
    "row4": {
        "name": "hey5"
    }
    "row5": {
        "name": "hey5"
    }
}

我觉得有关系

songs['row' + row] = song;

https://jsfiddle.net/yhk81zbu/3/

为什么这行不通，我该如何解决？

Answer 1

您只有一个歌曲对象的实例在第 1 行、第 2 行、第 3 行等中共享。每次您编写 song['name'] = 'hey' + row; 时，您修改一首歌曲对象的“名称”字段，记住它被所有行共享。您必须确保每次都创建一个新的歌曲对象，而不是 song['name'] = 'hey' + row; 您可以编写 var song = {'name' : 'hey' + row }; 这样每一行都会有自己的歌曲对象，而不是共享一个。

var songs = {}
var row = 0;
$('button').on('click', function(){
  row++
  var song = {'name' : 'hey' + row };
  songs['row' + row] = song;
  console.log(songs);
});