谈谈js对象的深复制与浅复制

159 阅读1分钟

若本文对你有帮助 -- 请点个赞或者关注吧


1、引用赋值——浅复制

缺点:改变复制的对象时,原对象也改变(实际是同一对象)

var obj1={
    name:"admin",
    age:100
}

var obj2=obj1 	//只是把obj1指向堆内存的地址赋值给obj2
obj2.name = 'zlj'

console.log(obj1,obj2);

直接赋值时,obj1只是把指向堆内存的地址赋值给obj2,指向的还是同一个对象,因此改变obj2.name时,实际上改变的也是obj1

2、es6 ...扩展符 —— 深复制(有缺陷)

优点:这种复制方式不会改变原对象

var obj1={
    name:"admin",
    age:100
}

var obj2={...obj1}
obj2.name = 'zlj'
//当我们改变obj2.name时,obj1没有被改变
console.log(obj1,obj2);

缺点:当对象里面在嵌套一个对象时,对内部对象的复制是浅复制

var obj1={
    name:"admin",
    age:100,
    move:{like:'吃',sport:'篮球'}
}

var obj2={...obj1}
obj2.name = 'zlj'
obj2.move.like="喝"

console.log(obj1,obj2);

结果:改变的name没有影响原对象,但是内部的move对象是有影响的 es6 ...扩展符这种方式也只是比浅复制多复制一层

3、json-parse json-stringify方式——深复制(有缺陷)

优点:可以实现多层深复制

var obj1={
    name:"admin",
    age:100,
    move:{ like:'吃', sport:'篮球' }
}
//JSON.stringify()把对象转化成json字符串
//JSON.parse()把json字符串还原成对象
var obj2=JSON.parse(JSON.stringify(obj1))
obj2.name = 'zlj'
obj2.move.like="喝"

console.log(obj1,obj2);

缺点:值为undefined funtion的属性无法复制

var obj1={
    name:"admin",
    age:100,
    sex:undefined,
    move:{
        like:'吃',
        sport:'篮球'
    }
}
var obj2=JSON.parse(JSON.stringify(obj1))
obj2.name = 'zlj'
obj2.move.like="喝"
console.log(obj1,obj2);

image.png 当sex的值undefined时,sex属性就没有被复制到obj2