Everything Is an Object
First look at a few shallow copy
浅度复制
var obj = {a:1,b:2,c:3}
var obj1 = {}
for(var prop in obj){
obj1[prop] = obj[prop]
}
obj["a"] = 100
console.log(obj)
console.log(obj1)
Printed copy out value will not change because the properties of obj change, complete shallow copy
Next, look at the method of replicating Object belt Object.assign ()
var obj = {a:1,b:2,c:3}
var obj1 = Object.assign({},obj)
obj["a"] = 100
console.log(obj)
console.log(obj1)
If you say
var obj = {a:1,b:2,c:{
a:1,b:2,c:{
a:1,b:2
},d:{
a:1,c:2,c:3
}
}}
The object is to make a copy, the above method does not work, so we can use the following this method for deep copy
var obj1 = cloneObject (obj,{})
function cloneObject(source,target){
for(var prop in source){
if(typeof(source[prop]) === "object" && source[prop] !== null){
var obj = {}
cloneObject(source[prop],obj)
target[prop] = obj
}else{
target[prop] = source[prop]
}
}
return target
}
console.log(obj1)
Thus, when I change the value of obj, obj1 will not change, complete deep copy
Of course, this is more than a way to deep copy
next to see a more difficult
When we need a copy Dom element, you can also choose this (if you know the prototype and object description will be better understood)
<body>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<script>
var obj1={};
Object.defineProperties(obj1,{
a:{
value:1
},
b:{
writable:true,
enumerable:true,
value:2
},
c:{
configurable:true,
writable:true,
value:3
},
d:{
enumerable:true,
set:function(value){
this._d=value;
},
get:function(){
if(!this._d) this._d=0;
return this._d;
}
}
});
var obj={
a:1,
b:[1,2,3],
c:{
a:"a",
b:true,
c:{
a:new Date(),
b:/^[a-z](!=[0-9])$/i,
c:{
a:new XMLHttpRequest(),
b:[
[1,2,3,4,5],
[2,3,4,5,6],
[3,4,5,6,7]
],
c:{
a:[
{a:1,b:2},
{a:2,b:3},
{a:3,b:4}
],
b:function(){
console.log("aaa");
},
c:obj1,
d:document.querySelector(".div1")
}
}
}
}
}
var obj2=cloneObject({},obj);
var names = Object.getOwnPropertyNames(source)
for(var i =0;i<names.length;i++){
var desc = Object.getOwnPropertyDescriptor(source,names[i])
if(typeof desc.value ==="object" && desc.value!==0){
var objs
if(desc.value.constructor === Date){
objs = new desc.value.constructor(desc.value)
}else if(desc.value.constructor === RegExp){
objs = new desc.value.constructor(desc.value.source,desc.value.flags)
}else if(desc.value.__proto__.__proto__&&desc.value.__proto__.__proto__.constructor === HTMLElement){
objs = document.createElement(desc.value.nodeName)
}else{
objs = new desc.value.constructor()
}
Object.defineProperty(source,names[i],{
writable: desc.writable,
enumerable: desc.enumerable,
configurable: desc.configurable,
value: objs
})
cloneObject(objs,desc.value)
}else{
Object.defineProperty(source,names[i],desc)
}
}
return target
}
</script>
</body>
For front-end
I was far from proficient
only been on the road
