广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JS实现深拷贝和浅拷贝的方式详解
  • 415
分享到

JS实现深拷贝和浅拷贝的方式详解

2024-04-02 19:04:59 415人浏览 泡泡鱼
摘要

目录一. 基本类型数据拷贝二. 引用类型数据拷贝1、浅拷贝2、深拷贝说道数据拷贝就离不开数据类型,在js中数据类型分为基本类型和引用类型 基本类型: number, boolean,

说道数据拷贝就离不开数据类型,在js中数据类型分为基本类型和引用类型 基本类型:

number, boolean,string,symbol,bigint,undefined,null

引用类型:

object 以及一些标准内置对象 Array、RegExp、String、Map、Set..

一. 基本类型数据拷贝

基本类型数据都是值类型,存储在栈内存中,每次赋值都是一次复制的过程

	var a = 12;
	var b = a;

二. 引用类型数据拷贝

1、浅拷贝

只拷贝对象的一层数据,再深处层次的引用类型value将只会拷贝引用 实现方式:

1.Object.assign() 和 es6的拓展运算符

通常我们用 Object.assign() 方法来实现浅拷贝。 Object.assign()用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

	let aa = {
		a: undefined, 
		func: function(){console.log(1)}, 
		b:2, 
		c: {x: 'xxx', xx: undefined},
		d: null,
		e: BigInt(100),
		f: Symbol('s')
	}
	let bb = Object.assign({}, aa) //  或者 let bb = {...aa}
	aa.c.x = 111
	console.log(bb)
	// 第一层拷贝,遇到引用类型的值就会只拷贝引用
	// {
	//     a: undefined,
	//     func: [Function: func],
	//     b: 2,
	//     c: { x: 111, xx: undefined },
	//     d: null,
	//     e: 100n,
	//     f: Symbol(s)
	// }

2.Object.create

Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。Object.create(proto,[propertiesObject])接收两个参数一个是新创建对象的__proto__, 一个属性列表

	let aa = {
		a: undefined, 
		func: function(){console.log(1)}, 
		b:2, 
		c: {x: 'xxx', xx: undefined},
	}
	let bb = Object.create(aa, Object.getOwnPropertyDescriptors(aa))
	aa.c.x = 111
	console.log(bb)
	// 第一层拷贝,遇到引用类型的值就会只拷贝引用
	// {
	//     a: undefined,
	//     func: [Function: func],
	//     b: 2,
	//     c: { x: 111, xx: undefined },
	// }

2、深拷贝

在拷贝一个对象的时候为了避免修改对数据造成的影响,必须使用深拷贝。

实现方式:

1、 通过JSON.stringify()

	var a = {a:1, b: 2}
    var b = JSON.stringify(a);
    a.a = 'a'
    console.log(a, b) // { a: 'a', b: 2 } {"a":1,"b":2}

JSON.stringify()进行深拷贝有弊端: 忽略value为function, undefind, symbol, 并且在序列化BigInt时会抛出语法错误:TypeError: Do not know how to serialize a BigInt

// 序列化function, undefind, symbol,忽略--------------------------------------------------------
	var obj = {
		a:function(){}, 
		b: undefined, 
		c: null, 
		d: Symbol('s'), 
	}
    var objCopyed = JSON.stringify(obj);
    
    console.log("a:", a) 
    // obj: { a: [Function: a], b: undefined, c: null, d: Symbol(s) }
    console.log("objCopyed:", objCopyed) 
    // objCopyed: {"c":null}
// 序列化bigint抛出错误--------------------------------------------------------
    var obj = {
    	a: 1,
    	e: BigInt(9007199254740991)
    }
    var objCopyed = JSON.stringify(obj); // TypeError: Do not know how to serialize a BigInt

2、递归实现

const deepCopy = (obj) => {
	// 优化 把值类型复制方放到这里可以少一次deepCopy调用
	// if(!obj || typeof obj !== 'object') throw new Error("请传入非空对象")
    if(!obj || typeof obj !== 'object') return obj
    let result = {}
    if (Object.prototype.toString.call(obj).indexOf('Array') > 0) {
        result = []
    }
    // 另一种循环方式
    // for (let key in obj) {
    //     if (obj.hasOwnProperty(key)) {
    //        result[key] = deepClone(obj[key]) 
    //     }
    // }
    Object.keys(obj).forEach(key => {
    	// 优化 把值类型复制方放到这里可以少一次deepCopy调用
    	// if (obj[key] && typeof obj[key] === 'object') {
        //     result[key] = deepCopy(obj[key])
        // }else{
        //     result[key] = obj[key]
        // }
        result[key] = deepCopy(obj[key])
    });
    return result
}

let aa = {
	a: undefined, 
	func: function(){console.log(1)}, 
	b:2, 
	c: {x: 'xxx', xx: undefined},
	d: null,
	e: BigInt(100),
	f: Symbol('s')
}
let bb = deepCopy(aa)
aa.c.x = 123
aa.func = {}
console.log("aa", aa)
console.log("bb", bb)
// aa {
//     a: undefined,
//     func: {},
//     b: 2,
//     c: { x: 123, xx: undefined },
//     d: null,
//     e: 100n,
//     f: Symbol(s)
//  }

// bb {
//     a: undefined,
//     func: [Function: func],
//     b: 2,
//     c: { x: 'xxx', xx: undefined },
//     d: null,
//     e: 100n,
//     f: Symbol(s)
// }

手写深拷贝等这些工具方法,在实际生产中99.99%不会用到,毕竟有lodash、underscore这些方便的工具库呢

到此这篇关于JS实现深拷贝和浅拷贝的方式详解的文章就介绍到这了,更多相关JS深拷贝 浅拷贝内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JS实现深拷贝和浅拷贝的方式详解

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

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

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JS实现深拷贝和浅拷贝的方式详解
    目录一. 基本类型数据拷贝二. 引用类型数据拷贝1、浅拷贝2、深拷贝说道数据拷贝就离不开数据类型,在JS中数据类型分为基本类型和引用类型 基本类型: number, boolean,...
    99+
    2022-11-13
  • JS怎么实现深拷贝和浅拷贝
    这篇文章主要介绍“JS怎么实现深拷贝和浅拷贝”,在日常操作中,相信很多人在JS怎么实现深拷贝和浅拷贝问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JS怎么实现深拷贝和浅拷贝”的疑惑有所帮助!接下来,请跟着小编...
    99+
    2023-06-30
  • js深拷贝和浅拷贝的深入讲解
    目录浅拷贝实现方法方法一:Object.assign方法二:扩展运算符方式方法三:concat和slice 浅拷贝数组深拷贝实现方法方法一:乞丐版(JSON.stringify和JS...
    99+
    2022-11-13
  • 详解JS变量存储深拷贝和浅拷贝
    目录变量类型与存储空间栈内存和堆内存基本数据类型引用类型图解存储空间引用类型的赋值深拷贝和浅拷贝深拷贝浅拷贝对象的赋值三者对比浅拷贝的常用的五种方法Object.assign()扩展...
    99+
    2022-11-12
  • JavaScript深拷贝与浅拷贝实现详解
    目录对于基本类型数据对于引用类型数据实现深拷贝简单版够用版structuredClone对于基本类型数据 可以说都是深拷贝。 对于引用类型数据 对于引用类型数据,浅拷贝 后,因为浅拷...
    99+
    2022-11-13
    JavaScript深拷贝与浅拷贝 JS深拷贝与浅拷贝
  • Java中浅拷贝和深拷贝详解
    目录Java浅拷贝深拷贝实现浅拷贝实现深拷贝Java浅拷贝深拷贝 浅拷贝和深拷贝涉及到了Object类中的clone()方法 实现浅拷贝 浅拷贝的实现需要类重写clone()方法 ...
    99+
    2022-11-12
  • js中的赋值 浅拷贝和深拷贝详细
    目录1、js内存2、赋值3、浅拷贝4、深拷贝前言: 在学习下面文章前我们简单了解一下的内存的知识,以下先简要提一下 1、js内存 js内存,或者说大部分语言的内存都分为栈和堆。基本数...
    99+
    2022-11-12
  • 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浅拷贝和深拷贝
  • Golang切片和数组拷贝详解(浅拷贝和深拷贝)
    目录golang切片和数组拷贝基础什么是浅拷贝和深拷贝?golang数组和切片的区别Golang中的值传递和引用传递golang数组拷贝数组和切片拷贝总结golang切片和数组拷贝 ...
    99+
    2023-05-17
    Golang切片和数组拷贝 golang切片拷贝 golang数组拷贝
  • Python 的赋值,浅拷贝和深拷贝详解
    目录先明确几点赋值浅拷贝深拷贝总结 先明确几点 不可变类型:该数据类型对象所指定内存中的值不可以被改变。 (1)、在改变某个对象的值时,由于其内存中的值不可以被改变,所以,会把原来...
    99+
    2022-11-12
  • Vue浅拷贝和深拷贝如何实现
    今天小编给大家分享一下Vue浅拷贝和深拷贝如何实现的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。一、数据类型1.1.基本数据...
    99+
    2023-07-05
  • Java的深拷贝和浅拷贝深入了解
    关于Java的深拷贝和浅拷贝,简单来说就是创建一个和已知对象一模一样的对象。可能日常编码过程中用的不多,但是这是一个面试经常会问的问题,而且了解深拷贝和浅拷贝的原理,对于Java中的...
    99+
    2022-11-13
  • python浅拷贝与深拷贝使用方法详解
    目录一、对象赋值二、浅拷贝三、深拷贝四、深入解析浅拷贝和深拷贝在面试和日常的开发中都会经常遇到 我们就从 对象赋值、浅拷贝、深拷贝 三个方面来讲 一、对象赋值 In [1]: lis...
    99+
    2022-11-13
    python浅拷贝与深拷贝 python深拷贝 python浅拷贝
  • javascript中怎么区分浅拷贝和深拷贝并实现深拷贝
    这篇文章将为大家详细讲解有关javascript中怎么区分浅拷贝和深拷贝并实现深拷贝,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。什么是拷贝 一个东西的拷贝看起来像是原来...
    99+
    2022-10-19
  • Java的深拷贝和浅拷贝怎么实现
    这篇文章主要介绍“Java的深拷贝和浅拷贝怎么实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Java的深拷贝和浅拷贝怎么实现”文章能帮助大家解决问题。关于Java的深拷贝和浅拷贝,简单来说就是创...
    99+
    2023-06-26
  • Java中深拷贝,浅拷贝与引用拷贝的区别详解
    目录引用拷贝浅拷贝深拷贝小结引用拷贝 引用拷贝: 引用拷贝不会在堆上创建一个新的对象,只 会在栈上生成一个新的引用地址,最终指向依然是堆上的同一个对象。 //实体类 public c...
    99+
    2022-11-13
  • C++深浅拷贝和写时拷贝图文详解
    前言 之前我们在浅谈6个成员函数中有提到深浅拷贝的问题,现在再回首掏一把。 一、深浅拷贝哪家强? 先给出代码理一理 #define _CRT_SECURE_NO_WARNINGS...
    99+
    2022-11-12
  • 深入理解python中的浅拷贝和深拷贝
    在讲什么是深浅拷贝之前,我们先来看这样一个现象: a = ['scolia', 123, [], ] b = a[:] b[2].append(666) print a print b 为什么我只对...
    99+
    2022-06-04
    和深 python
  • js中深拷贝和浅拷贝的区别有哪些
    这篇文章主要介绍js中深拷贝和浅拷贝的区别有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!javascript是一种什么语言javascript是一种动态类型、弱类型的语言,基于对象和事件驱动并具有相对安全性并广...
    99+
    2023-06-14
  • Java Cloneable接口的深拷贝与浅拷贝详解
    目录Cloneable接口源码浅拷贝案例Pet类定义Person类定义浅拷贝问题-代码测试深拷贝案例Pet类重写clone()方法Person的clone()方法中调用Pet的clo...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作