深浅拷贝实现方法(三种)

提示：
JavaScript中的深浅拷贝实现方法(三种)

---

文章目录

• 深浅拷贝实现方法(三种)
• 前言
• 一、如下图所示(图片非自己制作)
• 二、深拷贝方法的实现(三种方法)
• • 1.通过递归的方式实现深拷贝(jquery中的extend)
  • 2.使用JSON.parse()和JSON.stringify()
  • 3.通过递归的方式实现深拷贝

---

前言

基本数据类型：数据存储在栈中。

引用数据类型：数据存放在堆内存中，栈中存放了一个引用地址，指向堆内存中的数据。

引用数据赋值，a 在栈区中,使用了 *b * 的引用地址(堆内存中存在引用地址,后续会出文章讲述,堆与栈的一个区别),

浅拷贝 相当于栈区中有一个变量,直接复制了另外一个变量的值 / 指向另外一个变量的引用地址。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。

深拷贝 深拷贝会拷贝目标对象的所有的属性，并拷贝属性指向的动态分配的内存。拷贝后的内容,不再相互影响.

---

一、如下图所示(图片非自己制作)

二、深拷贝方法的实现(三种方法)

1.通过递归的方式实现深拷贝(jquery中的extend)

代码如下（示例）：首先需要引入jquery

 // 3 用过jquery的extend方法
        // $.extend(deep,target,object,[objectN])
        // 参数一 为turn表示为深拷贝，false为浅拷贝
        // 参数二 目标对象 用来存放需要拷贝对象的属性
        // 参数三 参数四 要拷贝的对象 
        var student1 = {
            name:"张三",
            age:18,
            work:function(){
                console.log("学习"); } };
          //开始深拷贝
        var student2 = $.extend(true,{},student1)
        //修改拷贝后对象中的值
        student2.name="李四"
        student2.work=function(){
            console.log("上号");
        }
        console.log(student1,student2);

2.使用JSON.parse()和JSON.stringify()

代码如下（示例）：

  var student1 = {
            name:"张三",
            age:18,
            work:function(){
                console.log("学习");
            }
        }
        //定义拷贝的方法(其实就是把对象转化为json字符串,再转化为json对象格式)
	function deepClone(obj){
            var obj1= JSON.stringify(obj)
            var objClone = JSON.parse(obj1)
            return objClone
        }
      //调用深拷贝
        var student2 = deepClone(student1)
        student2.name="李四"
        student2.work=function(){
            console.log("上号");
        }
        student1.work()
        student2.work()
        console.log(student1,student2);

3.通过递归的方式实现深拷贝

 //对象B复制了对象A，如果B的属性改变了，A的属性也跟着改变了，这就是浅拷贝，如果B的属性改变了
        //A的属性没发生改变，这就是深拷贝  
        // 基本数据类型：number  string  boolean  null undefined 等
        // 引用数据类型：对象 除了基本数据类型都属于引用数据类型 常见的有 数组、对象、函数等
        // 1 通过递归实现深拷贝
        function deepClone(obj) {
            var objClone = Array.isArray(obj) ? [] : {};
            if (obj && typeof obj == "object") {
                for (key in obj) {
                    if (obj.hasOwnProperty(key)) {
                        if (obj[key] && typeof obj[key] == "object") {
                            objClone[key] = deepClone(obj[key]);
                        } else {
                            objClone[key] = obj[key]
                        }
                    }
                }
            }
            return objClone;
        }
        var arr1 =[1,2,3,4]
        var arr2 = deepClone(arr1)
        arr2[0]=5
        console.log(arr1,arr2);

---

标签：obj,student2,JavaScript,深浅,key,var,console,拷贝
来源： https://blog.csdn.net/weixin_46022934/article/details/121415082