快捷導(dǎo)航

JS實(shí)現(xiàn)深拷貝和淺拷貝的方式詳解

更新時(shí)間：2022年05月11日 08:29:57 作者：東風(fēng)吹

深拷貝和淺拷貝是面試中經(jīng)常出現(xiàn)的,主要考察對(duì)基本類型和引用類型的理解深度,本文主要給大家介紹了js實(shí)現(xiàn)深拷貝和淺拷貝的方式,需要的朋友可以參考下

一. 基本類型數(shù)據(jù)拷貝

基本類型數(shù)據(jù)都是值類型，存儲(chǔ)在棧內(nèi)存中，每次賦值都是一次復(fù)制的過程

	var a = 12;
	var b = a;

二. 引用類型數(shù)據(jù)拷貝

1、淺拷貝

只拷貝對(duì)象的一層數(shù)據(jù)，再深處層次的引用類型value將只會(huì)拷貝引用實(shí)現(xiàn)方式：

1.Object.assign() 和 ES6的拓展運(yùn)算符

通常我們用 Object.assign() 方法來實(shí)現(xiàn)淺拷貝。 Object.assign()用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象分配到目標(biāo)對(duì)象。它將返回目標(biāo)對(duì)象。

	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)
	// 第一層拷貝，遇到引用類型的值就會(huì)只拷貝引用
	// {
	//     a: undefined,
	//     func: [Function: func],
	//     b: 2,
	//     c: { x: 111, xx: undefined },
	//     d: null,
	//     e: 100n,
	//     f: Symbol(s)
	// }

2.Object.create

Object.create()方法創(chuàng)建一個(gè)新對(duì)象，使用現(xiàn)有的對(duì)象來提供新創(chuàng)建的對(duì)象的__proto__。Object.create(proto，[propertiesObject])接收兩個(gè)參數(shù)一個(gè)是新創(chuàng)建對(duì)象的__proto__，一個(gè)屬性列表

	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)
	// 第一層拷貝，遇到引用類型的值就會(huì)只拷貝引用
	// {
	//     a: undefined,
	//     func: [Function: func],
	//     b: 2,
	//     c: { x: 111, xx: undefined },
	// }

2、深拷貝

在拷貝一個(gè)對(duì)象的時(shí)候?yàn)榱吮苊庑薷膶?duì)數(shù)據(jù)造成的影響，必須使用深拷貝。

實(shí)現(xiàn)方式：

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()進(jìn)行深拷貝有弊端：忽略value為function, undefind, symbol, 并且在序列化BigInt時(shí)會(huì)拋出語法錯(cuò)誤：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拋出錯(cuò)誤--------------------------------------------------------
    var obj = {
    	a: 1,
    	e: BigInt(9007199254740991)
    }
    var objCopyed = JSON.stringify(obj); // TypeError: Do not know how to serialize a BigInt

2、遞歸實(shí)現(xiàn)

const deepCopy = (obj) => {
	// 優(yōu)化 把值類型復(fù)制方放到這里可以少一次deepCopy調(diào)用
	// if(!obj || typeof obj !== 'object') throw new Error("請(qǐng)傳入非空對(duì)象")
    if(!obj || typeof obj !== 'object') return obj
    let result = {}
    if (Object.prototype.toString.call(obj).indexOf('Array') > 0) {
        result = []
    }
    // 另一種循環(huán)方式
    // for (let key in obj) {
    //     if (obj.hasOwnProperty(key)) {
    //        result[key] = deepClone(obj[key]) 
    //     }
    // }
    Object.keys(obj).forEach(key => {
    	// 優(yōu)化 把值類型復(fù)制方放到這里可以少一次deepCopy調(diào)用
    	// 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)
// }

手寫深拷貝等這些工具方法，在實(shí)際生產(chǎn)中99.99%不會(huì)用到，畢竟有l(wèi)odash、underscore這些方便的工具庫呢

到此這篇關(guān)于JS實(shí)現(xiàn)深拷貝和淺拷貝的方式詳解的文章就介紹到這了,更多相關(guān)JS深拷貝淺拷貝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: