如何在沒有引用的情況下在數組內添加對象

Question

我的代碼到目前為止

var chartSeriesArray = [{"EnableAnimation": true,"AnimationDuration": 1}];

let refArray = chartSeriesArray; 
let clonedArray = [...chartSeriesArray]; // will clone the array

var x = [];
for(i=0;i<2;i++){
    x.push(clonedArray);
}   
x[0].foo = "bar";
console.log(x); 

控制台輸出為

0:[{…}, foo: "bar"]
1:[{…}, foo: "bar"]

無論是在兩種情況下都嘗試循環refArray還是clonedArray ，它都在項目0和1中都添加了foo，例如，我只想在0添加。

預期輸出為

0:[{…}, foo: "bar"]
1:[{…}]

我想以后分別訪問0和1 。

我嘗試了所有方法，但沒有任何效果，我們非常感謝您的幫助。

畢竟所有建議，當我嘗試下面的代碼

var metadata = 
{
    "KPISDetail": [{
        "ChartSeriesList": {
            "EnableAnimation": true,
            "AnimationDuration": 1
        }
    }, {
        "ChartSeriesList": {
            "EnableAnimation": true,
            "AnimationDuration": 1
        }
    }]
}

var data = [];
var x = [];

for(var l=0;l<2;l++){
    data.push(metadata.KPISDetail[l].ChartSeriesList);
    x.push(...data.map(o => Object.assign({}, o)))
}
x[0].foo = "bar";
x[1].foo = "foo";
console.log(x);

結果應該是2，僅是因為我的循環執行了2次。 但是我得到3次輸出，這是錯誤的。 我低於輸出

Answer 1

您應該使用克隆的元素創建數組克隆：

let clonedArray = chartSeriesArray.map((item) => Object.assign({}, item))

Answer 2

您可以嘗試以下操作：

var x = [];
for(i=0;i<2;i++){
    let real_clone = clonedArray.slice(0); // if you need to clone an array
    let real_clone = JSON.parse(JSON.stringify(clonedArray)); // if you need to clone both array and object
    x.push(real_clone);
}   

Answer 3

問題是您創建一個克隆的陣列並多次推送。 您需要為每個推送創建一個新的克隆數組。

 var chartSeriesArray = [{"EnableAnimation":true,"AnimationDuration": 1}]; var x = []; for(i=0;i<2;i++){ x.push([...chartSeriesArray]); } x[0].foo = "bar"; console.log(x); 

Answer 4

您將clonedArray推送到x 2次，但是您忘記了兩次都使用相同的變量，因此兩者的內存分配是相同的，因此，如果要在x元素上添加某些內容，它們會同時反映在這兩個元素上。 為了達到您可以使用的欲望結果-

var chartSeriesArray = [{"EnableAnimation": true,"AnimationDuration": 1}];

let refArray = chartSeriesArray; 
let clonedArray = [...chartSeriesArray]; // will clone the array

var x = [];
for(i=0;i<2;i++){
    x.push(JSON.parse(JSON.stringify(clonedArray))); // will create magic 
}   
x[0].foo = "bar";
console.log(x); 

更新的代碼-

var metadata = 
{
    "KPISDetail": [{
        "ChartSeriesList": {
            "EnableAnimation": true,
            "AnimationDuration": 1
        }
    }, {
        "ChartSeriesList": {
            "EnableAnimation": true,
            "AnimationDuration": 1
        }
    }]
}

var data = [];
var x = [];

for(var l=0;l<2;l++){
    x.push(JSON.parse(JSON.stringify(metadata.KPISDetail[1].ChartSeriesList)))
}
x[0].foo = "bar";
x[1].foo = "foo";
console.log(x);