Java数组浅克隆地址不一样_web前端高级JavaScript - 数组和对象的浅克隆与深克隆...

浅克隆

浅克隆是指:只克隆数组/对象的第一层级内容(开辟新的堆内存),而第二层级及以上层级的内容则直接引用(使用原来第二层级及以上层级的堆内存)。如果对克隆后对象的二级或以上层级进行修改,那么克隆前对象的二级或以上层级也会跟着被修改。 例如:现有一个对象obj1对应堆内存地址0x000,obj1对象中还有个子对象obj1_1对应堆内存0x001,现在想对obj1对象进行浅克隆,则会创建一个新的对象obj2对应新的堆内存地址0x002,对于对象obj1中的基本类型数据则会直接拷贝到obj2中,而obj1中的引用类型也就是子对象obj1_1则会直接被新对象obj2引用,而不是创建新的堆内存。后面如果通过操作obj2对obj2中的子对象obj1_1进行更改,那么obj1中的obj1_1也会随着变化,因为它们用的是同一个堆内存。来看下面的图会更直观一些

实现浅克隆的几种方案

对象的浅克隆方案一:基于循环实现

let obj1 = {

python: "python",

java: "java"

fontend: {

javascript: "javascript",

html: "html"

}

}

let obj2 = {};//创建一个新对象(开辟新的堆内存)

//把obj1中私有的key和Symbol类型的key存在数组中

let keys = [

...Object.keys(obj1),//展开运算符

...Object.getOwnPropertySymbols(obj1)

]

keys.forEach(key => {

obj2[key] = obj1[key];

});

console.log(obj1 === obj2); //false

console.log(obj1.fontend === obj2.fontend);// true

对象的浅克隆方案二: 展开运算符

let obj1 = {

python: "python",

java: "java"

fontend: {

javascript: "javascript",

html: "html"

}

}

let obj2 = {

...obj1

};

console.log(obj1 === obj2); //false

console.log(obj1.fontend === obj2.fontend);// true

对象的浅克隆方案三:基于Object.assign()函数

Object.assign([obj1], …[obj2]):该方法接收多个参数,执行后会将obj2中的键值对合并到obj1中,并将obj1的堆内存地址返回。注意:这里返回的不是新的对象,而是把第一个参数作为返回值返回。 所以我们可以利用这个特点进行对象的浅克隆

let obj1 = {

python: "python",

java: "java"

fontend: {

javascript: "javascript",

html: "html"

}

}

//因为assign方法默认会把第一个参数返回,所以这里传一个空对象进去,执行asign方法将obj1合并后,再将合并后的对象返回,就达到了克隆目的

let obj2 = Object.assign({}, obj1);

console.log(obj1 === obj2); //false

console.log(obj1.fontend === obj2.fontend);// true

数组浅克隆方案一:基于forEach或map

let arr = [12,3,[4,50]];

let arr2 = [];

arr.forEach((item, index) => {

arr2[index] = item;

});

arr2 = arr.map(item => item);

数组浅克隆方案二:基于展开运算符或Object.asing(),与对象相同

let arr = [12,3,[4,50]];

let arr2 = [

...arr

];

arr2 = Object.assign([], arr);

数据浅克隆方案三:基于数组的slice方法,不传参数默认从数组第一项开始截取到数组的最后一项

let arr = [12,3,[4,50]];

let arr2 = arr.slice();

数组和对象的浅克隆 - 通用方案:自己撸代码

//定义一个用于检测数据类型的通用方法

function toType(value){

let obj = {};

['Number','String','Boolean','Null','Undefined','Symbol','BigInt','Function','GeneratorFunction','Date','RegExp','Object','Error'].forEach(item => {

obj["[object "+item+"]"] = item.toLowerCase()

});

return obj[Object.prototype.toString.call(value)];

}

//定义一个获取对象/数组所有私有属性(包括Symbol类型)的方法

function getOwnProperties(obj){

//数据类型检测

if(obj == null) return [];

//获取所有私有属性包括Symbol类型

let keys = [

...Object.keys(obj),

...Object.getOwnPropertySymbols(obj)

]

return keys;

}

function shallowClone(obj){

//如果是基本数据类型值,则传啥就返回啥

let type = toType(obj);

if(/^(number|string|boolean|null|undefined|symbol|bigint)$/.test(type)) return obj;

if(type === 'function') {

//返回一个不同函数,但最后执行效果跟原始函数一致

return function proxy(){

obj();

}

}

//if(type === 'regexp') return new RegExp(obj);

//if(type === 'date') return new Date(obj);

if(/^(regexp|date)$/.test(type)) return new obj.constructor(obj);

if(type === 'error') return new Error(obj.message);

let keys = getOwnProperties(obj);

let clone = {};

Array.isArray(obj) ? clone = [] : null;

keys.forEach(item => {

clone[item] = obj[item];

});

return clone;

}

数组和对象的深克隆

相信经过前面对数组和对象的浅克隆的了解,深克隆也就不难理解了; 前面说浅克隆是只克隆数组或对象的第一层级,二级及以上层级是直接引用;那么深克隆则是克隆数组或对象的每个层级,不管一个对象或数组有多少层级,那么当我们进行深克隆时每一个层级都会开辟一块新的堆内存地址。对于克隆后对象/数组的任何层级做任何修改都不会影响到克隆前的对象/数组,因为它们都是独立的不同的堆内存。如下图所示

数组和对象的深克隆方案一:基于JSON.stringfiy、JSON.parse实现深克隆

原理:先将数组或对象基于JSON.stringify转换为字符串,然后再基于JSON.parse把字符串转换为对象,此时对象中对应每个层级都会开辟一块全新的堆内存来存储 缺点:因为JSON.stringify变为字符串,很多类型是不支持的

正则/Math数学函数会被处理为空对象具备函数/Symbol/undefined属性值的属性会被直接删除掉BigInt无法处理,会报错日期对象转换后变为字符串

let obj1 = {

python: "python",

java: "java"

fontend: {

javascript: "javascript",

html: "html"

}

}

let obj2 = JSON.parse(JSON.stringify(obj1));

数组/对象深克隆方案二:自己撸代码

function toType(value){

let obj = {};

['Number','String','Boolean','Null','Undefined','Symbol','BigInt','Function','GeneratorFunction','Date','RegExp','Object',"Error"].forEach(item => {

obj["[object "+item+"]"] = item.toLowerCase()

});

return obj[Object.prototype.toString.call(value)];

}

//定义一个获取对象/数组所有私有属性(包括Symbol类型)的方法

function getOwnProperties(obj){

//数据类型检测

if(obj == null) return [];

//获取所有私有属性包括Symbol类型

let keys = [

...Object.keys(obj),

...Object.getOwnPropertySymbols(obj)

]

return keys;

}

function deepClone(obj, cache = new Set()){

/*

if(/^(number|string|boolean|null|undefined|symbol|bigint)$/.test(type)) return obj;

if(type === 'function') {

//返回一个不同函数,但最后执行效果跟原始函数一致

return function proxy(){

obj();

}

}

//if(type === 'regexp') return new RegExp(obj);

//if(type === 'date') return new Date(obj);

if(/^(regexp|date)$/.test(type)) return new obj.constructor(obj);

if(type === 'error') return new Error(obj.message);

*/

//如果是基本数据类型值,则传啥就返回啥

let type = toType(obj);

//如果不是数组或对象则直接按浅克隆处理

if(!/^(array|object)$/.test(type)) return shallowClone(obj);

let keys = getOwnProperties(obj);

let clone = {};

Array.isArray(obj) ? clone = [] : null;

if(cache.has(obj)) return obj;

cache.add(obj);

keys.forEach(item => {

//if(/^(array|object)$/.test(toType(obj[item]))){

//    clone[item] = deepClone(obj[item]);

//}

clone[item] = deepClone(obj[item], cache);

});

return clone;

}

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页