Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "how to use Object.assign () of javascript", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use Object.assign () of javascript" article.

As follows:

Const defaultOpt = {key1: xxx, key2: {dd: ee},.}; / / deepCopy is a method to achieve deep copy const opt1 = deepCopy (defaultOpt); opt1.const opt2 = deepCopy (defaultOpt); opt2. Deep copy and shallow copy

A concept of deep copy and shallow copy is also involved here. All the objects stored in javascript are stored at the address, so the shallow copy points to the same block of memory, while the deep copy opens up another area.

This can also be seen in the following example:

/ / shallow copy const a = {t: 1, p: 'gg'}; const b = a deepCopy B. t = 3 deepCopy console.log (a); / {t: 3, p:' gg'} console.log (b); / / {t: 3, p: 'gg'} / / deep copy const c = {t: 1, p:' gg'}; const d = console.log (c); d. T = 3x console.log (c) / / {t: 1, p: 'gg'} console.log (d); / / {t: 3, p:' gg'}

It is obvious that when a shallow copy changes one of the values, it causes the others to change as well, while a deep copy does not.

Object.assign ()

What I need is a deep copy method, and then I found that there is an Object.assign () method in es6, which feels like I can use it.

Post two official examples:

/ / Cloning an objectvar obj = {a: 1}; var copy = Object.assign ({}, obj); console.log (copy); / / {a: 1} / / Merging objectsvar o1 = {a: 1}; var O2 = {b: 2}; var o3 = {c: 3}; var obj = Object.assign (o1, O2, o3); console.log (obj); / {a: 1, b: 2, c: 3} console.log (o1) / / {a: 1, b: 2, c: 3}, target object itself is changed.

Is it perfect? you can clone and merge. In my case, I think my code can be reduced again, such as:

Const defaultOpt = {title: 'hello', name:' oo', type: 'line'}; / / const opt1 = deepCopy (a); opt1.title =' opt1';opt1.type = 'bar';opt1.extra =' extra' / / add additional configuration / / for now, just const opt2 = Object.assign ({}, a, {title: 'opt2', type:' bar', extra: 'extra'})

But soon, a problem arises, and that is,

Merge is not what I expected.

Take a look at the example:

Const defaultOpt = {title: {text: 'hello world', subtext:' It\'s my world.'}}; const opt = Object.assign ({}, defaultOpt, {title: {subtext: 'Yes, your world.'}}); console.log (opt) / / expected result {title: {text: 'hello world', subtext:' Yes, your world.'}} / / actual result {title: {subtext: 'Yes, your world.'}}

Originally thought that it will only cover subtext, but in fact it directly covers the entire title, which makes me more depressed, equivalent to it only merge root attribute, the following will not be dealt with.

The code can only be reconstructed into relatively troublesome ones:

Const defaultOpt = {title: {text: 'hello world', subtext:' It\'s my world.'}}; const opt = Object.assign ({}, defaultOpt); opt.title.subtext = 'Yes, your world.';console.log (opt); / / the result is normal {title: {text:' hello world', subtext: 'Yes, your world.'}}

It's a little troublesome to use it this way, but it's okay. It's ready to use. But... Soon, there was another problem, as follows:

Const defaultOpt = {title: {text: 'hello world', subtext:' It\'s my world.'}}; const opt1 = Object.assign ({}, defaultOpt); const opt2 = Object.assign ({}, defaultOpt); opt2.title.subtext = 'Yes, your world.';console.log (' opt1:'); console.log (opt1); console.log ('opt2:'); console.log (opt2) / / result opt1: {title: {text: 'hello world', subtext:' Yes, your world.'}} opt2: {title: {text: 'hello world', subtext:' Yes, your world.'}}

The above results show that the two configurations become exactly the same, but we didn't change opt1's subtext, we just changed opt2's.

This shows that in the title layer, it is only a simple shallow copy, and there is no further deep copy.

It doesn't make me wonder how this interface is implemented and whether it's what I thought it was.

I looked through the official document and found that it was written as a Polyfill. I added some comments to the code as follows:

If (! Object.assign) {/ / defines the assign method Object.defineProperty (Object, 'assign', {enumerable: false, configurable: true, writable: true, value: function (target) {/ / assign method's first parameter' use strict'; / / the first parameter is empty, then if (target = undefined | | target = null) {throw new TypeError ('Cannot convert first argument to object')) } var to = Object (target); / / traverses all remaining parameters for (var I = 1; I < arguments.length; iTunes +) {var nextSource = arguments [I]; / / if the parameter is empty, skip and continue to the next if (nextSource = = undefined | | nextSource = null) {continue;} nextSource = Object (nextSource) / / get all the key values of the modified parameter and traverse var keysArray = Object.keys (nextSource); for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {var nextKey = keysArray [nextIndex]; var desc = Object.getOwnPropertyDescriptor (nextSource, nextKey) / / if it is not empty and can be enumerated, make a shallow copy of the assignment if (desc! = = undefined & & desc.enumerable) {to [nextKey] = nextSource [nextKey];} return to;}});}

The above code can directly show that it only assigns values to the top-level properties and does not make deep copies of all the next-level properties such as recursion at all.

Make a brief summary

Object.assign () is just a first-level attribute copy, which is a deeper copy than a shallow copy. When using it, we should pay attention to this problem.

Attachment: find a simple way to implement deep copy, of course, with certain limitations, as follows:

Const obj1 = JSON.parse (JSON.stringify (obj))

The idea is to convert an object to a json string, and then turn the string back to the object.

Tell me more about Object.assign () Object.assign ()

The first parameter of Object.assign () is the target object, followed by the source object. Object.assign (target, source1,source2, source3, …)

If the source object has the same property name as the target object, or if there is the same property name in the source object, the following will overwrite the previous value.

If the parameter is not Object, it will be changed to Object.

Null and undefined cannot be passed as parameters because null and undefined cannot be converted to Object

If the value that occurs is an object, Object.assign is handled by replacing it directly, not adding it. Such as an and b below

You can add methods to a class

Const obj1 = {name:' Xiaoming', age:'18',education:'undergraduate'} const obj2 = {height:'180cm',hobby:'painting'} let obj = Object.assign ({}, obj1, obj2) console.log ('merged class:'); console.log (JSON.stringify (obj)); Object.assign (obj, obj, {height:'170cm'}); console.log ('modified height class:') Console.log (JSON.stringify (obj)); Object.assign (obj, {arr: {index:1, name:' class'}}, {name:' adds a class to'}) console.log (JSON.stringify (obj)); console.log ("after adding a class:" + obj.arr.index); / / a. This modification only modifies the value of index: Object.assign (obj, Object.assign (obj.arr, {index:2}) console.log (JSON.stringify (obj)); console.log ("after modifying class index:" + obj.arr.index); / / b. In this way of modification, only the index attribute / / Object.assign (obj, {arr: {index:2}}) is left in arr, and the index of {name:' modification class is: 2'}) / / console.log (JSON.stringify (obj)); / / console.log ("after modifying class index:" + obj.arr.index) / / Object.assign () makes a shallow copy. If an attribute is a newly merged object, changing the value of the source object will affect the merged value. Let newObj = {type: {aa:' vegetables'}}; Object.assign (obj, newObj); console.log ("after merging a class with attribute type:" + JSON.stringify (obj)); / / c. This will not affect the type.aa / / Object.assign (newObj, {type: {aa:' fruit'}}) in obj; / / d. This affects type.aa newObj.type.aa = 'fruit' in obj; console.log ("after modifying type.aa in newObj:" + JSON.stringify (newObj)); console.log ("after modifying type.aa in newObj:" + JSON.stringify (obj)); / / e. When you merge an array with Object.assign, you treat the array as if it were a class const arr1= [1, 2, 3, 4, 5] with the attribute name index; / / in Object's eyes it goes like this: arr1= {0:1, 1:2, 2 const arr1= 3 const arr1= 4, 4:5} const arr2 = [8,9,10] / / in Object's eyes, it goes like this: arr2= {0:8, 1:9, 2:10} console.log ("the merged array is:" + Object.assign (arr1, arr2)); / / the result is: 8, 9, 10, 4, 5 / f. Object.assign () add the method Object.assign (UserInfo.prototype, {getUserName () {return this.name) to the class }, getUserGender () {return this.gender;}}) let user = new UserInfo ("Shaoxiao", "female"); console.log ("the message in userinfo is" + user.getUserName () + "," + user.getUserGender ()); / / the output result is: Shaoxiao, female

Output result:

ObjectAssignDemo.js:13 merged classes:

ObjectAssignDemo.js:14 {"name": "Xiaoming", "age": "18", "education": "undergraduate", "height": "180cm", "hobby": "painting"}

ObjectAssignDemo.js:16 modified the class of height:

ObjectAssignDemo.js:17 {"name": "Xiaoming", "age": "18", "education": "undergraduate", "height": "170cm", "hobby": "painting"}

ObjectAssignDemo.js:19 {"name": "add a class", "age": "18", "education": "undergraduate", "height": "170cm", "hobby": "painting", "arr": {"index": 1, "name": "class"}}

After adding a class to ObjectAssignDemo.js:20: 1

ObjectAssignDemo.js:24 {"name": "age": "18", "education": "undergraduate", "height": "170cm", "hobby": "painting", "arr": {"index": 2, "name": "Class"}, "index": 2}

After ObjectAssignDemo.js:25 modifies the class index: 2

After ObjectAssignDemo.js:35 merges a class with attribute type: {"name": "class", "age": "18", "education": "undergraduate", "height": "170cm", "hobby": "painting", "arr": {"index": 2, "name": "class"}, "index": 2, "type": {"aa": "vegetable"}}

After ObjectAssignDemo.js:40 modifies the type.aa in newObj: {"type": {"aa": "fruit"}}

ObjectAssignDemo.js:41 modifies type.aa in newObj: {"name": "class", "age": "18", "education": "undergraduate", "height": "170cm", "hobby": "painting", "arr": {"index": 2, "name": "class"}, "index": 2, "type": {"aa": "fruit"}}

The merged array of ObjectAssignDemo.js:46 is: 8, 9, 10, 4, 5.

The message in ObjectAssignDemo.js:58 userinfo is: Shaoxiao, female

The above is about the content of this article on "how to use Object.assign () of javascript". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.