JavaScript 浅拷贝、深拷贝

一、浅拷贝：

指的是拷贝的是内存地址的拷贝：其中一个数据发生变化，另外一个数据也会发生变化。

     浅拷贝方式一：使用赋值运算符

<script>
const arr = [12, 11, 13];
const ary = arr;//赋值浅拷贝
ary[2] = 15;
console.log('arr', arr);//[12, 11, 15]
console.log('ary', ary);//[12, 11, 15]
</script>

     浅拷贝方式二：Object.assign（ ）参数只有一个，那么返回值是目标对象

<script>
 let source = {
        name: 'ann',
         age: 18
        }
let target = Object.assign(source);//浅拷贝
console.log(source);//{name: 'ann', age: 18}
target.age = 19;
console.log(source);//{name: 'ann', age: 19}
console.log(target);//{name: 'ann', age: 19}
<script>

---

二、深拷贝

      指的就是拷贝的是数据的值，而不是地址，最终拷贝后的两条数据，值是一样的，但是地址是不一样的。

       深拷贝方式一：对数组的拷贝：展开运算符 ...

<script>
const ary1 = [12, 3, 3];
const ary2 = [...ary1];
ary1[2] = 0;
console.log(ary1);//[12, 3, 0]
console.log(ary2);//[12, 3, 3] ary2未被ary1的改变影响
</script>

       深拷贝方式二：对对象的拷贝: Object.assign({ },source)

        缺点：如果对象中有函数，函数无法深拷贝。

<script>
let p1 = {
      name: 'ann',
      age: 18,
      wife: {
            name: 'Lucy'
         }
  }
let p2 = Object.assign({}, p1);
p2.age = 20;
p2.wife.name = "Lily";
console.log(p1);//{name: 'ann', age: 18, wife: {name: 'Lily'}}
console.log(p2);//{ name: 'ann', age:20, wife:{ name: 'Lily' } }
</script>

     深拷贝方式三：JSON.parse(JSON.stringify(source对象))

<script>
let p1 = {
      name: 'ann',
       age: 18,
        wife: {
              name: 'Lucy'
       }
    }
let p2 = JSON.parse(JSON.stringify(p1))
p2.age = 20;
p2.wife.name = "Lily";
console.log(p1);//{name: 'ann', age: 37, wife: {name: 'Lucy'}}
console.log(p2);//{ name: 'ann', age: 38, wife:{ name: 'Lily' } }
</script>

       深拷贝方式四、  使用递归方式进行深拷贝

<script>
 var obj =
        {
          id: 1,
           name: '服饰',
           goods: {
                price: 20,
                num: 2
            },
          color: ['pink', 'red']

        }

var o = {};
function deepCopy(newObj, oldObj) {
            // 1.遍历
       for (var k in oldObj) {
             var item = oldObj[k];
                // 2.判断是否数组
                if (item instanceof Array) {
                    newObj[k] = [];
                    deepCopy(newObj[k], item)
                    // 3.判断对象
            } else if (item instanceof Object) {
                    newObj[k] = {};
                    deepCopy(newObj[k], item)
                    // 4.简单数据类型
                } else {
                    newObj[k] = item
                }
            }
        }
deepCopy(o, obj)
console.log(o);
</script>