js数组和对象的深拷贝

深浅拷贝区别:

浅拷贝是拷贝一层,深层次的对象级别的就只拷贝引用;
深拷贝是拷贝多层,每一级别的数据都会拷贝出来。

在JS中,一般赋值语句=表示的只是对象/数组的引用,属于浅拷贝,浅拷贝会导致新数组和旧数组共用同一块内存地址,其中一个数组变化,另一个数组也会相应的变化。以下是我积累的一些关于对象/数组深拷贝的方法。

一维数组的拷贝

(1)slice()

arrayObject.slice(start,end)
返回一个新的数组,包含从 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)
方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组,那么添加的是数组中的元素,而不是数组。

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() 数组/对象都可

该方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。我们可以使用它进行对象的复制、合并。

// 复制
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扩展运算(...)数组/对象都可

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

以上四个个方法 concat、slice、JSON.stringify,... 都算是技巧类,可以根据实际项目情况选择使用,接下来我们实现多维数组/对象的深拷贝。

多维数组的拷贝

(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() (推荐)

原理:实现对象的深拷贝(利用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
该函数库也有提供_.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
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,723评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,003评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,512评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,825评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,874评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,841评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,812评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,582评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,033评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,309评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,450评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,158评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,789评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,409评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,609评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,440评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,357评论 2 352

推荐阅读更多精彩内容