使用json克隆javascript对象字符串化深浅复制

TechnoFunnel presents another article on Object Deep Cloning with JSON.stringify in details. We will also discuss about advantages and disadvantages of cloning using JSON.stringify approach. Lets look for the simple implementation of JSON.stringify to clone an Object.

TechnoFunnel详细介绍了另一篇有关使用JSON.stringify进行对象深度克隆的文章。 我们还将讨论使用JSON.stringify方法进行克隆的优缺点 。 让我们寻找JSON.stringify的简单实现，以克隆Object 。

var employeeData  = {
  name: "Mayank",
  age: 10,
  designation: "Developer",
  salary: "200K"
}


// The target object is first converted to a string output
var stringifiedOutput = JSON.stringify(employeeData);


// Stringified Object is parsed back to some other Object
var clonedObject = JSON.parse(stringifiedOutput)

In the above code, we have a simple variable which is first converted to “string” format and saved inside a variable. This variable can then be parsed back to Object form using “JSON.parse”

在上面的代码中，我们有一个简单的变量，该变量首先转换为“字符串”格式并保存在变量中。 然后可以使用“ JSON.parse ”将此变量解析回Object形式

Once the string has been parsed, the Object is reconstructed out of the stringified Object. Given below is the output:

一旦字符串被解析，对象就从字符串化对象中重建出来。 以下是输出：

The Object created above “clonedObject”, is a separate object having a different memory block. The Object is not the reference of the initial object “employeeData”. Lets look into further details about Object cloning using this method.

在“ clonedObject”上方创建的对象是具有不同存储块的单独对象。 该对象不是初始对象“ employeeData”的引用。 让我们研究有关使用此方法克隆对象的更多详细信息。

使用JSON.stringify克隆对象的优点 (Advantages of Cloning Object with JSON.stringify)

1. The Complex Objects are deep cloned using JSON.stringify

   使用JSON.stringify 深度克隆了复杂对象

2. The Object is Deep Cloned using this method.
   使用此方法对对象进行深度克隆。

Lets add another key “address” to the variable “employeeData”. This key is a complex type containing further “key-value” pairs. Given below is the complex Object that we need to clone next.

让我们向变量“ employeeData”添加另一个键“地址”。 此键是复杂的类型，包含更多的“键值”对。 下面给出的是我们接下来需要克隆的复杂对象。

In the above example we need to ensure that the “address” property is copied by value rather than reference using the given approach of deep cloning. Lets modify the existing code to contain complex data type and apply the same.

在上面的示例中，我们需要确保使用深度克隆的给定方法通过值而不是引用复制“ address”属性。 让我们修改现有代码以包含复杂的数据类型并应用它们。

In the above image, we can see that the following expression: “clonedObject.address === employeeData.address” evaluates to “false” which signifies that we have achieved the deep cloning. The complex type property “address” of “employeeData” and “clonedObject” object does not equate to true, signifies that they are pointing to separate memory location and changes to “address” in one object do not impact the values of other.

在上图中，我们可以看到以下表达式：“ clonedObject.address === employeeData.address ”的计算结果为“ false”，表示我们已完成深度克隆。 “ employeeData”和“ clonedObject”对象的复杂类型属性“ address”不等于true，表示它们指向单独的内存位置，并且在一个对象中对“ address”的更改不会影响其他对象的值。

var employeeData  = {
  name: "Mayank",
  age: 10,
  designation: "Developer",
  salary: "200K", 
  address: {  
    street: "A-8, Milansar",
    city: "Delhi",
    contactDetails: "+91-9711083089"
  }
}


// The target object is first converted to a string output
var stringifiedOutput = JSON.stringify(employeeData);


// Stringified Object is parsed back to some other Object
var clonedObject = JSON.parse(stringifiedOutput)


// This will evaluate to "false", since object is deep cloned...
console.log(clonedObject.address === employeeData.address)

使用JSON.stringify克隆对象的缺点 (Disadvantages of Cloning Object with JSON.stringify)

1. The Major Disadvantage is the “functions” are not copied
   主要缺点是“功能”未复制

One of the major disadvantage of using this method to clone the Object is that we cannot copy the functions that are available in the target objects. Lets look for the object containing a function as a key of the Object.

使用此方法克隆对象的主要缺点之一是我们无法复制目标对象中可用的功能。 让我们查找包含一个函数作为对象键的对象。

var data  = {
    name: "Mayank",
    age: 10,
    address: {
        street: "Rohini"
    }, getData: () => {
        console.log("Hello All")
    }
}


var newData = JSON.parse(JSON.stringify(data))

On executing the above code, we can see that the target object do not contain the function that is added to the Object “getData”. All the basic and complex data is available to the “newData” Object, except the function that was added.

在执行上述代码时，我们可以看到目标对象不包含添加到对象“ getData”中的函数。 除已添加的功能外，所有基本数据和复杂数据均可用于“ newData”对象。

Conclusion:

结论：

JSON.stringify is the easiest method to clone the Object. We will focus on other methods as well in the separate article. Follow us for similar articles.

JSON.stringify是克隆对象的最简单方法。 在单独的文章中，我们还将关注其他方法。 关注我们获取类似文章。

翻译自: https://medium.com/technofunnel/clone-javascript-object-with-json-stringify-deep-shallow-copy-2919c5b3f970