TopGear經(jīng)典畫(huà)面

淺拷貝與深拷貝

• 針對(duì)對(duì)象

深拷貝和淺拷貝只針對(duì)像 Object, Array 這樣的復(fù)雜對(duì)象的，String,Number等簡(jiǎn)單類型不存在深拷貝。

• 淺拷貝

因?yàn)闇\拷貝只會(huì)將對(duì)象的各個(gè)屬性進(jìn)行依次復(fù)制，并不會(huì)進(jìn)行遞歸復(fù)制。在JavaScript中，對(duì)于Object和Array這類引用類型值，當(dāng)從一個(gè)變量向另一個(gè)變量復(fù)制引用類型值時(shí)，這個(gè)值的副本其實(shí)是一個(gè)指針，兩個(gè)變量指向同一個(gè)堆對(duì)象，改變其中一個(gè)變量，另一個(gè)也會(huì)受到影響。所以淺拷貝會(huì)導(dǎo)致 obj.arr 和 shallowObj.arr 指向同一塊內(nèi)存地址，當(dāng)修改obj.arr的值時(shí)，shallowObj.arr的值同樣會(huì)被修改，大概的示意圖如下：

• 深拷貝

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

JSON.parse()和JSON.stringfy()

• JSON.parse()就是將JSON字符串解析成字符串描述的JavaScript值或?qū)ο?，例如?/li>

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()的反義，就是將一個(gè)JavaScript值(對(duì)象或者數(shù)組)轉(zhuǎn)換為一個(gè)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對(duì)象中的stringify可以把一個(gè)js對(duì)象序列化為一個(gè)JSON字符串，parse可以把JSON字符串反序列化為一個(gè)js對(duì)象，通過(guò)這兩個(gè)方法，也可以實(shí)現(xiàn)對(duì)象的深復(fù)制。

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

• 弊端

用法簡(jiǎn)單，然而使用這種方法會(huì)有一些隱藏的坑：因?yàn)樵谛蛄谢疛avaScript對(duì)象時(shí)，所有函數(shù)和原型成員會(huì)被有意忽略。
通俗點(diǎn)說(shuō)，JSON.parse(JSON.stringfy(X))，其中X只能是Number, String, Boolean, Array, 扁平對(duì)象，即那些能夠被 JSON 直接表示的數(shù)據(jù)結(jié)構(gòu)。

深拷貝其他方法文章拓展

THE END