Does Spreading create shallow copy?

问题

As per the example given here,

let first:number[] = [1, 2];
let second:number[] = [3, 4];

let both_plus:number[] = [0, ...first, ...second, 5];
console.log(`both_plus is ${both_plus}`);
first[0] = 20;
console.log(`first is ${first}`);
console.log(`both_plus is ${both_plus}`);
both_plus[1]=30;
console.log(`first is ${first}`);
console.log(`both_plus is ${both_plus}`);

Spreading shows a deep copy, because all three array's have it's own duplicates, based on below output:

both_plus is 0,1,2,3,4,5
first is 20,2
both_plus is 0,1,2,3,4,5
first is 20,2
both_plus is 0,30,2,3,4,5

Documentation says: Spreading creates a shallow copy of first and second. How do I understand this?

回答1:

In your case a shallow copy and deep copy are the same. For an array containing only primitives, they will always be identical. You'll only notice the difference when your array contains other objects.

Javascript is pass by value, so when an array is shallow copied (such as by using spread), each value in the original array is copied to the new array. In the case of a primitive, the value is copied directly and changes made to it have no effect on the original.

However, when the array contains objects, each value is itself a reference to something else. So even though the reference has been copied to a new array, it still points to the same thing as the reference in the original array. So while mutating the new array will not change the original, mutating the elements of the array will affect the original.

Here's an example:

const objArray = [{foo: "bar"}];
const shallowCopy = [...objArray];

// Changing the array itself does not change the orignal. Note the
// original still only has one item, but the copy has two:
shallowCopy.push({foo: "baz"});
console.log("objArray after push:", objArray);
console.log("shallowCopy after push:", shallowCopy);

// However, since shallowCopy[0] is a reference pointing to the same object
// as objArray[0], mutating either will change the other:
shallowCopy[0].foo = "something else";
console.log("objArray after mutation:", objArray);
console.log("shallowCopy after mutation:", shallowCopy);

回答2:

Shallow copy means that all of the elements from first and second are merely added to the new array, the new copy. Deep copy would mean that all of the elements from first and second are first copied then added to the new array.

The distinction being whether the elements themselves are copied into a new object before being added to the new array.

Using primitives, like numbers, it is not really possible to illustrate the difference, but if you use objects the difference is pretty clear.

Say you have something like this:

let first = [{foo: 'bar'}];
let second = [{fizz: 'buzz'}];
let both = [...first, ...second];

Since spreading results in a shallow copy you can expect the relevant objects to pass an equality test:

first[0] === both[0]; // true
second[0] === both[1]; // true

But if spreading resulted in a deep copy you would expect the equality test to fail:

first[0] === both[0]; // false
second[0] === both[1]; // false

来源：https://stackoverflow.com/questions/50051149/does-spreading-create-shallow-copy

标签

typescript

ecmascript-6

deep-copy

shallow-copy