JS 中的深拷貝與淺拷貝

ztyzz 發(fā)布于2019-08-23 13:41 / 784人閱讀

摘要：什么是深拷貝淺拷貝見(jiàn)名知義，無(wú)論是深拷貝還是淺拷貝，都是的問(wèn)題。使用如下以上就是關(guān)于中的深拷貝與淺拷貝的知識(shí)和如何進(jìn)行深拷貝的知識(shí)了，如果有錯(cuò)或者有其他方式的話，歡迎在下面留言評(píng)論啦

前言最近在寫(xiě)項(xiàng)目的時(shí)候涉及到一些父子組件傳遞個(gè)對(duì)象或者數(shù)組通信啥的，或者是直接復(fù)制添加對(duì)象啥的，直接使用賦值的時(shí)候總會(huì)出錯(cuò)。一查原來(lái)是淺拷貝的問(wèn)題，就從網(wǎng)上找了點(diǎn)資料，匯總到這里來(lái)了。

1 什么是深拷貝&淺拷貝

見(jiàn)名知義，無(wú)論是深拷貝還是淺拷貝，都是 copy 的問(wèn)題。就是 copy 的時(shí)候出現(xiàn)的兩種情況。區(qū)分起來(lái)也挺簡(jiǎn)單的，舉個(gè)例子，假設(shè) B 是 A 復(fù)制過(guò)來(lái)的，當(dāng)我們修改 A 的時(shí)候，B 也隨之改變了，那么這個(gè)就是淺拷貝，那要是 B 沒(méi)有隨 A 一起改變的話，那么這個(gè)就深拷貝了。

2 現(xiàn)實(shí)場(chǎng)景

首先呢，我們先要明白在 Javascript 中，有 5 種簡(jiǎn)單數(shù)據(jù)類(lèi)型（也稱(chēng)為基本數(shù)據(jù)類(lèi)型），分別是 Undefined，Null，String，Number，Boolean,還有 1 種復(fù)雜數(shù)據(jù)類(lèi)型即 Object，（ES6 新出的 Symbol 數(shù)據(jù)類(lèi)型就先不討論了）

2.1 基本數(shù)據(jù)類(lèi)型

對(duì)于基本數(shù)據(jù)類(lèi)型的復(fù)制就談不上什么深拷貝和淺拷貝了，對(duì)于基本數(shù)據(jù)類(lèi)型來(lái)說(shuō)，他們的值在棧內(nèi)存中占據(jù)著固定大小的空間，并被保存在棧內(nèi)存中。假設(shè) 變量 b 復(fù)制基本數(shù)據(jù)類(lèi)型變量 a，那么 b 會(huì)內(nèi)存中占據(jù)自己的空間，和 a 就沒(méi)啥關(guān)系了，大家各管各的，互不干涉。

let a = 2; 
let b = a;
b = 4;
console.log(a); // 2
console.log(b); // 4

2.2 復(fù)雜數(shù)據(jù)類(lèi)型（Object）

對(duì)于對(duì)象的話，他是引用類(lèi)型，復(fù)制起來(lái)就要區(qū)分淺拷貝和深拷貝了，因?yàn)?Object 是引用類(lèi)型，他真正的值保存在堆內(nèi)存中，他在棧內(nèi)存存儲(chǔ)是變量名和指向該對(duì)象值的指針（就是一個(gè)地址），如下圖所示。

所以當(dāng)我們用平常用一個(gè)變量去復(fù)制一個(gè) Object 類(lèi)型的變量的時(shí)候，復(fù)制的是他的指針地址而已，所以兩個(gè)變量最終都指向同一個(gè)變量，大家要改一起改，這就是淺拷貝啦，如下

let obj1 = {name:"kk",age:12,desc:"源對(duì)象"}
let obj2 = obj1;
obj2.desc = "目標(biāo)對(duì)象"
console.log(obj1); //{name:"kk",age:12,desc:"目標(biāo)對(duì)象"} 此處源對(duì)象跟著一起變了
console.log(obj2); // {name:"kk",age:12,desc:"目標(biāo)對(duì)象"}

啥，不信？！，那就看圖

如何

但是在我們?nèi)粘５氖褂卯?dāng)中，Object 類(lèi)型的淺拷貝的行為會(huì)讓我們很迷，我復(fù)制這個(gè)對(duì)象就是想復(fù)制他的值而已啦，不要復(fù)制人家個(gè)值就和他綁到一塊了，跟他一起「同生共死」。所以啊，當(dāng)我們想按照我們復(fù)制的想法，就只復(fù)制他的值用來(lái)自己用，他的是他的，我的是我的，大家井水不犯河水。接下來(lái)就要說(shuō)咋辦了。

3 實(shí)現(xiàn)對(duì)象類(lèi)型的深拷貝

對(duì)于對(duì)象的深拷貝，搜集了網(wǎng)上的資料，就有下面三種方法

3.1 slice()&concat()

這個(gè)是針對(duì)數(shù)組的深拷貝，可以通過(guò)這兩個(gè)方法實(shí)現(xiàn)對(duì)數(shù)組的深拷貝,如下

let arr = [1,2,3,4]
let arr2 = arr.slice();
arr[0] = 0;
console.log(arr); //[1,2,3,4]
console.log(arr2); //[1,2,3,4]

concat 同理可得，不過(guò)這兩個(gè)方法有個(gè)問(wèn)題，slice() 和 concat() 方法能夠深拷貝的就只有數(shù)組的一級(jí)屬性，但是如果是多維數(shù)組的話，那么只有一級(jí)屬性的值是深拷貝，往下就都是淺拷貝了，如下所示

let arr = [[1,2],2,3,4]
let arr2 = arr.concat();
arr[0][0] = 0;
arr[1] = 1;

console.log(arr); //[[0,2],1,3,4]

console.log(arr2); //[[0,2],2,3,4]
// arr2[1] 沒(méi)變，但是 arr2[0] 跟著一起改了

3.2 JSON 的騷操作

通過(guò) JSON 的 stringify， parase 操作也可以實(shí)現(xiàn)對(duì)象的深拷貝。

let obj1 = {name:"kk",age:12,desc:"源對(duì)象"}
let obj2 = JSON.parase(JSON.stringify(obj1));
obj2.desc = "目標(biāo)對(duì)象";
console.log(obj1); //{name:"kk",age:12,desc:"源對(duì)象"} 此處源對(duì)象就沒(méi)有一起變了
console.log(obj2); // {name:"kk",age:12,desc:"目標(biāo)對(duì)象"}

此法數(shù)組和對(duì)象都可以用。

3.3 自己寫(xiě)一個(gè)深拷貝函數(shù)

自己動(dòng)手，豐衣足食

function deepCopy(obj) {
  let newObj = Array.isArray(obj) ? [] : {};
  if (obj && typeof obj === "object") {
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        //判斷ojb子元素是否為對(duì)象，如果是，遞歸復(fù)制
        if (obj[key] && typeof obj[key] === "object") {
          newObj[key] = deepCopy(obj[key]);
        } else {
          //如果不是，簡(jiǎn)單復(fù)制
          newObj[key] = obj[key];
        }
      }
    }
  }
  return newObj;
}

let a = [1,2,3];
let b = deepCopy(a);
a[0] = 0;
console.log(a); //[0,2,3]
console.log(a); // [1,2,3]

3.4 JQ 的 extend 方法

這個(gè)就直接放文檔了
$.extend( [deep ], target, object1 [, objectN ] )
deep:如果設(shè)為true，則遞歸合并即深拷貝。
target:待修改對(duì)象。
object1:待合并到第一個(gè)對(duì)象的對(duì)象。
objectN:待合并到第一個(gè)對(duì)象的對(duì)象。
使用如下

let a = [1,2,3],
let b = $.extend(true,[],a);
a[0]=1;
console.log(a); // [0,2,3]
console.log(b); // [1,2,3]

以上就是關(guān)于 JS 中的深拷貝與淺拷貝的知識(shí)和如何進(jìn)行深拷貝的知識(shí)了，如果有錯(cuò)或者有其他方式的話，歡迎在下面留言評(píng)論啦

GPU云服務(wù)器云服務(wù)器 js拷貝內(nèi)存數(shù)據(jù)庫(kù) 后拷貝預(yù)拷貝深拷貝和淺拷貝淺拷貝

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/99393.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

ztyzz

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

【算法學(xué)習(xí)】1486. 數(shù)組異或操作（java / c / c++ / python / go /

閱讀 2246·2021-10-14 09:43
前端面試題總結(jié)

閱讀 2261·2019-08-30 15:55
TCP/IP基礎(chǔ)總結(jié)性學(xué)習(xí)（2）

閱讀 789·2019-08-30 14:23
[note]大小不固定的圖片、多行文字的水平垂直居中

閱讀 2078·2019-08-30 13:21
CSS相對(duì)定位

閱讀 1294·2019-08-30 12:50
css兩種垂直居中對(duì)齊解決方案

閱讀 2250·2019-08-29 18:46
小程序使用之自定義組件

閱讀 2341·2019-08-29 17:28
【每日一包0014】to-pascal-case,to-sentence-case,to-snake

閱讀 2431·2019-08-29 17:21

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JS 中的深拷貝與淺拷貝

相關(guān)文章