- 浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以其中一个对象改变了这个地址，就会影响到另一个对象。
- 深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。
创建一个对象栗子
var obj = {
heroName: '百里守约',
heroSkills:['瞄准', ['静谧之眼', '狂风之息', '逃脱']]
}
复制
var copyObj = obj
copyObj.heroName = '百里玄策'
copyObj.heroSkills[0] = '狂热序章'
console.log(obj) console.log(copyObj )
copyObj打印是
image.png
浅拷贝
function shallowCopy(obj){
let target = {}
for (const i in obj) {
if (obj.hasOwnProperty.call(obj, i)) {
target[i] = obj[i];
}
}
return target
}
var copyObj = shallowCopy(obj)
copyObj.heroName = '百里玄策'
copyObj.heroSkills[0] = '狂热序章'
console.log('obj', obj) //打印是
console.log('copyObj', copyObj )
shallowCopy打印
image.png
深拷贝
function deepCopy(obj){
let deepCloneObj = {}
if(typeof obj !== 'object') return obj
for (const i in obj) {
if (obj.hasOwnProperty(i)) {
deepCloneObj[i] = deepCopy(obj[i]);
}
}
return deepCloneObj
}
var copyObj = deepCopy(obj)
copyObj.heroName = '百里玄策'
copyObj.heroSkills[0] = '狂热序章'
console.log('obj', obj) //打印是
console.log('copyObj', copyObj )
deepCopy打印
image.png
深拷贝 更多类型判断
var obj = {
heroName: '百里守约',
heroSkills:['瞄准', ['静谧之眼', '狂风之息', '逃脱']],
date: new Date(),
reg: '\p+\/'
}
function deepCopy(obj){
let deepCloneObj = {}
if(typeof obj !== 'object') return obj
if(obj === null) return obj
if(obj instanceof Date) return new Date()
if(obj instanceof RegExp) return new RegExp()
for (const i in obj) {
if (obj.hasOwnProperty(i)) {
deepCloneObj[i] = deepCopy(obj[i]);
}
}
return deepCloneObj
}
var copyObj = deepCopy(obj)
copyObj.heroName = '百里玄策'
copyObj.heroSkills[0] = '狂热序章'
console.log('obj', obj) //打印是
console.log('copyObj', copyObj )
image.png
浅拷贝有哪些
1.函数库lodash的_.clone方法
const _clone = require('lodash.clone')
2.Object.assign()
const original = {
name: 'Fiesta',
car: {
color: 'blue',
},
}
const copied = Object.assign({}, original)
original.name = 'Focus'
original.car.color = 'yellow'
copied.name //Fiesta
copied.car.color //yellow
3.展开运算符...
该价差运营商是一个ES6 / ES2015的特性，能够进行浅克隆，相当于什么非常方便地Object.assign()做。
const copied = { ...original }
4.Array.prototype.concat()
5.Array.prototype.slice()
深拷贝有哪些
1.JSON.parse(JSON.stringify())
let obj = {
a: new Date(),
b: NaN,
c: new Function(),
d: undefined,
e: function () {
return 1
},
f: Number,
g: false,
h: Infinity,
}
console.log(JSON.parse(JSON.stringify(obj))) //{a: "2020-12-02T03:06:19.959Z", b: null, g: false, h: null}
打印（弊端 ）仅当您没有任何内部对象和函数，而只有值时，这才起作用。
image.png
2.函数库lodash的_.cloneDeep方法
const clonedeep = require('lodash.clonedeep')
