返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript最完整的深浅拷贝实现方式详解
  • 824
分享到

JavaScript最完整的深浅拷贝实现方式详解

2024-04-02 19:04:59 824人浏览 安东尼
摘要

目录基本类型拷贝数组拷贝 concat() slice()对象拷贝new Object()Object.assignJSON.parse(jsON.stringi

深浅拷贝:

内存中一共分为栈内存和堆内存两大区域,所谓深浅拷贝主要是对js引用类型数据进行拷贝一份,浅拷贝就是引用类型数据相互赋值之后,例obj1=obj2;如果后面的操作中修改obj1或者obj2,这个时候数据是会进行相应的变化的,因为在内存中引用类型数据是存储在堆内存中,堆内存中存放的是引用类型的值,同时会有一个指针地址指向栈内存,两个引用类型数据地址一样,如果其中一个发生变化另外一个都会有影响;而深拷贝则不会,深拷贝是会在堆内存中重新开辟一块空间进行存放;

简单来说就是B复制了A,如果A发生了改变,如果B随之变化,那么是浅拷贝,如果B并没有发生变化,则是深拷贝。

基本类型拷贝

let a = 1;
let b = a;
b = 2;
console.log(a);//1
console.log(b);//2

a,b都是属于基本类型,基本类型的复制是不会影响对方的,因为基本类型是每一次创建变量都会在栈内存中开辟一块内存,用来存放值,所以对基本类型进行拷贝是不会对另外一个变量有影响的,属于深拷贝。

数组拷贝 

concat() slice()

//  concat()
let list = ['a','b','c'];
let list2 = list.concat();
list2.push('d')
console.log(list);//['a','b','c']
console.log(list2);//['a','b','c','d']
//  slice()
let list = ['a','b','c'];
let list2 = list.slice();
list2.push('d')
console.log(list);//['a','b','c']
console.log(list2);//['a','b','c','d']

上面两种方法只能实现数组类型里面的单层深拷贝,如果是多层无法实现深拷贝。

//二维数组
let list = ['a','b','c',['d','e','f']];
let list2 = list.concat();
list2[3][0] = 'a';
console.log(list);
console.log(list2);

可以看到原二维数组的值也发生了变化,说明没有实现深拷贝。

由此总结,concat和slice只能实现一维数组的深拷贝,不能对多维数组进行深拷贝,所以并不是一个完美的深拷贝方式。

对象拷贝

new Object()

let a = {id:1,name:'a',obj:{id:999}};
let b = new Object();
b.id = a.id;
b.name = a.name;
b.obj = a.obj;
a.name = 'b';
a.obj.id = 888;
console.log(a);
console.log(b);

 

a.name更改并没有影响到b.name,好像可以看作深拷贝,但第二层obj里面里面的id随之更改了,因此其实并不是深拷贝。

Object.assign

let a = {id:1,name:'a',obj:{id:999}};
function fun(obj){
    let o = {};
    Object.assign(o,obj);
    return o;
}
let a2 = fun(a);
a2.name ='a2';
a2.obj.id = 888;
console.log(a);
console.log(a2);

以上两种方法,对于一层对象都能实现深拷贝,但对于多层对象则无法实现,因此也不是一种完美的深拷贝方式。

JSON.parse(JSON.stringify( ))

let a = {
    name : 'a',
    age : 20,
    obj : {id:999},
    action : function(){
        console.log(this.name);
    }
}
let b = JSON.parse(JSON.stringify(a));
a.name = 'b';
a.obj.id = 888;
console.log(a);
console.log(b);

单层对象name和多层对象obj.id的改变都没影响到原对象,因此是一个比较完美的深拷贝,但是能看到function好像并没有被拷贝。

可以看出这个方法对于一层和多层都能实现深拷贝,但是这个方法的缺陷是不能拷贝Function,所以在使用时,一定要注意数据类型。

递归

let a = {
    name:'a',
    skin:["red","blue","yellow",["123","456"]],
    child:{
        work:'none',
        obj:{
            id:999
        }
    },
    action:function(){
        console.log(this.name);
    }
}
//封装的递归方法
    function copyWid(obj){
        let newObj = Array.isArray(obj)?[]:{};
        for (var i in obj){
            if(typeof obj[i] === 'object'){  //判断是不是对象(数组或对象)
               newObj[i] = copyWid(obj[i])  //递归解决多层拷贝
            }else{
                newObj[i] = obj[i]   
            }
        }
        return newObj;
    };
    let b = copyWid(a);
    b.child.obj.id =888;
    b.skin[3][0] = "pink";
    console.log(a);
    console.log(b);

可以看到,无论是多层的对象还是多层的数组,都能实现深拷贝,而且能拷贝函数,这个是目前来说最完美的深拷贝方法。

通过这个递归能实现一个比较完美的深拷贝,能弥补上述提到的所有方法中的缺点。

展开运算符

let a = {name:'a',id:99};//如果是数组[xx,xx,xx],{...a}需要改成[...a]
let b ={...a};  //[...a]
a.id =88;
console.log(a);
console.log(b);

这个方法能实现对象数组单层时的深拷贝,但是多层无法实现深拷贝。

以上这么多方法,最优解应该属于JSON和递归的方法(递归解决了JSON无法拷贝函数方法的问题),但是根据需求数据类型的不同,可以选择更简单的方式。

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容! 

--结束END--

本文标题: JavaScript最完整的深浅拷贝实现方式详解

本文链接: https://lsjlt.com/news/140791.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript最完整的深浅拷贝实现方式详解
    目录基本类型拷贝数组拷贝 concat() slice()对象拷贝new Object()Object.assignJSON.parse(JSON.stringi...
    99+
    2024-04-02
  • JavaScript深拷贝与浅拷贝实现详解
    目录对于基本类型数据对于引用类型数据实现深拷贝简单版够用版structuredClone对于基本类型数据 可以说都是深拷贝。 对于引用类型数据 对于引用类型数据,浅拷贝 后,因为浅拷...
    99+
    2022-11-13
    JavaScript深拷贝与浅拷贝 JS深拷贝与浅拷贝
  • JS实现深拷贝和浅拷贝的方式详解
    目录一. 基本类型数据拷贝二. 引用类型数据拷贝1、浅拷贝2、深拷贝说道数据拷贝就离不开数据类型,在JS中数据类型分为基本类型和引用类型 基本类型: number, boolean,...
    99+
    2024-04-02
  • JavaScript中深拷贝与浅拷贝详解
    目录1 浅拷贝概念2 深拷贝概念3 浅拷贝的实现方式3.1 Object.assign()3.2 Array.prototype.concat()3.3 Array.pro...
    99+
    2024-04-02
  • JavaScript浅拷贝与深拷贝如何实现
    这篇文章主要介绍“JavaScript浅拷贝与深拷贝如何实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript浅拷贝与深拷贝如何实现”文章能帮助大家解决问题。在 JavaScript...
    99+
    2023-06-27
  • Javascript和jQuery的深浅拷贝详解
    目录JS的浅拷贝JS的深拷贝jQuery的深浅拷贝总结深浅拷贝在引用数据类型(数组对象)复制过程中产生的问题。 JS的浅拷贝 直接复制拷贝的是数组/对象的内存地址,本质上是一个引用数...
    99+
    2024-04-02
  • javascript中怎么区分浅拷贝和深拷贝并实现深拷贝
    这篇文章将为大家详细讲解有关javascript中怎么区分浅拷贝和深拷贝并实现深拷贝,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。什么是拷贝 一个东西的拷贝看起来像是原来...
    99+
    2024-04-02
  • JavaScript中的浅拷贝和深拷贝原理与实现浅析
    目录前言什么是浅拷贝实现浅拷贝什么是深拷贝实现深拷贝前言 JavaScript 中的浅拷贝和深拷贝指的是在复制对象(包括对象、数组等)时,是否只复制对象的引用地址或者在复制时创建一个...
    99+
    2023-05-17
    JavaScript深拷贝与浅拷贝 JS深拷贝与浅拷贝
  • Vue浅拷贝和深拷贝实现方案
    目录前言一、数据类型1.1.基本数据类型1.2.引用数据类型1.3.区别二、浅拷贝2.1.定义2.2.浅拷贝特点三、深拷贝3.1.定义3.2.深拷贝特点四、拷贝实现方案4.1.Obj...
    99+
    2023-03-03
    vue深拷贝 vue浅拷贝和深拷贝区别 vue浅拷贝和深拷贝
  • 超详细JavaScript深浅拷贝的实现教程
    目录一、浅拷贝1. Object.assign()2. 扩展运算符3. 数组浅拷贝4. 手写实现浅拷贝二、深拷贝1. JSON.stringify()2. 函数库lodash3. 手...
    99+
    2024-04-02
  • JavaScript中的深拷贝和浅拷贝的详细介绍
    这篇文章主要介绍“JavaScript中的深拷贝和浅拷贝的详细介绍”,在日常操作中,相信很多人在JavaScript中的深拷贝和浅拷贝的详细介绍问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,...
    99+
    2024-04-02
  • python浅拷贝与深拷贝使用方法详解
    目录一、对象赋值二、浅拷贝三、深拷贝四、深入解析浅拷贝和深拷贝在面试和日常的开发中都会经常遇到 我们就从 对象赋值、浅拷贝、深拷贝 三个方面来讲 一、对象赋值 In [1]: lis...
    99+
    2022-11-13
    python浅拷贝与深拷贝 python深拷贝 python浅拷贝
  • javascript深拷贝、浅拷贝和循环引用的详细讲解
    本篇内容主要讲解“javascript深拷贝、浅拷贝和循环引用的详细讲解”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“javascript深拷贝、浅拷贝和循环引...
    99+
    2024-04-02
  • Python 的赋值,浅拷贝和深拷贝详解
    目录先明确几点赋值浅拷贝深拷贝总结 先明确几点 不可变类型:该数据类型对象所指定内存中的值不可以被改变。 (1)、在改变某个对象的值时,由于其内存中的值不可以被改变,所以,会把原来...
    99+
    2024-04-02
  • 如何理解JavaScript中的浅拷贝与深拷贝
    本篇文章给大家分享的是有关如何理解JavaScript中的浅拷贝与深拷贝,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。 浅拷贝在使用JavaScript对数组进行操作...
    99+
    2023-06-16
  • javascript深拷贝实现的方式有哪些
    本篇内容主要讲解“javascript深拷贝实现的方式有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“javascript深拷贝实现的方式有哪些”吧!概念介绍深拷贝:在堆内存中重新开辟一个存...
    99+
    2023-07-02
  • Java的深拷贝和浅拷贝怎么实现
    这篇文章主要介绍“Java的深拷贝和浅拷贝怎么实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Java的深拷贝和浅拷贝怎么实现”文章能帮助大家解决问题。关于Java的深拷贝和浅拷贝,简单来说就是创...
    99+
    2023-06-26
  • Java Cloneable接口的深拷贝与浅拷贝详解
    目录Cloneable接口源码浅拷贝案例Pet类定义Person类定义浅拷贝问题-代码测试深拷贝案例Pet类重写clone()方法Person的clone()方法中调用Pet的clo...
    99+
    2024-04-02
  • Java Cloneable接口的深拷贝与浅拷贝详解
    Java中的Cloneable接口是一个标记接口,用于标识一个类可以被克隆。该接口没有定义任何方法,但是在使用clone()方法进行...
    99+
    2023-08-17
    Java
  • 怎么解决JavaScript的深浅拷贝
    这篇文章主要讲解了“怎么解决JavaScript的深浅拷贝”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么解决JavaScript的深浅拷贝”吧!正文从一则故事讲起,昨天因为医院开不出药,...
    99+
    2023-06-27
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作