[面试常考]JS的深拷贝和浅拷贝

1.拷贝的理解
拷贝,即copy,拷贝数据的意思。
2.拷贝数据的方式:
(1)直接赋值给一个变量
(2)Object.assign()
(3)Array.prototype.slice()
(4)Array.prototype.concat()
(5)JSON.parse(JSON.stringify())

3.拷贝数据应用
(1)基本数据类型
拷贝后会生成一份新的数据,修改拷贝后的数据不会影响原来的数据。这种拷贝方式也称为深拷贝。

let name1 = 'zyy'
let name2 = name1
name2 = 'qjw'
console.log(name1) // 'zyy'
let bool1 = true
let bool2 = bool1 
bool2 = false
console.log(bool1 ) // true

JSON.parse(JSON.stringify())是一种深拷贝方式。但需要注意拷贝的数据里面不能有函数,因为JSON.stringify(),JSON.parse()处理不了函数。

let obj = {name:'zyy',age:24}
let obj1 = JSON.parse(JSON.stringify(obj)) //JSON.stringify(obj)是一个字符串,相当于基本数据类型的拷贝
obj1.name = 'jqw'
console.log(obj) // {name:'zyy',age:24}

(2)引用数据类型(对象、数组)
拷贝的只是引用,修改拷贝后的数据会影响原来的数据,使得数据不安全。这种拷贝方式也称为浅拷贝。

对对象、数组这种引用类型数值的拷贝是浅拷贝。

let obj = {
	name: 'zyy',
	age:24
}
let obj1 = obj
obj1.age = 18
console.log(obj) // {name:'zyy',age:18}
let arr = [1,2,5]
let arr1 = arr
arr1[3] = 0
console.log(arr) // [1,2,5,0]
let arr = [1,2,{name:'zyy'}]
let arr1 = arr

arr1[0] = 0
console.log(arr) // [1,2,{name:'zyy'}]

arr1[2].name = 'qjw'
console.log(arr) //[1,2,{name:'qjw'}]

Object.assign()是浅拷贝方式。

let obj = {name:'qjw'}
let obj1 = Object.assign(obj)
obj1.age = 24
console.log(obj) // {name:'jqw',age:24}

Array.prototype.concat()是浅拷贝方式。

let arr =  [1,2,4]
let arr1 = arr.concat()
arr[2] = 3
console.log(arr) // [1,2,3]

Array.prototype.slice()是浅拷贝方式。

let arr =  [1,2,4]
let arr1 = arr.slice()
arr[2] = 3
console.log(arr) // [1,2,3]

4.深拷贝与浅拷贝
(1)深拷贝(深度克隆)
特点:拷贝的时候会生成一份新的数据,修改拷贝以后的数据不会原数据。
(2)浅拷贝(对象,数组)
特点:拷贝的时候只是拷贝了一份引用,修改拷贝以后的数据会影响原来的数据。
5.如何实现深拷贝(深度克隆)?[重点!重点!重点!]

//实现深度拷贝
function deepCopy(obj) {
	if (obj instanceof Object) { //当拷贝的是对象时
		let tmp =  {}
		for(let key in obj) {
			tmp[i] = deepCopy(key)
		}
		return tmp
	} else if (obj instanceof Array) { //当拷贝的是数组时
		let tmp = []
		for (let i = 0;i  obj.length;i++) {
 			tmp.push(deepCopy(obj[i]))
 		}
 		return tmp
	} else if (obj instanceof Function) { //当拷贝的是函数时
		return new Function('return '+ obj.toString())
	} else {
		return obj   //当拷贝的是基本数据类型时
	}
}

喜欢的话,点个赞鸭,ღ( ´・ᴗ・` )比心

最新回复(0)
/jishuwzCfisAdpn2Bj7Ehrrm65hAJU27aVv3gO8b9rlGiIJw_3D4656636
8 简首页