js克隆

简介: 1. js 克隆分为简单克隆、深度克隆 2. 简单克隆: 原始类型为 为传递值,对象类型仍为引用传递。修改新的copy出来的对象,原始对象的数据会发生变化,反之,一样 3. 深度克隆: 所有的元素或属性完全复制,与原始对象完全脱离。

1. js 克隆分为简单克隆、深度克隆

 

2. 简单克隆: 原始类型为 为传递值,对象类型仍为引用传递。修改新的copy出来的对象,原始对象的数据会发生变化,反之,一样

 

3. 深度克隆: 所有的元素或属性完全复制,与原始对象完全脱离。===>新的对象无论做任何修改都不会影响原始对象,反之,一样

 

 

备注:函数的克隆会在内存中单独开辟一个新的空间,新旧函数之间互不影响。

 

 

实例:

简单克隆:我认为直接是使用 '= '进行赋值

 

 

深度克隆: Array.prototype.deepClone = function (oldArr) {

let newArr = [];

oldArr.map((item,index)=>{

newArr.push(item)

})

 

return newArr;

}

let oldArr = [1,2,3,4,5,6];

let newArr0 = new Array().deepClone(oldArr);

let newArr1 = oldArr;

console.log('原始数据',oldArr,'深度拷贝数据',newArr0,'一般复制',newArr1)

/****************这里如果能使用map的话,返回的是一个新的数组****************/

/*

for(let b =0 ;b <oldArr.length-1;b++){

oldArr[b] = oldArr[b] + 1;

}

*/

for(let i = 0;i<newArr1.length; i++){

newArr1[i] = newArr1[i] + 1;

}

 

console.log('原始数据发生改变',oldArr,'深度拷贝的对象',newArr0,'一般复制',newArr1)

 

console.log('\t**************************************************************\t')

 

Object.prototype.deepClone1 = function () {

let oldJson = this;

let newJson = {}

for(let key in oldJson){

newJson[key] = oldJson[key];

}

return newJson;

}

Object.prototype.deepClone2 = function (oldJson) {

 

let newJson = {}

for(let key in oldJson){

newJson[key] = oldJson[key];

}

return newJson;

}

 

 

let oldJson = {a:1,b:2,c:3};

let newJson0 = oldJson.deepClone1();

let newJson2 = Object.deepClone2(oldJson);

let newJson1 = oldJson;

 

oldJson.a='234325';

newJson1.c='哈哈';

console.log("原始的json是",oldJson,'深度拷贝的json是',newJson0,'一般复制是',newJson1,'深度拷贝2',newJson2,)

/*

console.log(Object)

console.log(Object.prototype)

console.log(Object.prototype.toString)

console.log(Object.prototype.toString.call())

console.log(Object.prototype.toString.call(oldArr))

console.log( Object.prototype.toString.call(oldArr).slice(8,-1))

console.log( Object.prototype.toString.call(jsonTest).slice(8,-1))

console.log( Object.prototype.toString.call(fun).slice(8,-1));//返回对象的具体类型

*/

 

相关文章
|
JavaScript
JS 数组克隆方法总结
JS 数组克隆方法总结
147 0
|
JavaScript
原生js实现对象的克隆
原生js实现对象的克隆
原生js实现对象的克隆
|
Web App开发 JavaScript API
JS魔法堂:元素克隆、剪切技术研究
原文:JS魔法堂:元素克隆、剪切技术研究 一、前言                                     当需要新元素时我们可以通过 document.createElement 接口来创建一个全新的元素,也可以通过克隆已有元素的方式来获取一个新元素。
949 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
93 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
114 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
80 4
下一篇
无影云桌面