TopGear經典畫面

淺拷貝與深拷貝

• 針對對象

深拷貝和淺拷貝只針對像 Object, Array 這樣的復雜對象的，String,Number等簡單類型不存在深拷貝。

• 淺拷貝

因為淺拷貝只會將對象的各個屬性進行依次復制，并不會進行遞歸復制。在JavaScript中，對于Object和Array這類引用類型值，當從一個變量向另一個變量復制引用類型值時，這個值的副本其實是一個指針，兩個變量指向同一個堆對象，改變其中一個變量，另一個也會受到影響。所以淺拷貝會導致 obj.arr 和 shallowObj.arr 指向同一塊內存地址，當修改obj.arr的值時，shallowObj.arr的值同樣會被修改，大概的示意圖如下：

• 深拷貝

而深拷貝則不同，它不僅將原對象的各個屬性逐個復制出去，而且將原對象各個屬性所包含的對象也依次采用深拷貝的方法遞歸復制到新對象上。這就不會存在上面 obj 和 shallowObj 的 arr 屬性指向同一個對象的問題。當修改obj.arr的值時，shallowObj.arr的值不會被修改，仍然為原值，如下圖：

JSON.parse()和JSON.stringfy()

• JSON.parse()就是將JSON字符串解析成字符串描述的JavaScript值或對象，例如：

JSON.parse('{}');              // {}
JSON.parse('true');            // true
JSON.parse('"foo"');           // "foo"
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse('null');            // null

• JSON.stringfy()是JSON.parse()的反義，就是將一個JavaScript值(對象或者數組)轉換為一個JSON字符串，例如：

JSON.stringify({});                        // '{}'
JSON.stringify(true);                      // 'true'
JSON.stringify("foo");                     // '"foo"'
JSON.stringify([1, "false", false]);       // '[1,"false",false]'
JSON.stringify({ x: 5 });                  // '{"x":5}'  

JSON.parse()官方解釋
JSON.stringfy()官方解釋

深拷貝方法——JSON.parse(JSON.stringfy())

• 用法

JOSN對象中的stringify可以把一個js對象序列化為一個JSON字符串，parse可以把JSON字符串反序列化為一個js對象，通過這兩個方法，也可以實現對象的深復制。

function jsonClone(obj) {
    return JSON.parse(JSON.stringify(obj));
}
var clone = jsonClone({ a:1 });

• 弊端

用法簡單，然而使用這種方法會有一些隱藏的坑：因為在序列化JavaScript對象時，所有函數和原型成員會被有意忽略。
通俗點說，JSON.parse(JSON.stringfy(X))，其中X只能是Number, String, Boolean, Array, 扁平對象，即那些能夠被 JSON 直接表示的數據結構。

深拷貝其他方法文章拓展

THE END