深浅拷贝简单理解

深浅拷贝的由来是因为引用数据类型赋值时 改变期中一个的值 另一个也会发生变化

拷贝就是复制的意思 用来赋值

深浅拷贝是针对引用数据类型来说的 

基本数据类型值相等 改变其中的一个值 另一个值不会发生改变  因为基本数据类型存在堆中 存的是值

引用数据类型值相等 改变其中的一个值 另一个值会跟着发生改变  因为引用数据类型存在栈中 存的是地址 两个数据赋值时 指向的是同一个地址

例如：

基本数据类型赋值(不存在深浅拷贝的问题)

var a=10

var b=a

console.log(b)//10

复杂数据类型赋值

var a=[1,2,3,4,5]

var b=a

a[0]=10

console.log(b)//[10,2,3,4,5]

如果改变a的值 b的值也会跟着改变 这就是浅拷贝的问题

应用场景：深浅拷贝的问题多发生在点击编辑时数据回填

如果不想改变一个值 另一个值也跟着改变时的解决办法：浅拷贝转深拷贝

方法1（推荐使用）：JSON.parse(JSON.stringify(要赋值的数据))

var a=[1,2,3,4,5,{name:'张三'}]

var b=JSON.parse(JSON.stringify(a))

a[0]=10
a[5].name="李四"

console.log(b)//[1,2,3,4,5,{name:'张三'}]

方法2 ：concat合并（属于浅拷贝 只能改变基本数据类型 不能改变引用数据类型）

基本数据类型时：

        var a = [1, 2, 3, 4, 5]
        var b=[]
        var c=b.concat(a)
        a[0] = 10
        console.log(c)//[1,2,3,4,5]

引用数据类型时：

        var a = [1, 2, 3, 4, 5, { name: '张三' }]
        var b = []
        var c = b.concat(a)
        a[0] = 10
        a[5].name="李四"
        console.log(c)//[1,2,3,4,5,{name:'李四'}]

方法3：...扩展运算符（属于浅拷贝 只能改变基本数据类型 不能改变引用数据类型）

基本数据类型时：

        var a = [1, 2, 3, 4, 5]
        var b=[]
        var c=[...a,...b]
        a[0] = 10
        console.log(c)//[1,2,3,4,5]

引用数据类型时：

        var a = [1, 2, 3, 4, 5, { name: '张三' }]
        var b = []
        var c = [...a,...b]
        a[0] = 10
        a[5].name="李四"
        console.log(c)//[1,2,3,4,5,{name:'李四'}]