一、前置知识
基本数据类型和引用数据类型的存储方式
二、概念
浅拷贝:只能拷贝最外面一层的数据,基本类型的数据直接拷贝值;引用数据类型只拷贝数据的引用(地址),拷贝的引用类型数据与源数据指向同一个堆内存空间,当拷贝的引用类型数据或者源数据其中一方修改时,双方会被同时修改。
深拷贝:拷贝多层数据;每一层的基本数据类型和引用数据类型的数据都会复制一份,其中复制引用数据类型的数据是具有新的内存空间,拷贝的所有数据与源数据互不影响。
三、浅拷贝
1.推荐使用es6的 Object.assgin() 实现浅拷贝
mdn地址:
Object.assign() - JavaScript | MDN
2.自己封装浅拷贝函数
<script>
// -----------------------利用for in 实现对象的浅拷贝----------------------
// 1.拷贝的数据源
const obj = {
name: "hsq",
age: 18,
color: ["red", "blue", "green"],
children: {
name: 'xxx',
age: 1
},
say: function () {
console.log(this);
}
}
//2.调用浅拷贝函数将数据源obj进行浅拷贝并返回拷贝好的对象,使用testObj常量接收
const testObj = simpleObjClone({}, obj)
//3.修改数据源对象中的引用类型属性color数组的第一项
obj.color[0] = 'hhh'
//4.打印通过浅拷贝成功的对象的引用类型属性color数组的第一项,发现浅拷贝的数据发生更改
console.log(testObj.color[0]);//hhh
//浅拷贝函数
function simpleObjClone(resultObj, Obj) {
//两个参数必须存在而且要求参数的类型相同,类型同为数组或者对象
const verify1 = resultObj && isArray(resultObj) && Obj && isArray(Obj)
const verify2 = resultObj && isObject(resultObj) && Obj && isObject(Obj)
if (verify1 || verify2) {
// 利用for in循环对象或者数组的每一项并复制给resultObj参数
for (const key in Obj) {
resultObj[key] = Obj[key]
}
// 循环复制完毕后返回复制完毕的对象或者数组
return resultObj
}
else {
throw new Error("两个参数必须存在而且要求参数的类型相同,类型同为数组或者对象")
}
}
//判断是否是数组
function isArray(obj) {
return Object.prototype.toString.call(obj) == '[object Array]';
}
//判断是否是对象
function isObject(obj) {
return Object.prototype.toString.call(obj) == '[object Object]';
}
</script>
四、深拷贝
封装深拷贝函数
<script>
// -----------------------利用递归和for in 实现对象的深拷贝----------------------
// 1.拷贝的数据源对象
const obj = {
name: "hsq",
age: 18,
color: ["red", 1, false, undefined, null],
children: {
name: 'xxx',
age: 12
},
say: function () {
console.log('enenen');
}
}
//2.调用深拷贝函数将数据源obj进行深拷贝并返回拷贝好的对象,使用testObj常量接收
const testObj = deepObjClone({}, obj)
//3.修改数据源对象中的引用类型属性color数组的第一项
obj.color[0] = "hhh"
//4.打印通过深拷贝成功的对象的引用类型属性color数组的第一项,发现深拷贝的数据发生没有更改
console.log(testObj.color[0]);//red
//深拷贝函数
function deepObjClone(resultObj, Obj) {
//两个参数必须存在而且要求参数的类型相同,类型同为数组或者对象
const verify1 = resultObj && isArray(resultObj) && Obj && isArray(Obj)//参数校验1
const verify2 = resultObj && isObject(resultObj) && Obj && isObject(Obj)//参数校验2
if (verify1 || verify2) {
//使用for in递归循环进行深拷贝
for (const key in Obj) {
//ObjTtem存储遍历数组或者对象的每一项属性值
let ObjTtem = Obj[key]
//遍历的属性值为数组
if (ObjTtem instanceof Array) {
//为拷贝对象添加属性,属性值为数组,数组内容由递归填充
resultObj[key] = deepObjClone([], ObjTtem)
}
//遍历的属性值为函数对象
else if (ObjTtem instanceof Function) {
resultObj[key] = cloneFunction(ObjTtem)
}
//遍历的属性值为普通对象
else if (ObjTtem instanceof Object) {
//为拷贝对象添加属性,属性值为对象,对象内容由递归填充
resultObj[key] = deepObjClone({}, ObjTtem)
}
//遍历的属性值为普通数据类型时直接赋值给拷贝对象的属性
else {
resultObj[key] = ObjTtem
}
}
return resultObj
}
else {
throw new Error("两个参数必须存在而且要求参数的类型相同,类型同为数组或者对象")
}
}
//判断是否是数组
function isArray(obj) {
return Object.prototype.toString.call(obj) === '[object Array]';
}
//判断是否是对象
function isObject(obj) {
return Object.prototype.toString.call(obj) === '[object Object]';
}
//深拷贝函数
function cloneFunction(fn) {
//参数验证
if (!(fn && fn instanceof Function)) {
throw new Error("参数为必须并且参数类型为函数")
}
// 将函数转成字符串
let str = fn.toString()
//截取函数体内容字符串
let subStr = str.substring(str.indexOf("{") + 1, str.lastIndexOf("}"))
// 利用截取函数体内容的字符串和函数的构造器生成新的函数并返回
return new Function(subStr)
}
</script>