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;

}