クローンされた配列をJavaScriptでスプライスすると、元の配列がスプライスされるのはなぜですか？

Question

は、私は、次のコードを持っている：

var coords = [ 
    {lat: 39.57904, lng: -8.98094, type: "a"}, // A 
    {lat: 39.55436, lng: -8.95493, type: "b"}, // B 
    {lat: 39.56634, lng: -8.95836, type: "c"} // C 
]; 

var travelingOptions = []; 

getAllTravelingOptions(); 

function getAllTravelingOptions(){ 
    coords.forEach((point, pos) => { 
     let c = coords; 
     delete c[pos]; 
     console.log(c); 
     console.log(coords); 
    }); 
} 

なぜそれが変数cとcoordsは常に同じであるということですか？ cを削除すると、そのアクションはcoordsに反映されます。これは正常な動作ですか？

Answer 1

cの割り当てのため、coordsの参照が取得されます。

coordsの変更は、cに新しい値が割り当てられるまで、cになります。

Array.sliceで配列のコピーを作成すると、新しい配列が得られますが、オブジェクトの参照は同じです。 1つのオブジェクトを内部で変更する場合、cの同じ参照で同じオブジェクトを変更しています。

var coords = [ 
 
     {lat: 39.57904, lng: -8.98094, type: "a"}, // A 
 
     {lat: 39.55436, lng: -8.95493, type: "b"}, // B 
 
     {lat: 39.56634, lng: -8.95836, type: "c"} // C 
 
    ], 
 
    c = coords.slice(); 
 

 
console.log(c); 
 
coords[1].type = 'foo'; 
 
console.log(c);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

割り当てはそれだけorginalオブジェクト/配列への参照を作成する配列をクローニングしません。 cとcoordsは今、同じオブジェクトを参照するため

let c = coords.slice(); 

Answer 3

これが起こっている：あなたは浅いコピーを作成するArray.prototype.slice()を使用することができます。これを防ぐには、let c = coords.slice()を使用してcoordsのコピーを作成し、cに割り当てます。

let original = [1, 2, 3, 4]; 
 
let test = original; 
 
let testSlice = original.slice(); 
 

 
original[0] = 12345; 
 

 
console.log('test: ', test) 
 
console.log('testSlice: ', testSlice)

しかし、新しい配列がまだ古い配列がやったのと同じオブジェクトを参照します。このための迅速な修正は、これらのオブジェクトを「複製する」ことです。

let objs = [ 
 
    {'obj': 1}, 
 
    {'obj': 2}, 
 
    {'obj': 3} 
 
]; 
 

 
let newArr = []; 
 

 
objs.forEach(obj => { 
 
\t let newObj = {}; 
 
\t Object.keys(obj).forEach(key => { 
 
    \t newObj[key] = obj[key]; 
 
    }); 
 
    newArr.push(newObj); 
 
}); 
 

 
console.log('old: ', objs) 
 
console.log('new: ', newArr) 
 

 
newArr[0].obj = 12345; 
 

 
console.log('old after changing obj on new: ', objs)