面向对象02(计算属性和assign,遍历操作与dom绘制，深拷
2020-04-27 本文已影响0人
小雪洁
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>11计算属性与assign使用</title>
</head>
<body>
</body>
<script>
let user={}
let name='title';
user[name]="后盾人";
console.log(user);
//对象属性是通过计算动态组合成的
let id=0;
let hd={};
hd[`id-${++id}`]=id;
hd[`id-${++id}`]=id;
hd[`id-${++id}`]=id;
hd[`id-${++id}`]=id;
console.log(hd);
let lesson=[
{name:"css",score:80},
{name:'js', score:85},
{name:'html',score:90}
];
//把lesson数组组成对象，每个元素取该元素的name的值为键名
let obj={};
let l=lesson.map((item,index,arr)=>{
obj[item.name]=item;
});
console.log(obj);
//console.log(JSON.stringify(obj,null,2));
//Object.assign()合并多个对象成为一个对象
let hxj=Object.assign({name:'hxj'},{age:30});
console.log(hxj);//{name: "hxj", age: 30}
//之前学习了使用展开语法合并参数
function upload(params){
let config={
type:"*.jpg,*png",
size:10000
};
//重点在这里，使用展开语法把接收到的参数和默认参数合并一下，后者放接收到的参数
//config={...config,...params};
//也可以使用Object.assign()来合并参数
Object.assign(config,params);
console.log(config);
}
upload()//{type: "*.jpg,*png", size: 10000}
upload({size:99});//{type: "*.jpg,*png", size: 99}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>遍历操作与dom绘制</title>
</head>
<body>
</body>
<script>
//遍历操作
let user={
name:'hxj',
age:30
};
let arr=[{name:'hxj',age:30}];
//获取对象所有属性，返回一个属性的数组
console.log(Object.keys(user));//["name", "age"]
//获取对象所有属性对应的值，返回一个值的数组
console.log(Object.values(user));// ["hxj", 30]
//获取对象所有键值对，返回一个键值对数组
console.log(Object.entries(user));
console.log(JSON.stringify(Object.entries(user),null,2));
//循环for-in遍历对象属性
for(const key in user){
console.log(key);//对象属性
console.log(user[key]);//属性对应的值
}
//循环for-of是遍历迭代器的值,普通对象没法使用，以下代码报错
/* for(const value of user){
console.log(value);
} */
//数组可以使用for-of，因为数组有迭代特性
for(const value of arr){
console.log(value);//{name: "hxj", age: 30}
}
//所以可以先使用Object.keys(user),获取到属性值的数组，再使用for-of遍历
for(const value of Object.values(user)){
console.log(value);
}
//使用解构特性遍历对象的键值对
for(const [key,value] of Object.entries(user)){
console.log(key,value);
}
let users=[
{name:'hxj',age:30},
{name:'ydc',age:30}
];
let ul=document.createElement("ul");
for(const user of users){
let li=document.createElement("li");
li.innerHTML=`姓名：${user.name}，年龄${user.age}`;
ul.appendChild(li);
}
document.body.appendChild(ul);
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>13对象浅拷贝的多种操作方法</title>
</head>
<body>
</body>
<script>
//浅拷贝它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。
//如果属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），
//拷贝的就是内存地址 ，因此如果其中一个对象改变了这个地址，就会影响到另一个对象。
//即默认拷贝构造函数只是对对象进行浅拷贝复制(逐个成员依次拷贝)，
//即只复制对象空间而不复制资源。
//浅拷贝的方式——for-in, Object.assign(), 展开语法
//这几种方法没法浅拷贝多层的对象
let user={name:'hxj',age:30,};
let a={
name:user.name
};
a.name='ydc';
console.log(a.name);//ydc
console.log(user.name);//hxj
//for-in
let b={};
for(const key in user){
b[key]=user[key];
}
console.log(b);//{name: "hxj", age: 30}
b.name='ydc';
console.log(b);//{name: "ydc", age: 30}
console.log(user);//{name: "hxj", age: 30}
//Object.assign()
let c=Object.assign({},user);
console.log(c);//{name: "hxj", age: 30}
c.name='ydc';
console.log(c);//{name: "ydc", age: 30}
console.log(user);//{name: "hxj", age: 30}
//展开语法
let d={...user};
console.log(d);//{name: "hxj", age: 30}
d.name='ydc';
console.log(d);//{name: "ydc", age: 30}
console.log(user);//{name: "hxj", age: 30}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>深拷贝多层次分析</title>
</head>
<body>
</body>
<script>
//深拷贝会另外创造一个一模一样的对象，
//新对象跟原对象不共享内存，修改新对象不会改到原对象
let user={
name:'hxj',
lesson:{
js:80,
css:85
}
};
//上节中的浅拷贝
/* let hxj={
name:user.name,
lesson:user.lesson
}; */
let hxj={};
for(const key in user){
hxj[key]=user[key];
}
console.log(hxj);
hxj.lesson.html=90;
hxj.name='郝雪洁';
//console.log(JSON.stringify(hxj,null,2));
//user中name还是hxj,但是lesson对象里也增加了html键值对
//console.log(JSON.stringify(user,null,2));
//如果原版中里面有多层对象，浅拷贝出来的副本，并不独立于原版，还是共用内层对象的引用地址
//因此引出深拷贝来解决该问题，而深拷贝的核心就是把原版里内层对象一层层剥到基本类型
//彻底的赋值一份资源出来和原版完全独立，互不影响。
function copy(obj){
let a={};
for(const key in obj){
a[key]=typeof obj[key]=='object'?copy(obj[key]):obj[key];
}
return a;
}
let b=copy(user);
//console.log(JSON.stringify(b,null,2));
b.lesson.html=89;
//console.log(JSON.stringify(b,null,2));//b里lesson的"html": 89
//console.log(JSON.stringify(user,null,2));//user里lesson的"html": 90
//看一种对象里不但是多层，而且有些属性值是数组的情况
let data={
name:'hxj',
lesson:{
js:80,
css:85
},
arr:['工作','业余']
};
//如果仍然使用上述copy()方法，会把arr复制成对象类型;
//console.log(copy(data));//arr:{}
//copy()方法改进
function newcopy(obj){
//每次递归迭代的时候我们先看看传进来的这个obj是数组还是对象，
//是数组就用数组接，是对象就用对象接，
let a=obj instanceof Array?[]:{};
/* for(const key in obj){
a[key]=typeof obj[key]==='object'?newcopy(obj[key]):obj[key];
} */
for(const[k,v] of Object.entries(obj)){
a[k]=typeof v==='object'?newcopy(v):v;
}
return a;
}
let copydata=newcopy(data);
console.log(copydata);
copydata.arr.push('兴趣');
console.log(copydata);
console.log(data);
</script>
</html>
