有沒有辦法復制 javascript 中的對象數組？

Question

這可能是我在 javascript 中的無能造成的問題，因為我是該語言的新手，但到目前為止我還沒有找到有效的解決方案。

問題是我想制作一個對象數組的副本數組，然后在不更改初始數組中對象的值的情況下更改副本數組中的數據，最后再次將副本數組分配給初始數組，這樣我就可以使用初始值在另一個 function 中再次使用它。

我制作了一個包含兩個類的簡單程序 - Country 包含一些屬性和一個 function 來更改其中一個屬性，World 包含一個國家數組和一個 function 來更改數組中所有國家的數據。 我創建了一個 World 實例，調用 changeAllCountriesData function 並在最后打印 countries 數組和 copyData 數組的值。 如您所見，它們都發生了變化，我不確定原因。

 class Country{ name; area; population; constructor(name, area, population){ this.name = name; this.area = area; this.population = population; } changeData(){ this.population += Math.round(this.population * 0.02); } } class World{ countries = []; copyData = []; constructor(){ this.loadData(); this.copyData = this.countries.slice(0); } loadData(){ this.countries.push(new Country("Denmark", 41990, 5839809)); this.countries.push(new Country("Germany", 349360, 83159604)); this.countries.push(new Country("Netherlands", 33690, 17342709)); } changeAllCountriesData(){ this.copyData.forEach(c => { c.changeData(); }) } } console.log("Initial information for the population: 5839809, 83159604, 17342709") w = new World(); w.changeAllCountriesData(); console.log("countries array:") console.log(w.countries); console.log("copyData array:") console.log(w.copyData);

我嘗試過的其他方法代替了 this.copyData = this.countries.slice(0)：

1.

this.copyData = [...this.countries]

2.

this.copyArray = Array.from(this.countries);
this.copyData = copyArray[0];

3.

this.countries.forEach(c => {
      this.copyData.push({...c});
})

上面的那個在每次計算后返回 NaN。

4.

this.countries.forEach(c => {
      let obj = Object.assign({}, c);
      this.copyData.push(obj);
})

5.

this.copyData = this.countries.concat();

這些方法都沒有以初始數組保持不變或在不返回 NaN 的情況下進行計算的方式制作副本數組。

Answer 1

在 JS 中，對象是使用引用來復制的。 因此，當您.slice(0)時，您是部分正確的，但問題是，內部值是對象。 所以新數組有以前的值。

現在您也可以嘗試.map(obj => ({...obj }) )但這將不起作用，因為 object spread 將創建一個新的 object，它具有屬性而不是方法。 所以任何方法，比如changeData都不會出現在這個 object 上。因此，你必須創建一個復制機制到你的 class。

嘗試更新到

cloneObject() {
  const {name, area, population} = this;
  return new Country(name, area, population)
}

...

this.copyData = this.countries.map( (obj) => obj.cloneObject() );

注意：您可以擴展此功能的功能。 您可以添加一個參數來覆蓋這些值。 這將允許您在一個 go 中執行多項操作：

cloneObject( overrides ) {
  const { name, area, population } = { ...this, ...overrides };
  return new Country(name, area, population)
}

...

this.copyData = this.countries.map( (obj) => obj.cloneObject({ name: 'Hello World' }) );

示例代碼：

 class Country{ name; area; population; constructor(name, area, population){ this.name = name; this.area = area; this.population = population; } cloneObject() { const {name, area, population} = this; return new Country(name, area, population) } changeData(){ this.population += Math.round(this.population * 0.02); } } class World{ countries = []; copyData = []; constructor(){ this.loadData(); this.copyData = this.countries.map( (obj) => obj.cloneObject() ); } loadData(){ this.countries.push(new Country("Denmark", 41990, 5839809)); this.countries.push(new Country("Germany", 349360, 83159604)); this.countries.push(new Country("Netherlands", 33690, 17342709)); } changeAllCountriesData(){ this.copyData.forEach(c => { c.changeData(); }) } } console.log("Initial information for the population: 5839809, 83159604, 17342709") w = new World(); w.changeAllCountriesData(); console.log("countries array:") console.log(w.countries); console.log("copyData array:") console.log(w.copyData);

Answer 2

我正要發表評論，但不能，因為我還沒有足夠的分數。

1. 在changeAllCountriesData() （在class World內）中，您正在嘗試調用changeDate() function，這是 class Country 內的本地 function。 我不確定 class World 是否可以直接訪問另一個 class 的本地 function。 在將 class 分配給變量var 、 let或const之后，您可以在 class 中調用 function 。 例子：

   const codeland = new Country('美國', 123, 456);

   codeland.changeData();

現在，codeland 是全局變量。 現在您可以通過 class 世界中的 codeland 變量訪問 changeData() function。

我不是 JavaScript 的專家，我相信一定有更簡單的方法！

至於復制arrays，方法#1和#3是正確的。 （不確定方法 #2 和 #4。方法 #5 將countries連接到copyData 。）它們返回 NaN，因為當您將數據從一個數組復制到另一個數組時，國家和 copyData 都是空的。 因此，它是 NaN（或未定義）。

我希望它有所幫助！