javascript - Object spread with common keys - Stack Overflow

admin管理员组

文章数量:1394051

Consider this:

let obj1 = {id: 1, mon_key: "one", property1: "property_one"}
let obj2 = {id: 1, mon_key: "two", property2: "property_two'"}

let merged = {...obj1, ...obj2}
console.log(merged)

Output:

{id: 1, mon_key: "two", property1: "property_one", property2: "property_two'"}

We see that mon_key from obj2 is taken over (value - "two") in this merge.
Does this mean where when there is a collision of mon key in an object spread (merge) it is guaranteed that the one that e later wins? If yes, is this mentioned somewhere in ES6 spec?

Consider this:

let obj1 = {id: 1, mon_key: "one", property1: "property_one"}
let obj2 = {id: 1, mon_key: "two", property2: "property_two'"}

let merged = {...obj1, ...obj2}
console.log(merged)

Output:

{id: 1, mon_key: "two", property1: "property_one", property2: "property_two'"}

We see that mon_key from obj2 is taken over (value - "two") in this merge.
Does this mean where when there is a collision of mon key in an object spread (merge) it is guaranteed that the one that e later wins? If yes, is this mentioned somewhere in ES6 spec?

• javascript
• ecmascript-6

Share Improve this question Follow edited Aug 21, 2020 at 17:25 jonrsharpe 122k3030 gold badges268268 silver badges475475 bronze badges asked Aug 21, 2020 at 17:21 TintinTintin 2,98366 gold badges4444 silver badges7575 bronze badges 8

• 4 It's just the sequence of order, and the fact that ids are not repeated. The logic adds all the key values from the first object to the new object, and then it does the same with the second object. Since keys are not duplicated, they replace anything that pre-exists. – Taplar Commented Aug 21, 2020 at 17:23
• 6 Same way as if you wrote var x = {'a': 1, 'a': 2 }. The value of x.a at the end would be 2 – Taplar Commented Aug 21, 2020 at 17:24
• 2 Given that this is the behavior of objects, I wouldn't be surprised if it was not mentioned in the specs for basic objects. – Taplar Commented Aug 21, 2020 at 17:26
• 2 Last override wins. Its the basic strategy of most programming languages. – SILENT Commented Aug 21, 2020 at 17:26
• 1 Spec tc39.es/ecma262/2020/…. You need to unwind PropertyDefinition:...AssignmentExpression part. – Yury Tarabanko Commented Aug 21, 2020 at 17:41

 |  Show 3 more ments

4 Answers 4

Sorted by: Reset to default 3

You could check this section in MDN doc, Spread in object literals

The Rest/Spread Properties for ECMAScript proposal (ES2018) added spread properties to object literals. It copies own enumerable properties from a provided object onto a new object

Shallow-cloning (excluding prototype) or merging of objects is now possible using a shorter syntax than Object.assign()

const obj1 = { foo: 'bar', x: 42 };
const obj2 = { foo: 'baz', y: 13 };

const mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

The rest object spread is just syntactic sugar for Object.assign(with the exclusion of setters)

The spec here states how Object.assign(target, ...sources) operates:

4. For each element nextSource of sources, in ascending index order, do

Where it basically does a forEach loop for each of the sources in ascending order => Sets each OwnProperty key/value to the target object(to).

MDN also mentions this in § Merging objects with same properties:

The properties are overwritten by other objects that have the same properties later in the parameters order.

Checkout https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals

If you have mon properties the priority will be right to left. The object the most at the right will have priority over the one at its left.

Yes. You will always get the property of the subsequent object.

It doesn't directly mention that on MDN, but the spread operator applies a shallow parison and assigns the subsequent property to the object.

https://dmitripavlutin./object-rest-spread-properties-javascript/#21-object-spread-rule-latter-property-wins

You can use the spread operator to create immutable objects this way

let obj = { one: 1, two: 2, three: 3 }

let _obj = {...obj, three: 4};

console.log(_obj);

Output

{
  "one": 1,
  "two": 2,
  "three": 4
}

---

---

---

And using multiple objects...

let obj = { one: 1, two: 2, three: 3 }

let _obj = {...obj, three: 4};

_obj.four = 4;

let __obj = {...obj, ..._obj}

console.log(__obj);

Output

{
  "one": 1,
  "two": 2,
  "three": 4,
  "four": 4
}

本文标签： javascriptObject spread with common keysStack Overflow