深拷贝与浅拷贝和对应实现方法

最新推荐文章于 2024-08-15 08:55:57 发布

yourana123

最新推荐文章于 2024-08-15 08:55:57 发布

阅读量196

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/yourana123/article/details/128206139

版权

浅拷贝

创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。

如果属性是基本类型，拷贝的就是基本类型的值。
如果属性是引用类型，拷贝的就是指向内存的地址如果其中一个对象改变了这个引用类型的值，就会影响到另一个对象。

深拷贝

将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。
请添加图片描述

浅拷贝方法

1.“=”
基本类型

let a=1
let b=a
b=2
console.log(a);     //1
console.log(b);     //2

引用类型

let a={
    name:'张三',
}
let b=a
b.name='李四'
console.log(a.name);     //李四
console.log(b.name);     //李四

2.Object.assign

let a={
    name:'张三',
    nickname:{
        name:'法外狂徒'
    }
}
let b=Object.assign({},a)
b.name='李四'
b.nickname.name='青草蛇'
console.log(a.name); //张三
console.log(a.nickname.name);     //青草蛇
console.log(b.name);     //李四
console.log(b.nickname.name);     //青草蛇

注意：当对象只有一层的时候，并没有影响到原对象等价于深拷贝

3.Array.prototype.concat

let a=[1,'str',{age:1},[1]]
let b=a.concat()
b[0]=2
b[2].age=2
b[3][0]=2
console.log(a);    // [ 1, 'str', { age: 2 }, [ 2 ] ]
console.log(b);    // [ 2, 'str', { age: 2 }, [ 2 ] ]

4.Array.prototype.slice

let a=[1,'str',{age:1},[1]]
let b=a.slice()
b[0]=2
b[2].age=2
b[3][0]=2
console.log(a);    // [ 1, 'str', { age: 2 }, [ 2 ] ]
console.log(b);    // [ 2, 'str', { age: 2 }, [ 2 ] ]

注意：当数组只有一层的时候，并没有影响到原数组等价于深拷贝
5.扩展运算符

let a={
    name:'张三',
    nickname:{
        name:'法外狂徒'
    }
}
let b={...a}
b.name='李四'
b.nickname.name='青草蛇'
console.log(a.name); //张三
console.log(a.nickname.name);     //青草蛇
console.log(b.name);     //李四
console.log(b.nickname.name);     //青草蛇

注意：当数组或对象只有一层的时候，并没有影响到原数组或对象等价于深拷贝

深拷贝方法

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

let a={
    name:'张三',
    nickname:{
        name:'法外狂徒'
    },
    x:undefined,
    y:Symbol('1'),
    z:function fn() {
        console.log(1);
    }
}
let b=JSON.parse(JSON.stringify(a))
b.nickname.name='青草蛇'
console.log(a);
// {
//   name: '张三',
//   nickname: { name: '法外狂徒' },
//   x: undefined,
//   y: Symbol(1),
//   z: [Function: fn]
// }
console.log(b);
// { name: '张三', nickname: { name: '青草蛇' } }

注意：当对象内存在undefined、symbol、function类型的属性时，在过程中会被忽略
2.使用第三方库lodash
安装 npm i --save lodash

const _ = require('lodash') //引入lodash
let a={
    name:'张三',
    nickname:{
        name:'法外狂徒'
    },
    x:undefined,
    y:Symbol('1'),
    z:function fn() {
        console.log(1);
    }
}
let b=_.cloneDeep(a)
b.nickname.name='青草蛇'
console.log(a);
// {
//   name: '张三',
//   nickname: { name: '法外狂徒' },
//   x: undefined,
//   y: Symbol(1),
//   z: [Function: fn]
// }
console.log(b);
// {
//   name: '张三',
//   nickname: { name: '青草蛇' },
//   x: undefined,
//   y: Symbol(1),
//   z: [Function: fn]
// }

3.手动实现

let a={
    name:'张三',
    nickname:{
        name:'法外狂徒'
    },
    x:undefined,
    y:Symbol('1'),
    z:function fn() {
        console.log(1);
    }
}
function deepCopy(newobj,oldobj) {
   for( var k in oldobj){
    var item=oldobj[k]
    if(item instanceof Array){
        newobj[k]=[]
        deepCopy(newobj[k],item)
    }else if(item instanceof Object){
        newobj[k]=[]
        deepCopy(newobj[k],item)
    }else{
        newobj[k]=item
    }
   }
   return newobj
}

let b=deepCopy({},a)
b.nickname.name='青草蛇'
console.log(a);
console.log(b);
// {
//   name: '张三',
//   nickname: { name: '法外狂徒' },
//   x: undefined,
//   y: Symbol(1),
//   z: [Function: fn]
// }
// {
//   name: '张三',
//   nickname: [ name: '青草蛇' ],
//   x: undefined,
//   y: Symbol(1),
//   z: []
// }
//拷贝不了函数

let a={
    name:'张三',
    nickname:{
        name:'法外狂徒'
    },
    x:undefined,
    y:Symbol('1'),
    z:function fn() {
        console.log(1);
    }
}
function deepCopy(obj={}) {
    if(typeof obj !=='object'||obj==null){
     return obj
    }
    let res
    if(obj instanceof Array){
        res=[]
    }else{
        res={}
    }
    for(let key in obj){
       if(obj.hasOwnProperty(key)){
        res[key]=deepCopy(obj[key])
       }
    }
    return res
}
let b=deepCopy(a)
b.nickname.name='青草蛇'
console.log(a);
console.log(b);
//拷贝不了值为undefined的属性

在这里插入图片描述

4.structuredClone()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let a={
            name:'张三',
            nickname:{
                name:'法外狂徒'
            },
            x:undefined,
        }
        let b=structuredClone(a)
        b.nickname.name='青草蛇'
        console.log(a);
        console.log(b);
    </script>
</body>
</html>