JS对象的深拷贝和浅拷贝

书中仙
2019.02.14 21:56 字数 1598 阅读 111 评论 0 喜欢 0

本篇文章主要讲解js对象如何进行深拷贝和浅拷贝

在学习之前,我们有必要了解,什么是深拷贝,什么是浅拷贝

我们都知道,js的数据类型分原始类型(基本类型)和引用类型

原始类型包括:Boolean,null,undefined,Number,String,Symbol

引用类型包括:Object,Function

let student = {
name: '张三',
age: 18
}

这是一个常见的对象,可以看到,这个对象的属性都是基本类型,我们叫这种对象为非嵌套对象,这种对象的深拷贝和浅拷贝都是一样的,也就是说非嵌套对象就无从谈起深拷贝和浅拷贝。

let student = {
name: '张三',
age: 18,
family: ['爸爸','妈妈','爷爷']
}

这个对象相比上面那个多了一个引用类型的属性,这种对象称之为嵌套对象。

假设现在有一个对象student2是从student拷贝而来,我们先不管如何实现,先看浅拷贝和深拷贝的结果

浅拷贝:

console.log( student !== studen2 ) //true 无论哪种拷贝,student和student2一定都是2个不同的对象(内存空间不同)
console.log( student.family === student2.family ) //true 他们2个对象里family的引用,指向【相同的】内存空间

所以, 2个student经过拷贝后,虽然他们属性相同,也的确是不同的对象,但他们内部的obj都是指向同一个内存空间,这种我们叫浅拷贝

深拷贝:

console.log( student !== studen2 ) //true 无论哪种拷贝,student和student2一定都是2个不同的对象(内存空间不同)
console.log( student.family === student2.family ) //false 他们2个对象里family的引用,指向【不同的】内存空间

所以, 2个obj经过拷贝后,除了拷贝下来相同的属性之外,没有任何其他关联的2个对象,这种我们叫深拷贝

浅拷贝的实现

浅拷贝的方法非常简单,只是重新循环赋值就可以了

function shallowCopy(source) {
var target = {},
key;
for (key in source) {
target[key] = source[key];
}
return target;
}

深拷贝的实现

  1. 1、深拷贝,就是遍历那个被拷贝的对象
  2. 2、判断对象里每一项的数据类型
  3. 3、如果不是对象类型,就直接赋值,如果是对象类型,就再次调用deepCopy,递归的去赋值

function deepCopy( source ) {
let target = Array.isArray( source ) ? [] : {}
for ( var k in source ) {
if ( typeof source[ k ] === 'object' ) {
target[ k ] = deepCopy( source[ k ] )
} else {
target[ k ] = source[ k ]
}
}
return target
}

其实浅拷贝和深拷贝的概念都不难,相信看了这篇文章你应该能有深刻的印象。

tips:js中有一个深拷贝的小技巧 var targetObj = JSON.parse(JSON.stringify(copyObj)); 一行搞定深拷贝,但是有两个小缺陷,1、函数无法被拷贝下来。2、无法拷贝对象原型链上的属性和方法


支付二维码
登录 后发表评论
${comment_count}条评论 评论

智慧如你,不想发表一点想法咩~

推荐阅读
更多精彩内容