JS 中的深拷貝與淺拷貝

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

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

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

1 什么是深拷貝&淺拷貝

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

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

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

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

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

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

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

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

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

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

啥，不信？！，那就看圖

如何

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

3 實(shí)現(xiàn)對象類型的深拷貝

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

3.1 slice()&concat()

這個是針對數(shù)組的深拷貝，可以通過這兩個方法實(shí)現(xiàn)對數(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 同理可得，不過這兩個方法有個問題，slice() 和 concat() 方法能夠深拷貝的就只有數(shù)組的一級屬性，但是如果是多維數(shù)組的話，那么只有一級屬性的值是深拷貝，往下就都是淺拷貝了，如下所示

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] 沒變，但是 arr2[0] 跟著一起改了

3.2 JSON 的騷操作

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

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

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

3.3 自己寫一個深拷貝函數(shù)

自己動手，豐衣足食

function deepCopy(obj) {
  let newObj = Array.isArray(obj) ? [] : {};
  if (obj && typeof obj === "object") {
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        //判斷ojb子元素是否為對象，如果是，遞歸復(fù)制
        if (obj[key] && typeof obj[key] === "object") {
          newObj[key] = deepCopy(obj[key]);
        } else {
          //如果不是，簡單復(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 方法

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

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 中的深拷貝與淺拷貝的知識和如何進(jìn)行深拷貝的知識了，如果有錯或者有其他方式的話，歡迎在下面留言評論啦

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99393.html

發(fā)表評論

登陸后可評論

0條評論

ztyzz

男|高級講師

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

TA的文章

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

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

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

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

閱讀 2035·2019-08-30 13:21
CSS相對定位

閱讀 1250·2019-08-30 12:50
css兩種垂直居中對齊解決方案

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

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

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

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

JS 中的深拷貝與淺拷貝

相關(guān)文章