深层和浅层卷积_具有对象的深层和浅层副本分配javascript

深层和浅层卷积

Working with JavaScript Object.assign Function

使用JavaScript Object.assign函数

TechnoFunnel presents another article focussed on Cloning an Object using Object.assign Function in JavaScript. Object.assign is another great way to copy the object into some other Object. We will look whether we can perform Deep or Shallow Copy using this method.

TechnoFunnel提出了另一篇文章，重点介绍了使用JavaScript中的Object.assign函数克隆对象。 Object.assign是将对象复制到其他Object的另一种好方法。 我们将研究是否可以使用此方法执行深层复制或浅层复制。

For other Methods of copying Object, you can refer to the following:

对于其他复制对象的方法，可以参考以下内容：

什么是JavaScript中的Object.assign (What is Object.assign in JavaScript)

Object.assign is used to copy the key value pair of one object to another. Lets look for the below code to understand the working of this keyword.

Object.assign用于将一个对象的键值对复制到另一个对象。 让我们寻找以下代码，以了解此关键字的工作原理。

var userDetails = {
  name: "Mayank Gupta",
  age: 30,
  designation: "Developer",
  contactDetails: "+91-9711083089"
}


var newUserObject  =  Object.assign({}, userDetails);

In the above code, we have created a new blank object using ”{}” and then we are asking JavaScript to copy the key value pairs of “userDetails” Object into newly created blank object. The newly created object creates a separate memory space to save the values.

在上面的代码中，我们使用“ {}”创建了一个新的空白对象，然后要求JavaScript将“ userDetails”对象的键值对复制到新创建的空白对象中。 新创建的对象创建一个单独的存储空间来保存值。

Working with Object.assign

使用Object.assign

However, this keyword can also be used to copy the key value pairs from multiple Objects. After creating an empty Object, we can pass as many number of object as we want to this function. The key value pair of all these objects will be copied to this newly created Object. Lets see with the help of an Example below.

但是，此关键字也可以用于从多个对象复制键值对。 创建空对象后，我们可以根据需要将任意数量的对象传递给此函数。 所有这些对象的键值对将复制到此新创建的对象。 让我们借助下面的示例进行查看。

var userDetails = {
  name: "Mayank Gupta",
  age: 30,
  designation: "Developer",
  contactDetails: "+91-9711083089"
}


var userAddressDetails = {
    city: "Delhi",
    country: "India"
}


var newUserObject  =  Object.assign({}, userDetails, userAddressDetails);


console.dir(userDetails)

In the above code, we have passed multiple Objects to this function. The key value pair of all these Objects will be copied to the newly created Object. Lets put a debugger in the code to see the set of values that have been copied.

在上面的代码中，我们已将多个Object传递给此函数。 所有这些对象的键值对将被复制到新创建的对象。 让我们在代码中放入调试器以查看已复制的值集。

Copy Multiple Objects with Object.assign

使用Object.assign复制多个对象

In the above code, we can see that the key value pair of both “userDetails” and “userAddressDetails” has been copied to the resultant Object.

在上面的代码中，我们可以看到“ userDetails”和“ userAddressDetails”这两个键值对已复制到结果对象。

Object.assign的优点 (Advantages of Object.assign)

1. User can copy Multiple Objects using Object.assign
   用户可以使用Object.assign复制多个对象
2. Functions can be copied as well in resultant Object
   函数也可以在结果对象中复制

Object.assign的缺点 (Disadvantages of Object.assign)

1. Objects are not Deep Cloned
   未深度克隆对象

The above specified method do not create a deep copy of the Object, if one of the key of “userDetails” or “userAddressDetails” object is complex value containing some further Objects/Functions/Arrays, it is copied by reference in the new Object.

如果“ userDetails”或“ userAddressDetails”对象的键之一是包含其他对象/函数/数组的复数值，则上述指定的方法不会创建该对象的深层副本，它会通过引用复制到新对象中。

Shallow and Deep Copy with Object.assign

使用Object.assign进行浅复制和深复制

In the above image, we can see that the “address” property of both “userDetails” and “newUserDetails” equate to true signifying that the both object points to the same memory location. Hence proving that the deep copy is not performed.

在上图中，我们可以看到“ userDetails”和“ newUserDetails”的“ address”属性都等于true，表示这两个对象都指向相同的内存位置。 因此，证明未执行深层复制。

Follow our You Tube Channel:

关注我们的You Tube频道：

And also Our Medium Publication:

以及我们的中等出版物：

翻译自: https://medium.com/technofunnel/deep-and-shallow-copy-with-object-assign-javascript-28e2d1f14755

深层和浅层卷积