javascript - 数组的值在更新属性值时得到更新

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].CountryCode 的值更新为 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);
        }