javascript中的对象详解

对象

对象的格式

var obj = {a:1,b:2};
//键值对(指必须有键和值这两个)
//key		a就是键   一个键对应唯一一个值
//value		1就是值  

键和值直接写在对象中的是字符，而描述时，也可以将变量作为键
var names = "a";//names这个变量的值是a
var obj = {
	[names]:1   //[变量名]的方式,才叫增加一个以变量为键的属性名
				//[names]:1 认为实际上给obj增加了一个a属性,这个属性的值是1
}
以上写法等同于
var obj = {a:1}
区别:
	var obj = {[names]:1}	属性名是变量，所以需要[]将其包含
	var obj = {a:1}			属性名就是字符串
	
如果 
var names = a;
var v = 20;
var obj = {
	[names]:v	//obj增加一个a 属性,这个属性的值为20
				//v没有加"" 认为是变量，值在设置的时候 不加[]
}

如果
var v = 20;
var obj = {a:v};//凡是字符，加了""就是字符类型的字符串，不加""就是变量名
				//只有在对象中属性名特殊，没有""的属性名是字符串，有[]的属性名是变量
				//所以 a:20

获取对象中的属性

获取对象中的属性
var key = "e"
var obj = {a:1,b:2,c:3,[key]:4};
console.log(obj.a);//使用.语法来获取属性,只有字符串可以用.语法
console.log(obj[key]);//认为obj中的key属性
//如果属性名是变量，直接对象[变量] 获取以该变量为属性名的值

设置对象中的属性值

obj.a = 20;
obj[key] = 40;

对象中的属性名

属性名必须是字符型或者Symbol型
如果属性名所对应的变量不是字符，隐式转换为字符

var obj = {};
obj [1] = 10;//认为1是变量，1隐式转换为字符

obj.1 = 10;//不能这么写，1是数值

obj["1"] = 20;//覆盖上面的10

obj[3>5] = 100;//存储false为100

var arr = [];
obj[arr] = 0;//{"":0}存储空字符串为0

属性名案例

var obj = {};
var o ={a:1};
obj[o]=20;
var o1={a:3};
console.log(obj[o1]);//输出20
//o是对象，被带入时转换为字符串[object Object],所以{[object Object]:20},o1也是对象，转换为字符串也是[object Object],所以输出20;

如果
console.log(obj.o1);//输出undefined
//o1是变量，被带入时转换为字符串[object Object];
	//这里的o1是字符，没有o1的属性
	
总结:
在对象中 以键值对形式存储,键必须是属性名,可以直接给字符串，也可以以变量形式给入，不管变量形式是什么，都会隐式转换成字符
使用.语法时，不能是变量,必须是确定的字符，如果要使用变量，必须用[]

遍历对象(for in)

var obj={
    a:1,
    b:2,
    c:3,
    d:4,
    e:undefined//有undefined的值
}
遍历对象:要把对象某一个值循环一遍,for循环不能循环对象,因为对象的属性名都是字符串，不能循环
所以用for in循环

console.log("a" in obj); // a 是不是 obj的属性名
console.log("e" in obj); // true

for(var prop in obj){
	//prop 自定义的变量名,没有初始值
	// in 在..里面  
	//遍历时候认为对象中有属性名存在的都会遍历出来,并且将所有obj中的属性名分别赋值給prop
	console.log(prop);//key
	console.log(obj[prop]);//拿到变量prop属性名对应的值 value  
}

// 其他语言obj遍历时 没有顺序但是都会遍历完毕
// js中的对象遍历是根据对象属性添加的先后来遍历，对象遍历是有顺序(特有)

复制对象元素到另一个对象中

var obj={
    a:1,
    b:2,
    c:3,
    d:4,
    e:undefined
}
var o = {f:10,g:20};
for(var prop in obj){
	o[prop] = obj[prop];//把obj的属性名复制给o 并且值为原来的值
}

ES6新推出的复制方式
Object.assign(o,obj);//前面是复制的目标,后面是将谁复制过去
console.log(o);
也可以
var o = Object.assign(o,obj);
console.log(o);

复制样式案例

<div id="div0"></div>
<script>
var div0=document.getElementById("div0");

Object.assign(div0.style,{
    width:"50px",
    height:"50px",
    backgroundColor:"red"
})//将样式复制给div0的style上(一开始style都有这些属性但是没有值)
//style是 CSSStyleDeclaration类型对象 ,包含所有样式属性
//复制完成后,复制到div0的行内样式
</script>

浅复制

浅复制:修改一层不变，第二层会变
var  obj={
    a:1,
    b:2,
    c:{
        d:10,
        e:20
    }
}

var o1={};
for(var prop in obj){
    o1[prop]=obj[prop];
}//复制关系，obj.a修改时，o1不会修改
//var o1=obj;//引用关系，obj.a修改时，o1也会修改
//obj.a=10;
obj.c.d=100;
console.log(o1);//obj.c.d=100;修改时，o1里的也会变，因为复制的是c的引用地址

深复制

深复制:原来对象从里到外有任何对象改变都不会影响,把原对象从里到外都会复制,而不是复制引用地址
简便深复制:
var o1=JSON.parse(JSON.stringify(obj));//obj转还成字符串,然后JSON.parse新产生的对象
obj.c.d=100;//修改原对象,现在不会改变
console.log(o1);