JS克隆的方法

**

JS中几种克隆的方法

**
克隆分为浅克隆与深克隆。

当克隆的数据为基本数据类型number、string、boolean时，undefined、null也是，它们可以直接赋值，彼此之间相互不影响。

// 以number为例 string boolean是一样的
let num1 = 123;
let num2 = num1;
num2 = 111;
console.log(num1,num2) // 123 111

当克隆数据为引用值时，他们修改时就会互相影响了。

let obj1 = {
       name: 'csdn',
       age: 1
}
let obj2 = obj1;
obj2.name = 'haha'
console.log(obj1,obj2) // {name:"haha", age: 1} {name:"haha", age: 1}

这也就是浅克隆与深克隆的区别了。
1.浅克隆是，将原始值进行复制，对引用值只是复制了它的引用地址，所以当obj2改变是obj1也跟着改变。
2.深克隆是，将原始值进行复制，而引用值是相当于将引用值剥开，将其中的原始值进行复制，如果还有引用值继续剥开，将原始值复制，这样他们obj1是obj1，obj2是obj2，就不会互相影响了。

下面我们写一下几种克隆的方法
1.用普通的函数封装一个克隆的方法

function clone(target) {
        let obj;
        if(typeof target == 'object'){      // typeof 结果为object的有三个 object array null
            if(Object.prototype.toString.call(target) == '[object Array]'){    // 判断是不是数组
                obj = [];
                for(let i = 0; i < target.length; i++){
                    obj.push(clone(target[i]))      // 使用递归
                }
            }else if(Object.prototype.toString.call(target) == '[object Object]'){     //判断是不是对象
                obj = {};
                for(let prop in target){
                    obj[prop] = clone(target[prop])      // 使用递归
                }
            }else{      // null
                obj = null;
            }
        }else{
            obj = target;     //原始值
        }
        return obj;
    }

2.使用JSON数据的方法

// 这种方法如果遇到函数、正则、new的时候就可能会失效出错的。
let obj = {
        name:'csdn',
        age : 18
    }
    let obj1 = JSON.parse(JSON.stringify(obj))
    obj1.name = 'haha';
    console.log(obj,obj1)  // {name:"csdn", age: 18} {name:"haha", age: 18}

3.使用jQuery中的$.extend方法

// 浅克隆
let obj = {
        name:'csdn',
        age : 18,
        chird: {
            a: 'a',
            b: 'b'
        }
    }
    let obj1 = {}
    $.extend(obj1,obj);
    obj1.chird.a = 'haha';
    console.log(obj1,obj) 
//深克隆
let obj = {
        name:'csdn',
        age : 18,
        chird: {
            a: 'a',
            b: 'b'
        }
    }
    let obj1 = {}
    $.extend(true,obj1,obj);
    obj1.chird.a = 'haha';
    console.log(obj1,obj)

4.另一种浅克隆的方法（ES7中 …）
当对象只有一层时可以用

let obj1 = {
        name : 'csdn',
        age : 18,
        child: {
            a: 'a'
        }
    }
    let obj2 = {
        name: 'javascript',
        age: 20,
        son: {
            b: 'b'
        }
    }
    let obj = {
        ...obj1,
        ...obj2
    }
    console.log(obj)
//大家可以试试 obj.name = 'haha'; obj、obj1、obj2的值？ obj.child.a = 'A'时呢？大家试一试吧！！！

新手！！！ 如有错误，请大家指出来，互相学习！互相勉励！！！