The difference between assign,extend and merge in Lodash

Source: Internet
Author: User
Brief Introduction

We often see the assign,extend,merge function in someone else's code, which is similar to the three functions that merge the properties of the source object into the target object.

Since all are merging objects, why are there three different functions? What is the difference between them? assign (object, [sources])

Let's look at the definition on the official website first:

Assigns own enumerable string keyed properties of source objects to the destination object. Source objects are applied from left to right. Subsequent sources overwrite property assignments of previous sources.

The properties of the source object (sources) are assigned to the target object, and the source object is called from left to right, and the properties of the following object are overwritten by the preceding.

Take a look at the following example:

Assign ({}, {a:1}, {b:2}); {a:1, B:2}//later {a:2} covers assign ({}, {a:1}, {b:2}, {a:2}) to the previous {a:1}; {a:2, B:2}//Observe the following two examples, if the property value is object, the following value overrides the preceding value assign ({}, {a:1}, {b: {c:2, D:3}})//{a:1, B: {C:2 , D:3}} assign ({}, {a:1}, {b: {c:2, D:3}}, {b: {e:4}})//{a:1, B: {e:4}}//' Assign ' function ignores the genus on the prototype chain Of function Foo () {this.c = 3;} FOO.PROTOTYPE.D = 4; Assign ({a:1}, new Foo ()); {a:1, C:3}//' Assign ' will modify the original object var test = {A:1}; Assign (test, {b:2}); {a:1, b:2} console.log (test); {a:1, b:2}
extend (object, [sources])

In the 3.x version, Extend is an alias for assign, and they work exactly the same.
In the 4.x version, Extend is a assignin alias, and assign a little different.

The official definition is as follows:

This are like _.assign except the IT iterates over own and inherited source properties.

In the above example, we know that the Assign function does not merge attributes from the prototype chain into the target object, whereas the extend or assignin functions.

Important!! This is Lodash 4.x!! The attributes on the source object prototype chain are also merged onto the target object. function Foo () {this.c = 3;} FOO.PROTOTYPE.D = 4; Extend ({a:1}, new Foo ()); {a:1, c:3, D:4}
Merge (object, [sources])

Let's look at the definition of the merge function:

This are like _.assign except that it recursively merges own and inherited enumerable string keyed properties of SOU RCE objects into the destination object. Source properties that resolve to undefined are skipped if a destination value exists. Array and plain object properties are merged recursively. Other objects and value types are overridden by assignment. Source objects are applied from left to right. Subsequent sources overwrite property assignments of previous sources.

The merge is similar to assign, except that when the merge encounters the same attributes, if the property value is a pure object (plain object) or a collection (collection), instead of overwriting the previous attribute value with the subsequent attribute value, the two property values are merged.
If the property value of the source object is undefined, the property is ignored.

Assign ({}, {a:1}, {b: {c:2, D:3}}, {b: {e:4}})//{a:1, B: {e:4}} merge ({}, {a:1}, {b: {c:2, D : 3}}, {b: {e:4}})//{a:1, B: {c:2, D:3, E:4}}//merge collection var users = {' data ': [{' User ': ' Barney '}, {' Use ' R ': ' Fred '}]}; var ages = {' data ': [{' Age ': +}, {' Age ': 40}]}; Merge ({}, users, ages)//{data: [{User: ' Barney ', age:36}, {User: ' Fred ', Age:40}]}//The merge function modifies the original object. Merge (Users, ages) Console.log (users)/{data: [{User: ' Barney ', age:36}, {User: ' Fred ', age:40}]
Summary In the same placeCan be used to merge objects will modify the original object (if the original object is the first argument as a function) the Difference

The Assign function does not process attributes on the prototype chain, nor does it merge the same attributes, but overwrites the previous property values with the following attribute values

Extend the attributes on the prototype chain will be merged in the 3.x version and the Assign 4.x version

When the merge encounters the same property name, the property value reference is merged if the property value is a pure object or collection

Https://lodash.com/docs
Http://stackoverflow.com/questions/19965844/lodash-difference-between-extend-assign-and-merge

Original link: https://scarletsky.github.io/2016/04/02/assign-vs-extend-vs-merge-in-lodash/

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.