一文教你读懂基本的深拷贝与浅拷贝

前言

在前端开发中会遇到一些需要字符串转对象，对象转字符串等数据类型之间的转换，话不多说，直接上代码：

1、通过JSON.parse()将字符串转换成对象

// 字符串 JSON
const str = '{"name":"jack","skill":"抗冻"}'3 const obj = JSON.parse(str)
console.log(obj)

2、通过JSON.stringify()将对象转换成字符串

// 对象
const cartoon ={name:"食戬之灵",special:"健康的美食番！！"}
// 对象 转成 JSON的字符串
const jsonStr =  JSON.stringify(cartoon)
console.log(jsonStr)

下面就来聊聊深浅拷贝

3、浅拷贝

// 浅拷贝 地址
const objA = {
    name:"jack",
    age:18
}
const objB = objA
objB.name="rose"
console.log(objB.name) // rose
console.log(objA.name) // rose

objA和objB都指向了 同一个对象，通过B改了name A指向的对象也改了

4、深拷贝

const p1 ={
    name:"中华小当家",
    skill:"好吃到爆炸"
}
// p1 转为 字符串(基本类型)
const p1Str = JSON.stringify(p1);
console.log(p1Str);

// 字符串 转成了 对象，新对象 和p1只是值相同而已 
const p2 = JSON.parse(p1Str)
console.log(p2)
p2.name="神厨小福贵"
        
// console.log(p2.name);// 神厨小福贵
// console.log(p1.name);// 中华小当家

深拷贝 弄一个新的对象出来 和老对象初始数据一致，地址不同

但是深拷贝也有缺点，就是函数不会拷贝，那么这就需要你自己理解理解啦(#^.^#)

比如下面这种情况就不会拷贝哦（还是引用上面的例子）：

const p1 ={
    name:"中华小当家",
    skill:"好吃到爆炸",
    eat:function(){
        console.log('吧唧吧唧！！！')
    }
}
// p1 转为 字符串(基本类型)
const p1Str = JSON.stringify(p1);
console.log(p1Str);

// 字符串 转为了 对象 新对象 和p1只是值相同而已 
const p2 = JSON.parse(p1Str)
console.log(p2)
p2.name="神厨小福贵"

那么小伙伴们，你们了解了吗(#^.^#)！！！