數組的值在更新屬性值時更新

Question

我在JS文件中有以下代碼

    var listOfCountries = [];
    var Country = {};
    Country = { "CountryCode": null, "SerialNo": 0, "FrzInd": false }

    for (var i=0; i < $('#ulCustomCountryList li').length; i++) {
      Country.CountryCode = $("#countryCode_" + i).val();
      Country.SerialNo = $("#serialNo_" + i).val();
      listOfCountries.push(Country);
    }

在第一次迭代中：當 countryCode_0 是 "IND" 然后listOfCountries[0].CountryCode = "IND" ，在第二次迭代中，當 countryCode_1 是 "AUS" 然后listOfCountries[1].CountryCode = "AUS"但它也會更新 listOfCountries 的值[0] listOfCountries[0].CountryCode = "AUS"到listOfCountries[0].CountryCode = "AUS"

Answer 1

因為對象是一個引用。 所有對對象的引用都將被更新。 你每次迭代都推送同一個對象，所以你有兩種方法來修復它

1-在每次迭代中創建新對象如下：

  var countriesCount = $('#ulCustomCountryList li').length; //- 1
  listOfCountries =[];
  for (var i = 0; i < countriesCount; i++) {

    var Country = { "CountryCode": null, "SerialNo": 0, "FrzInd": false }
    Country.CountryCode = $("#countryCode_" + i).val();
    Country.SerialNo = $("#serialNo_" + i).val();
    listOfCountries.push(Country);

  }

或 2 - 每次迭代都使用Object.assign({},Country)復制對象。

     var countriesCount = $('#ulCustomCountryList li').length; //- 1
       var listOfCountries = [];
        var Country = {};
        Country = { "CountryCode": null, "SerialNo": 0, "FrzInd": false }

        for (var i=0; i < countriesCount; i++) {
          var copy = Object.assign({}, Country);
          copy.CountryCode = $("#countryCode_" + i).val();
          copy.SerialNo = $("#serialNo_" + i).val();
          listOfCountries.push(copy);
        }