js數(shù)組和對象的深拷貝

深淺拷貝區(qū)別:

淺拷貝是拷貝一層阁危,深層次的對象級別的就只拷貝引用玛痊;
深拷貝是拷貝多層,每一級別的數(shù)據(jù)都會拷貝出來狂打。

在JS中擂煞,一般賦值語句=表示的只是對象/數(shù)組的引用,屬于淺拷貝菱父,淺拷貝會導致新數(shù)組和舊數(shù)組共用同一塊內存地址颈娜,其中一個數(shù)組變化,另一個數(shù)組也會相應的變化浙宜。以下是我積累的一些關于對象/數(shù)組深拷貝的方法官辽。

一維數(shù)組的拷貝

(1)slice()

arrayObject.slice(start,end)
返回一個新的數(shù)組,包含從 start 到 end (不包括該元素)的 arrayObject 中的元素粟瞬。

let arr = ['old', 1, 2, 3, 4];
let new_arr = arr.slice();
new_arr[0] = 'new';

console.log(arr) // ["old", 1, 2, 3, 4]
console.log(new_arr) // ["new", 1, 2, 3, 4]

(2)concat()

arrayObject.concat(arrayX,arrayX,......,arrayX)
方法用于連接兩個或多個數(shù)組同仆。該方法不會改變現(xiàn)有的數(shù)組,而僅僅會返回被連接數(shù)組的一個副本裙品。
該數(shù)組是通過把所有 arrayX 參數(shù)添加到 arrayObject 中生成的俗批。如果要進行 concat() 操作的參數(shù)是數(shù)組,那么添加的是數(shù)組中的元素市怎,而不是數(shù)組岁忘。

let arr = ['old', 1, 2, 3, 4];
let new_arr = arr.concat();
new_arr[0] = 'new';

console.log(arr) // ["old", 1, 2, 3, 4]
console.log(new_arr) // ["new", 1, 2, 3, 4]

(3)Object.assign() 數(shù)組/對象都可

該方法用于將所有可枚舉的屬性的值從一個或多個源對象復制到目標對象。它將返回目標對象区匠。我們可以使用它進行對象的復制干像、合并。

// 復制
let c = Object.assign({}, { a: 'apple' });
console.log(c); // { a: 'apple' }

//合并
let o = {}
let c = Object.assign(o, { a: 'apple' }, { b: 'banana' }, { c: 'cake' } )
console.log(c) // { a: 'apple', b: 'banana', c: 'cake' }

雖然它可以復制對象驰弄,但是 Object.assign() 拷貝的是屬性值麻汰。假如源對象的屬性值是一個指向對象的引用,它也只拷貝那個引用值戚篙。

(4)ES6擴展運算(...)數(shù)組/對象都可

let arr =  ["a", "b"] ;
let arrCopy = [...arr];
arrCopy[1] = "c";
arr   // => ["a", "b"] 
arrCopy   // => ["a", "c"]

以上四個個方法 concat五鲫、slice、JSON.stringify岔擂,... 都算是技巧類,可以根據(jù)實際項目情況選擇使用位喂,接下來我們實現(xiàn)多維數(shù)組/對象的深拷貝。

多維數(shù)組的拷貝

(1)封裝方法

let obj1 = {
       a: '1',
        b: '2',
        c: {
                 d: '3'
             },
         d: function aa() {}
   }

    function deepCopy(obj) {
          if(typeof obj !== 'object') return;
          let newObj = obj instanceof Array ? [] : {};
          for(var key in obj) {
               if(obj.hasOwnProperty(key)) {
                    newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
                }
            }
            return newObj;
       }     
      let tes=deepCopy(obj1);
      console.log(tes)
      obj1.c.d=32;
      console.log(obj1)

(2)JSON.parse() & JSON.stringify() (推薦)

原理:實現(xiàn)對象的深拷貝(利用JSON.stringify 將js對象序列化(JSON字符串)乱灵,再使用JSON.parse來反序列化(還原)js對象)

let arr =  ["a", "b"] ;
let arrCopy = JSON.parse(JSON.stringify(arr));
arrCopy[1] = "c";
arr   // => ["a", "b"] 
arrCopy   // => ["a", "c"]

(3)lodash

使用第三方的庫進行深拷貝:lodash
該函數(shù)庫也有提供_.cloneDeep用來做 Deep Copy

var _ = require('lodash');
var obj1 = {
    a: 1,
    b: { f: { g: 1 } },
    c: [1, 2, 3]
};
var obj2 = _.cloneDeep(obj1);
console.log(obj1.b.f === obj2.b.f);  // false
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末忆某,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子阔蛉,更是在濱河造成了極大的恐慌,老刑警劉巖癞埠,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件状原,死亡現(xiàn)場離奇詭異聋呢,居然都是意外死亡,警方通過查閱死者的電腦和手機颠区,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進店門削锰,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人毕莱,你說我怎么就攤上這事器贩。” “怎么了朋截?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵蛹稍,是天一觀的道長。 經常有香客問我部服,道長唆姐,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任廓八,我火速辦了婚禮奉芦,結果婚禮上,老公的妹妹穿的比我還像新娘剧蹂。我一直安慰自己声功,他們只是感情好,可當我...
    茶點故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布宠叼。 她就那樣靜靜地躺著先巴,像睡著了一般。 火紅的嫁衣襯著肌膚如雪车吹。 梳的紋絲不亂的頭發(fā)上筹裕,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天,我揣著相機與錄音窄驹,去河邊找鬼朝卒。 笑死,一個胖子當著我的面吹牛乐埠,可吹牛的內容都是我干的抗斤。 我是一名探鬼主播,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼丈咐,長吁一口氣:“原來是場噩夢啊……” “哼瑞眼!你這毒婦竟也來了?” 一聲冷哼從身側響起棵逊,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤伤疙,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體徒像,經...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡黍特,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了锯蛀。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片灭衷。...
    茶點故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖旁涤,靈堂內的尸體忽然破棺而出翔曲,到底是詐尸還是另有隱情,我是刑警寧澤劈愚,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布瞳遍,位于F島的核電站,受9級特大地震影響造虎,放射性物質發(fā)生泄漏傅蹂。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一算凿、第九天 我趴在偏房一處隱蔽的房頂上張望份蝴。 院中可真熱鬧,春花似錦氓轰、人聲如沸婚夫。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽案糙。三九已至,卻和暖如春靴庆,著一層夾襖步出監(jiān)牢的瞬間时捌,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工炉抒, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留奢讨,地道東北人。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓焰薄,卻偏偏與公主長得像拿诸,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子塞茅,可洞房花燭夜當晚...
    茶點故事閱讀 44,577評論 2 353

推薦閱讀更多精彩內容