浅拷贝与深拷贝

浅拷贝与深拷贝的区别🤞

浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用，只拷贝一层

深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”，层层拷贝

为什么要使用深拷贝🤷‍♀️

为了避免拷贝后修改新数组或对象时，不会改变原数组或原对象

实现浅拷贝的方式

• 循环遍历

 var arr = [1,2,3,4]
    var ary = []
    for(var i=0 ; i < arr.length ; i++){
        ary.push(arr[i])
    }
    console.log(ary)
    console.log(arr==ary) //false

• slice()
  slice() 方法返回一个从已有的数组中截取一部分元素片段组成的新数组（不改变原来的数组！）

用法：array．slice(start,end)　start表示是起始元素的下标，　end表示的是终止元素的下标

当slice()不带任何参数的时候，默认返回一个长度和原数组相同的新数组

 var arr = [1, 2, 3, 4]
    let ary = arr.slice()
    console.log(ary)
    console.log(ary == arr) // false

• concat()
  concat() 方法用于连接两个或多个数组。( 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。)

var array = [1, 2, 3, 4];
var copyArray = array.concat();
copyArray[0] = 100;
console.log(array); // [1, 2, 3, 4]
console.log(copyArray); // [100, 2, 3, 4]

如何实现深拷贝👍

1.JSON.stringify()
这个方法一时用一时爽，一直用一直爽，简单，好用

注：只支持JSON格式的数据

let obj = {
        arr: [
            { a: 100 },
            { b: 200 },
            { c: 300 }
        ],
        d: 400
    }
    var ovj = JSON.parse(JSON.stringify(obj))
    console.log(ovj) // {arr:[{a:100},{b:200},{c:300},d:400]}
    console.log(obj == ovj) //false

    //最简单的深拷贝

2. 递归思想，实现深拷贝
写递归时记得多吃六个核桃，递归的方法是相当有技术含量的

//递归循环，实现深拷贝
    function deepCopy(arg) {
            if (typeof (arg) != 'object' || arg == null) {
                return arg
            }
            let result;
            if (arg instanceof Array) {
                result = []
            } else {
                result = {}
            }
            for (var i in arg) {
                if (arg.hasOwnProperty(i)) {
                    result[i] = deepCopy(arg[i])
                }
            }
            return result
        }
        var obj = {
            arr: [ovj = { a: 10, b: 20 }],
            c: 200
        }
        var box = deepCopy(obj)// {arr:[ov={a:10,b:20}],c:200}
        box.c = 2000
        console.log(box) // {arr:[ov={a:10,b:20}],c:2000}