对于基本类型的复制以及浅拷贝和深拷贝

浅复制是对对象地址的复制,并没 有开辟新的栈,也就是复制的结果是两个对象指向同一个地址,修改其中一个对象的属性,则另一个对象的属性也会改变

深复制则是开辟新的栈,两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性

简单来说,浅复制只复制一层对象的属性,而深复制则递归复制了所有层级。

一、对于第一级元素是基本类型变量(如number,String,boolean)的简单数组

1、直接遍历

var array = [1,2,3.4]
function copyFn(arr){
	let newArr = []
	for(let i of arr){
		newArr.push(i)
	}
	return newArr;
}

var copyArr = copyFn(array);
copyArr[0] = 500;
console.log(array);
console.log(copyArr)

2、slice 从某个已有的数组返回选定的元素[复制](返回一个新的数组)  slice(start,end)

var arr1= [1,2,3,4]
var arr2 = arr1.slice();
arr2[0]=500;
console.log(arr1);
console.log(arr2);
//[1, 2, 3, 4]
// [500, 2, 3, 4]  

3、数组拼接 concat

var arr1= [1,2,3,4]
var arr2 = arr1.concat();
arr2[0]=500;
console.log(arr1);
console.log(arr2);
//[1, 2, 3, 4]
//[500, 2, 3, 4]

二、对于第一级数组元素是对象或者数组引用类型变量的数组【浅拷贝实现】

实现浅拷贝(解决改变以防其他也改变的情况):

1、Object.assign()

语法:Object.assign(target,...sources)【ES6】

如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。

Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。

var obj = {
 name:'小红',
age:20
}
var copyObj = Object.assign({},obj)
copyObj.name='小明'
"小明"
copyObj.age = 24
24
console.log(obj)
console.log(copyObj)
//{name: "小红", age: 20}
//{name: "小明", age: 24}

2、扩展运算符(...)

数组拷贝,实际上展开语法和Object.assign()行为一致,执行的都是浅拷贝(之遍历一次)

var obj = {
 name:'小红',
age:20
}
var copyObj = {...obj}
copyObj.name='小明'
"小明"
copyObj.age = 24
24
console.log(obj)
console.log(copyObj)
// {name: "小红", age: 20}
// {name: "小明", age: 24}

思考:但是如果代码(多层嵌套)如下:

var obj = {
	name : '小红',
	hobby:{
		hobby1:'羽毛球',
		hobby2:'篮球'
	}
}
var copyObj = Object.assign({},obj)
copyObj.hobby.hobby1 = '游泳'
console.log(obj)
console.log(copyObj)
//{name: "小红", hobby: {…}}  |  hobby: {hobby1: "游泳", hobby2: "篮球"}name: "小红"
//{name: "小红", hobby: {…}}  |  hobby: {hobby1: "游泳", hobby2: "篮球"}name: "小红"  

不难发现,多曾嵌套的对象并没有成功,出现的现象时只要改其中一个另外一有个跟着改变,所以浅拷贝只能拷贝一层,要实现拷贝多层需要使用深拷贝

三、拷贝多层,每一级数据都会被拷贝【深拷贝】

1、JSON.parse(JSON.stringify(object))【常用】

var obj = {
  name:'Jay',
  song:{
    first:'蜗牛',
    second:'屋顶'
  }
}

var copyObj = JSON.parse(JSON.stringify(obj));
obj.song.first = '不能说的秘密';
console.log(obj.song.first);
console.log(copyObj.song.first);
// 不能说的秘密
//蜗牛

 

总结一下

 

参考:

知乎 :https://www.zhihu.com/question/23031215

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax

CSDN博客:https://blog.csdn.net/qq_39207948/article/details/81067482

posted @ 2019-02-19 14:42  KIU的博客  阅读(397)  评论(0编辑  收藏  举报