JS 深浅拷贝

一、数据类型

      数据分为基本数据类型(String, Number, Boolean, Null, Undefined,Symbol(new in ES 6)引用数据类型统称为 Object 类型,细分的话有:Object Array Date RegExpFunction… )。

  • 基本数据类型的特点:直接存储在栈(stack)中的数据

  • 引用数据类型的特点:存储的是该对象在栈中引用,真实的数据存放在堆内存

      引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体。

http://wx3.sinaimg.cn/mw690/63918611gy1fysjbt7zccj20cr09ndfv.jpg

二、浅拷贝与深拷贝

深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的

浅拷贝和深拷贝的示意图大致如下:

http://wx2.sinaimg.cn/mw690/63918611gy1fysjbtq7llj208m06bq40.jpg

浅拷贝只复制指向某个对象的指针而不复制对象本身,新旧对象还是共享同一块内存。

深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。

三、赋值和浅拷贝的区别

  • 当我们把一个对象赋值给一个新的变量时,赋的其实是该对象的在栈中的地址,而不是堆中的数据。也就是两个对象指向的是同一个存储空间,无论哪个对象发生改变,其实都是改变的存储空间的内容,因此,两个对象是联动的。
  • 浅拷贝是按位拷贝对象,它会创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型,拷贝的就是基本类型的值;如果属性是内存地址(引用类型),拷贝的就是内存地址 ,因此如果其中一个对象改变了这个地址,就会影响到另一个对象。即:默认拷贝构造函数只是对对象进行浅拷贝复制(逐个成员依次拷贝),即只复制对象空间而不复制资源。

我们先来看两个例子,对比赋值与浅拷贝会对原对象带来哪些改变?

 对象赋值:

 var obj1 = {

    'name' : 'zhangsan',

    'age' :  '18',

    'language' : [1,[2,3],[4,5]],

};

var obj2 = obj1;

obj2.name = "lisi";

obj2.language[1] = ["",""];

console.log('obj1',obj1)

console.log('obj2',obj2)

http://wx2.sinaimg.cn/mw690/63918611gy1fysjbu54fwj20bi0a1aal.jpg

 

浅拷贝:

 var obj1 = {

    'name' : 'zhangsan',

    'age' :  '18',

    'language' : [1,[2,3],[4,5]],  //Array

};

 var obj3 = shallowCopy(obj1);

 obj3.name = "lisi";

 obj3.language[1] = ["",""];

 function shallowCopy(src) {

    var dst = {};

    for (var prop in src) {

        if (src.hasOwnProperty(prop)) {

            dst[prop] = src[prop];

        }

    }

    return dst;

}

console.log('obj1',obj1)

console.log('obj3',obj3)

http://wx3.sinaimg.cn/mw690/63918611gy1fysjbufdk1j20bj0a2jry.jpg

上面例子中,obj1是原始数据,obj2是赋值操作得到,而obj3浅拷贝得到。我们可以很清晰看到对原始数据的影响,具体请看下表:

http://wx1.sinaimg.cn/mw690/63918611gy1fysjbuvhckj20h8059jri.jpg

四、浅拷贝的实现方式

1.Object.assign()

Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。但是 Object.assign()进行的是浅拷贝,拷贝的是对象的属性的引用,而不是对象本身。

var obj = { a: {a: "kobe", b: 39} };

var initalObj = Object.assign({}, obj);

initalObj.a.a = "wade";

console.log(obj.a.a); //wade

 

注意:当object只有一层的时候,是深拷贝

let obj = {

    username: 'kobe'

    };

let obj2 = Object.assign({},obj);

obj2.username = 'wade';

console.log(obj);//{username: "kobe"}

 

2.Array.prototype.concat()

let arr = [1, 3, {

    username: 'kobe'

    }];

let arr2=arr.concat();    

arr2[2].username = 'wade';

console.log(arr);

 

修改新对象会改到原对象:

http://wx4.sinaimg.cn/mw690/63918611gy1fysjbv66l1j208g02wzk5.jpg

 

3.Array.prototype.slice()

let arr = [1, 3, {

    username: ' kobe'

    }];

let arr3 = arr.slice();

arr3[2].username = 'wade'

console.log(arr);

 

同样修改新对象会改到原对象:

http://wx3.sinaimg.cn/mw690/63918611gy1fysjbvh9tmj208302vwed.jpg

关于Array的slice和concat方法的补充说明

Array的slice和concat方法不修改原数组,只会返回一个浅复制了原数组中的元素的一个新数组。

原数组的元素会按照下述规则拷贝:

  • 如果该元素是个对象引用(不是实际的对象),slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变,则新的和原来的数组中的这个元素也会发生改变。
  • 对于字符串、数字及布尔值来说(不是 String、Number 或者 Boolean 对象),slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值,将不会影响另一个数组。

可能这段话晦涩难懂,我们举个例子,将上面的例子小作修改:

let arr = [1, 3, {

    username: ' kobe'

    }];

let arr3 = arr.slice();

arr3[1] = 2

console.log(arr,arr3);

 

http://wx2.sinaimg.cn/mw690/63918611gy1fysjbvuelmj20b9031t8q.jpg

五、深拷贝的实现方式

1.JSON.parse(JSON.stringify())

let arr = [1, 3, {

    username: ' kobe'

}];

let arr4 = JSON.parse(JSON.stringify(arr));

arr4[2].username = 'duncan';

console.log(arr, arr4)

 

http://wx1.sinaimg.cn/mw690/63918611gy1fysjbwa833j20bm02w74a.jpg

原理: 用JSON.stringify将对象转成JSON字符串,再用JSON.parse()把字符串解析成对象,一去一来,新的对象产生了,而且对象会开辟新的栈,实现深拷贝。

这种方法虽然可以实现数组或对象深拷贝,但不能处理函数

let arr = [1, 3, {

    username: ' kobe'

},function(){}];

let arr4 = JSON.parse(JSON.stringify(arr));

arr4[2].username = 'duncan';

console.log(arr, arr4)

 

http://wx3.sinaimg.cn/mw690/63918611gy1fysjbwrolxj20c603at8r.jpg

这是因为JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串,不能接受函数

2.手写递归方法

递归方法实现深度克隆原理:遍历对象、数组直到里边都是基本数据类型,然后再去复制,就是深度拷贝

    //定义检测数据类型的功能函数

    function checkedType(target) {

      return Object.prototype.toString.call(target).slice(8, -1)

    }

    //实现深度克隆---对象/数组

    function clone(target) {

      //判断拷贝的数据类型

      //初始化变量result 成为最终克隆的数据

      let result, targetType = checkedType(target)

      if (targetType === 'object') {

        result = {}

      } else if (targetType === 'Array') {

        result = []

      } else {

        return target

      }

      //遍历目标数据

      for (let i in target) {

        //获取遍历数据结构的每一项值。

        let value = target[i]

        //判断目标结构里的每一值是否存在对象/数组

        if (checkedType(value) === 'Object' ||

          checkedType(value) === 'Array') { //对象/数组里嵌套了对象/数组

          //继续遍历获取到value

          result[i] = clone(value)

        } else { //获取到value值是基本的数据类型或者是函数。

          result[i] = value;

        }

      }

      return result

    }

 

3.函数库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

 

 

### JavaScript 深拷贝与浅拷贝的区别及实现方式 #### 深拷贝与浅拷贝的区别 浅拷贝仅复制对象的第一层属性,而深拷贝会递归地复制对象的所有层级。如果对象的属性本身是引用类型(如数组或对象),浅拷贝只会复制引用地址,而不会创建新的独立对象[^2]。 例如,使用浅拷贝时,修改原始对象中的嵌套对象会影响拷贝后的对象,因为它们共享相同的引用地址[^4]。 ```javascript let obj1 = { a: 1, b: { c: 2 } }; let obj2 = Object.assign({}, obj1); // 浅拷贝 obj2.b.c = 3; console.log(obj1.b.c); // 输出 3 ``` 相比之下,深拷贝会为嵌套的对象创建全新的实例,确保修改拷贝后的对象不会影响原始对象[^4]。 ```javascript let obj1 = { a: 1, b: { c: 2 } }; let obj2 = JSON.parse(JSON.stringify(obj1)); // 深拷贝 obj2.b.c = 3; console.log(obj1.b.c); // 输出 2 ``` #### 实现浅拷贝的方法 1. 使用 `Object.assign()` 方法可以实现浅拷贝,它将源对象的属性复制到目标对象中[^4]。 ```javascript let obj1 = { a: 1, b: { c: 2 } }; let obj2 = Object.assign({}, obj1); ``` 2. 使用扩展运算符 `...` 也可以实现浅拷贝[^4]。 ```javascript let obj1 = { a: 1, b: { c: 2 } }; let obj2 = { ...obj1 }; ``` #### 实现深拷贝的方法 1. **递归实现**:通过递归遍历对象的每个属性,逐一复制。这种方法适用于复杂对象结构,但需要处理循环引用问题[^3]。 ```javascript function deepCopy(obj) { if (obj instanceof Array) { var newObj = []; } else { var newObj = {}; } for (let i in obj) { if (typeof obj[i] === "object" && obj[i] !== null) { newObj[i] = deepCopy(obj[i]); } else { newObj[i] = obj[i]; } } return newObj; } ``` 2. **通过 `JSON` 对象实现深拷贝**:将对象转换为字符串后再解析为新对象。此方法简单高效,但无法处理函数、`undefined` 和 `Date` 类型等特殊值[^2]。 ```javascript let obj1 = { a: 1, b: { c: 2 } }; let obj2 = JSON.parse(JSON.stringify(obj1)); ``` 3. **通过 jQuery 的 `extend` 方法实现深拷贝**:设置第一个参数为 `true` 即可启用深拷贝功能。 ```javascript let array = [1, 2, 3, 4]; let newArray = $.extend(true, [], array); ``` 4. **使用第三方库(如 Lodash)实现深拷贝**:Lodash 提供了 `_.cloneDeep` 方法,能够处理更复杂的对象结构[^1]。 ```javascript let obj1 = { a: 1, b: { c: 2 } }; let obj2 = _.cloneDeep(obj1); ``` 5. **改进的递归实现**:通过引入 `WeakMap` 处理循环引用问题,确保深拷贝的健壮性[^4]。 ```javascript function deepClone(obj, hash = new WeakMap()) { if (obj === null) return obj; if (obj instanceof Date) return new Date(obj); if (obj instanceof RegExp) return new RegExp(obj); if (typeof obj !== "object") return obj; if (hash.has(obj)) return hash.get(obj); let cloneObj = new obj.constructor(); hash.set(obj, cloneObj); for (let key in obj) { if (obj.hasOwnProperty(key)) { cloneObj[key] = deepClone(obj[key], hash); } } return cloneObj; } ``` #### 注意事项 - 浅拷贝仅适用于简单对象,对于嵌套对象可能引发意外行为。 - 深拷贝需要考虑性能问题,尤其是在处理大型或复杂对象时。 - 特殊类型(如 `Date`、`RegExp`、`Function`)在深拷贝时需要额外处理[^4]。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值