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

 更新时间:2022年05月11日 08:29:57   作者:东风吹  
深拷贝和浅拷贝是面试中经常出现的,主要考察对基本类型和引用类型的理解深度,本文主要给大家介绍了js实现深拷贝和浅拷贝的方式,需要的朋友可以参考下

说道数据拷贝就离不开数据类型,在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深拷贝 浅拷贝内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器

    js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器

    这篇文章主要介绍了js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器,通过自定义javascript函数audioplayer实现兼容各常见浏览器的音乐播放功能,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • 基于javascript实现日历功能原理及代码实例

    基于javascript实现日历功能原理及代码实例

    这篇文章主要介绍了基于javascript实现日历效果原理及代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • JS显示下拉列表框内全部元素的方法

    JS显示下拉列表框内全部元素的方法

    这篇文章主要介绍了JS显示下拉列表框内全部元素的方法,涉及javascript遍历下拉列表元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • JavaScript双等号(==)与三等号(===)的区别举例详解

    JavaScript双等号(==)与三等号(===)的区别举例详解

    在JavaScript中判断值相等有两种操作符,即双等号(==)和三等号(===),这篇文章主要给大家介绍了关于JavaScript双等号(==)与三等号(===)区别的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-07-07
  • JavaScript处理中文字符串的Base64编码与解码的两种方法

    JavaScript处理中文字符串的Base64编码与解码的两种方法

    这篇文章主要介绍了在 JavaScript 中处理中文字符串的 Base64 编码与解码,解释了 Base64 编码与中文字符冲突的原因,分别阐述了手动实现和使用TextEncoder和TextDecoder API 两种方法,包括编码和解码的具体实现及示例,最后总结了两种方法的适用场景
    2025-01-01
  • gulp教程_从入门到项目中快速上手使用方法

    gulp教程_从入门到项目中快速上手使用方法

    下面小编就为大家带来一篇gulp教程_从入门到项目中快速上手使用方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • js制作简易计算器

    js制作简易计算器

    这篇文章主要为大家详细介绍了js制作简易计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • JS中sort函数排序用法实例分析

    JS中sort函数排序用法实例分析

    这篇文章主要介绍了JS中sort函数排序用法,结合实例形式详细分析了sort函数的功能、原理及实现数组排序的相关技巧,代码中备有详尽的注释便于理解,需要的朋友可以参考下
    2016-06-06
  • javascript一些不错的函数脚本代码

    javascript一些不错的函数脚本代码

    收集一些不多见的好用的自定义函数代码 计算字符长度的js函数 去字符中前后的空格的js函数 图片自适应大小函数代码
    2008-09-09
  • javascript 原型与原型链的理解及应用实例分析

    javascript 原型与原型链的理解及应用实例分析

    这篇文章主要介绍了javascript 原型与原型链的理解及应用,结合实例形式分析了javascript原型与原型链的具体原理、功能、使用方法及操作注意事项,需要的朋友可以参考下
    2020-02-02

最新评论