序文:
単純なデータ型はスタックスペースに格納され、値が格納されます。
複雑なデータ型の場合は、ヒープスペースに格納され、参照がスタックに格納されます。浅いコピーと深いコピーの違いにつながるのは、この保存方法の違いです。
浅いコピー:
属性が基本型の場合、基本型の値がコピーされます。属性が参照型の場合、コピーはメモリアドレスであるため、新しくコピーされたオブジェクトを変更すると、元のオブジェクトに影響します。
ディープコピー:
メモリからのオブジェクトの完全なコピー。ヒープメモリから新しい領域が開かれ、新しいオブジェクトが格納されます。新しいオブジェクトを変更しても、元のオブジェクトには影響しません。
ディープコピーを実現するために一般的に使用される方法
数组.concat()
は、最初のレイヤーのディープコピーしか実現できず、ディープレイヤーは実現できません。
Object.assign()
上記と同様に、
JSON.parse(JSON.stringify())
オブジェクト、配列、文字列、数値、true、false、およびnullデータのみをサポートします。関数、未定義、日付、RegExpなどのデータ型などの他のものはサポートされていません。サポートされていないデータの場合、この属性は直接無視されます。
オブジェクトまたは配列のディープコピーを再帰的に実装する
var My={
name:'123',
age:22,
hobby:['吃饭','睡觉','打游戏'],
study:{
js:{
vue:'双向数据绑定',
react:'组件化开发'
},
html:{
h5:{
div:'语义化标签',input:'增强型表单'}
}
}
}
let My2=My //浅拷贝,复制的是地址
// My2.age=10
// console.log(My);
// console.log(My2);
function deepClone(obj){
//传入初始参数
//如果不是对象或数组就返回,是null空对象也返回
if((typeof obj)!='object'||obj==null){
return obj
}
//初始化返回结果
let result;
//判断是不是数组
if(obj instanceof Array){
result=[]
}else if(obj instanceof Object){
result={
}
}
for (let key in obj){
//for in 遍历对象,遍历的是key
//判断key不是原型上的属性 hasOwnProperty方法 如果属性在原型上会返回false
if(obj.hasOwnProperty(key)){
//递归函数 使用循环把每个参数传入然后重复调用 循环完毕函数执行完毕
result[key]=deepClone(obj[key])
}
}
//返回结果
return result;
}
// console.log(deepClone(My));
//深拷贝 在内存中开辟了新的空间,复制的对象地址指向新的地址
My2=deepClone(My)
My2.age=12
console.log(My);
console.log(My2);
関数コピー
function deepClone(target){
if(target instanceof Object){
let dist ;
if(target instanceof Array){
dist = []
}else if(target instanceof Function){
dist = function(){
// 在函数中去执行原来的函数,确保返回的值相同
return target.call(this, ...arguments);
}
}else{
dist = {
};
}
for(let key in target){
dist[key] = deepClone(target[key]);
}
return dist;
}else{
return target;
}
}
通常のコピー
function deepClone(target){
if(target instanceof Object){
let dist ;
if(target instanceof Array){
// 拷贝数组
dist = [];
}else if(target instanceof Function){
// 拷贝函数
dist = function () {
return target.call(this, ...arguments);
};
}else if(target instanceof RegExp){
// 拷贝正则表达式
dist = new RegExp(target.source,target.flags);
}else{
// 拷贝普通对象
dist = {
};
}
for(let key in target){
dist[key] = deepClone(target[key]);
}
return dist;
}else{
return target;
}
}
コピー日
作者:海因斯坦
链接:https://zhuanlan.zhihu.com/p/270332499
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
function deepClone(target){
if(target instanceof Object){
let dist ;
if(target instanceof Array){
// 拷贝数组
dist = [];
}else if(target instanceof Function){
// 拷贝函数
dist = function () {
return target.call(this, ...arguments);
};
}else if(target instanceof RegExp){
// 拷贝正则表达式
dist = new RegExp(target.source,target.flags);
}else if(target instanceof Date){
dist = new Date(target);
}else{
// 拷贝普通对象
dist = {
};
}
for(let key in target){
dist[key] = deepClone(target[key]);
}
return dist;
}else{
return target;
}
}
最終機能
function deepClone(target,cache = new Map()){
if(cache.get(target)){
return cache.get(target)
}
if(target instanceof Object){
let dist ;
if(target instanceof Array){
// 拷贝数组
dist = [];
}else if(target instanceof Function){
// 拷贝函数
dist = function () {
return target.call(this, ...arguments);
};
}else if(target instanceof RegExp){
// 拷贝正则表达式
dist = new RegExp(target.source,target.flags);
}else if(target instanceof Date){
dist = new Date(target);
}else{
// 拷贝普通对象
dist = {
};
}
// 将属性和拷贝后的值作为一个map
cache.set(target, dist);
for(let key in target){
// 过滤掉原型身上的属性
if (target.hasOwnProperty(key)) {
dist[key] = deepClone(target[key], cache);
}
}
return dist;
}else{
return target;
}
}
本文代码作者:海因斯坦
链接:https://zhuanlan.zhihu.com/p/270332499
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。