資訊專欄INFORMATION COLUMN
摘要：要理解中淺拷貝和深拷貝的區(qū)別，首先要明白的數(shù)據(jù)類型有兩種數(shù)據(jù)類型，基礎(chǔ)數(shù)據(jù)類型和引用數(shù)據(jù)類型基礎(chǔ)數(shù)據(jù)類型保存在棧內(nèi)存中的簡(jiǎn)單數(shù)據(jù)段，有，，，，引用數(shù)據(jù)類型，對(duì)象，保存在堆內(nèi)存空間中存放在棧內(nèi)存中與變量名與內(nèi)存地址存儲(chǔ)在棧內(nèi)存中，與作為對(duì)象存
要理解 JavaScript中淺拷貝和深拷貝的區(qū)別，首先要明白JavaScript的數(shù)據(jù)類型
JavaScript有兩種數(shù)據(jù)類型，基礎(chǔ)數(shù)據(jù)類型和引用數(shù)據(jù)類型
基礎(chǔ)數(shù)據(jù)類型：保存在棧內(nèi)存中的簡(jiǎn)單數(shù)據(jù)段 ，有undefined，boolean，number，string，null
引用數(shù)據(jù)類型：Array，對(duì)象，F(xiàn)unction 保存在堆內(nèi)存空間中
var a1 = 0; var a2 = "this is str"; var a3 = null 存放在棧內(nèi)存中
var c =[1,2,3] 與 var d = {m:20} 變量名與內(nèi)存地址存儲(chǔ)在棧內(nèi)存中，[1,2,3]與{m:20} 作為對(duì)象存儲(chǔ)在堆內(nèi)存中
基礎(chǔ)數(shù)據(jù)類型的復(fù)制（如var a = 20 var b = a）
引用數(shù)據(jù)類型的復(fù)制 ( var m ={a:10, b:20} var n = m)
解釋：
m與n指向同一個(gè)內(nèi)存空間，當(dāng)m或者n改變時(shí)，另一個(gè)也跟著改變
如m.a = 80 ; console.log(n.a) // 80
怎么樣使引用數(shù)據(jù)類型有各自獨(dú)立的內(nèi)存空間？
一、采用遞歸的方法復(fù)制拷貝對(duì)象
function deepclone(obj) {
let objClone = Array.isArray(obj) ? [] : {};
if (obj && typeof obj === "object") {
for (key in obj) {
//if (obj.hasOwnProperty(key)) { //也可以不加
if (obj[key] && obj[key] === "object") {
objClone[key] = deepclone(obj[key])
} else {
objClone[key] = obj[key]
}
//}
}
}
return objClone
}
var a = [1, 2, 3, 4];
var b = deepclone(a);
a[0] = 8
console.log(a, b);
Array.isArray(obj)：ECMAScript 5.1 (ECMA-262) 考慮到的兼容性，可以用下面的方法實(shí)現(xiàn)較好的兼容
if (!Array.isArray) {
Array.isArray = function(arg) {
return Object.prototype.toString.call(arg) === "[object Array]";
};
}
二、用JSON.stringify把對(duì)象轉(zhuǎn)成字符串，再用JSON.parse把字符串轉(zhuǎn)成新的對(duì)象。
function deepclone(obj){
var _obj = JSON.stringify(obj);
var cloneObj = JSON.parse(_obj);
return cloneObj
}
var a =[1,2,3,4];
var b= deepclone(a);
a[0]=8
console.log(a,b);
//可以用JSON.stringify與JSON.parse實(shí)現(xiàn)深拷貝的原因是JSON.stringify(obj)轉(zhuǎn)換成字符串，變成基本數(shù)據(jù)類型，基本類型拷貝是直接在棧內(nèi)存新開空間，直接復(fù)制一份名-值，不影響之前的對(duì)象
總結(jié)：
淺拷貝（shallow copy）：只復(fù)制指向某個(gè)對(duì)象的指針，而不復(fù)制對(duì)象本身，新舊對(duì)象共享一塊內(nèi)存； ??
深拷貝（deep copy）：復(fù)制并創(chuàng)建一個(gè)一摸一樣的對(duì)象，不共享內(nèi)存，修改新對(duì)象，舊對(duì)象保持不變；實(shí)現(xiàn)深拷貝主要有2種方法
（1）遞歸
（2）JSON.stringify結(jié)合JSON.parse
微信公眾號(hào)：前端之攻略
發(fā)布前端與設(shè)計(jì)有關(guān)的內(nèi)容，請(qǐng)掃描下面二維碼
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98031.html
摘要：引用類型值引用類型值是保存在堆內(nèi)存中的對(duì)象，變量保存的只是指向該內(nèi)存的地址，在復(fù)制引用類型值的時(shí)候，其實(shí)只復(fù)制了指向該內(nèi)存的地址。 前言 要理解 JavaScript中淺拷貝和深拷貝的區(qū)別，首先要明白JavaScript的數(shù)據(jù)類型。JavaScript有兩種數(shù)據(jù)類型，基礎(chǔ)數(shù)據(jù)類型和引用數(shù)據(jù)類型。js的基本類型：undefined，null，string，boolean，number,s...
摘要：舉個(gè)例子來說明一下什么是淺拷貝什么是深拷貝淺拷貝得出的結(jié)果可以看出是淺拷貝非對(duì)象的屬性值一個(gè)改變不影響另一個(gè)的值對(duì)象屬性是引用賦值所以一個(gè)改變會(huì)影響另一個(gè)的改變出現(xiàn)這種情況的本質(zhì)是對(duì)象是按引用賦值的深拷貝指的是拷貝一個(gè)對(duì)象，改變一個(gè)值不影響 舉個(gè)例子來說明一下什么是淺拷貝什么是深拷貝 淺拷貝 var x = { a: 1, b: {f: { g: 1 ...
摘要：設(shè)計(jì)模式是以面向?qū)ο缶幊虨榛A(chǔ)的，的面向?qū)ο缶幊毯蛡鹘y(tǒng)的的面向?qū)ο缶幊逃行┎顒e，這讓我一開始接觸的時(shí)候感到十分痛苦，但是這只能靠自己慢慢積累慢慢思考。想繼續(xù)了解設(shè)計(jì)模式必須要先搞懂面向?qū)ο缶幊蹋駝t只會(huì)讓你自己更痛苦。 JavaScript 中的構(gòu)造函數(shù) 學(xué)習(xí)總結(jié)。知識(shí)只有分享才有存在的意義。 是時(shí)候替換你的 for 循環(huán)大法了~ 《小分享》JavaScript中數(shù)組的那些迭代方法~ ...
摘要：它將返回目標(biāo)對(duì)象。有些文章說是深拷貝，其實(shí)這是不正確的。深拷貝相比于淺拷貝速度較慢并且花銷較大?？截惽昂髢蓚€(gè)對(duì)象互不影響。使用深拷貝的場(chǎng)景完全改變變量之后對(duì)沒有任何影響，這就是深拷貝的魔力。 一、賦值（Copy） 賦值是將某一數(shù)值或?qū)ο筚x給某個(gè)變量的過程，分為： 1、基本數(shù)據(jù)類型：賦值，賦值之后兩個(gè)變量互不影響 2、引用數(shù)據(jù)類型：賦址，兩個(gè)變量具有相同的引用，指向同一個(gè)對(duì)象，相互之間有...
摘要：前言里面淺拷貝和深拷貝是非常關(guān)鍵的知識(shí)點(diǎn)，今天就來通過本文清楚的了解深淺拷貝以及該如何實(shí)現(xiàn)這兩種拷貝方式。對(duì)象的拷貝又分為淺拷貝和深拷貝。印證了上述所說的對(duì)于所有的基本類型，簡(jiǎn)單的賦值已經(jīng)是實(shí)現(xiàn)了深拷貝。 前言 JavaScript里面淺拷貝和深拷貝是非常關(guān)鍵的知識(shí)點(diǎn)，今天就來通過本文清楚的了解深淺拷貝以及該如何實(shí)現(xiàn)這兩種拷貝方式。 深淺拷貝的區(qū)別 拷貝：其實(shí)就是一個(gè)對(duì)象復(fù)制給另外...
閱讀 3268·2023-04-25 22:47
閱讀 3779·2021-10-11 10:59
閱讀 2313·2021-09-07 10:12
閱讀 4269·2021-08-11 11:15
閱讀 3440·2019-08-30 13:15
閱讀 1757·2019-08-30 13:00
閱讀 976·2019-08-29 14:02
閱讀 1691·2019-08-26 13:57
