js中如何实现深拷贝？

1、什么是深拷贝、浅拷贝？

链接: js中的浅拷贝、深拷贝与赋值的区别

2、深拷贝的实现方式

  深拷贝是针对于引用数据类型

方法1：通过ES6新增的扩展运算符（…）实现

代码示例

let arr = [1, 2, 5, 3, 7, 4];
//进行深拷贝
let newArr = [...arr];

console.log('深拷贝的新数组', newArr);
//对新数组中的元素值进行修改
newArr[3] = 273287;
console.log('修改值后的新数组', newArr);
console.log('原数组', arr);//原数组中的值未被修改

运行结果

方法2：通过JSON对象实现

  通过JSON.stringify()将对象转为字符串，通过JSON.parse()将字符串转为JSON对象，此时会变成一个新的对象

  此方法的缺点：无法拷贝对象内部的函数

代码示例

let obj = {
    name: '张三',
    address: {
        sheng: "四川",
        shi: "成都"
    },
    sex: "男",
    fun: () => {
        console.log(obj.name);
    }
}
console.log('原obj',obj);
//通过JSON.stringify()将obj转为字符串
let str=JSON.stringify(obj);
// 再通过JSON.parse()将字符串转为JSON对象
let newObj=JSON.parse(str);
console.log('新newObj',newObj);//obj中的函数没有进行拷贝
//修改新对象的值
newObj.name='李四';
console.log('修改属性值后新对象',newObj);
console.log('修改新对象属性值后的原对象',obj);//未发生变化

运行结果

方法3：使用递归的方法实现

代码示例：

function deepClone(obj) {
//    判断传递过来形参是不是数组
    let objClone = Array.isArray(obj) ? [] : {};
    if (obj && typeof obj === 'object') {

        for (let key in obj) {
            if (obj.hasOwnProperty(key)) {
                //    判断obj子元素是否为对象，如果是，递归复制
                if (obj[key] && typeof obj[key] === 'object') {
                    objClone[key] = deepClone(obj[key]);
                } else {
                    objClone[key] = obj[key];
                }
            }

        }
    }
    return objClone;
}
let a=[1,2,3,4,{name:"张珊",age:18}];
let b=deepClone(a);
console.log('原数组a',a);
console.log('深拷贝后的新数组b',b);
//对原数组的值进行修改
a[3]=99999;
a[4].age=34567
console.log('修改原数组元素值后的原数组a',a);
console.log('修改原数组元素值后的新数组b',b);

运行结果

方法4：通过jquery中的extend方法实现

let arr = [1, 3, 5, 7];
    let newArr = $.extend(true, [], arr);//true为深拷贝，false为浅拷贝
    newArr.push(999)
    console.log('newArr',newArr);
    console.log('arr',arr);