首页 > 编程语言> 文章详细

JavaScript深浅拷贝(三种方法)

2021-11-20 12:04:30 阅读：182 来源： 互联网

标签：obj student2 JavaScript 深浅 key var console 拷贝

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

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

文章目录

深浅拷贝实现方法(三种)
前言
一、如下图所示(图片非自己制作)
二、深拷贝方法的实现(三种方法)

前言

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

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

引用数据赋值，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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9