js的深拷贝与浅拷贝

1. 关于javascript数据类型：

5种基本数据类型（null，undefined，string，number，Boolean）+ 1种对象数据类型（object, Array）

其中基本数据类型是按值传递，而对象类型（也叫做引用类型）是按引用传值

2. 按值传递

就比如下面的例子，我使num2 = num1，改变num2的值并不会影响到num1

数据类型是按值传递

2. 按引用传递

比如下面的例子，我把obj2赋给obj1，当我改变obj2的值得时候，obj1与obj2的值会同时改变

其实 obj2 = obj1，我们只是把obj1的引用地址赋给obj2，它们指向的是同一个实体。这种情况其实就是我们所说的浅拷贝

浅拷贝：实质就是拷贝引用地址。引用数据类型的值是保存在堆内存中，把一个复杂类型复制给另一个复杂类型，其本质是复制指针地址，因此拷贝出来的多个对象指向同一个实体，它们彼此之间的操作是会影响的。

注意：Object.assign 为浅拷贝

3. 深拷贝

对象的深拷贝：对象深拷贝实质就是建立一个空对象B，遍历A对象，在遍历的过程中将A的每一个属性赋给B

const source = {    /* 对象A */
	name: 'test',
	age: '11'
}
let target = {}    /* 对象B */
let deepCopy = (source) => {    /* 深拷贝 */
	for(let i in source) {                
	    if(typeof source[i] === 'object') {
	        target[i] = deepCopy(source[i])
	    } else {
	        target[i] = source[i]
	    }
	} 
	return target
}

我们在浏览器控制台里测一下：

改变target的值并不会影响到source的值

数组深拷贝：数据深拷贝我们可以利用es6以及数组的方法实现（slice, concat, [...]）

const source = [1, 2, 3, 4, 5]
let target1 = source.slice()
let target2 = source.concat()
let target3 = [...source]

把它敲在浏览器里看一下

我们可以看到，改变target的值，并不影响source

js的深拷贝与浅拷贝

猜你喜欢