1、属性的简写法
1.1
var a = '1';
var b = '2';
var obj = {a,b};
console.log(obj) //{a: "1", b: "2"}
在这里,{a,b}这样的写法等价于{a:‘1’, b:‘2’},可以发现,简写法会将变量名作为属性,将变量的值作为属性值。
1.2 一个实际应用的例子
function fn (a,b) {
return {a,b};
}
var b = fn(1,2);
console.log(b) //{a: 1, b: 2}
2、对象方法的简写法
2.1
es5的方式 :
{
name : "es5",
fn : function () {
conssole.log(name)
}
}
es6的方式 :
{
name : "es6",
fn () {
console.log(name)
}
}
可以看出,函数的简写法可以省去冒号和function关键字。
3、属性名表达式
var obj = {
['fn'+ 1] () {
console.log(1)
},
['var' + 1] : "2"
}
console.log(obj) //{fn1: ƒ, var1: "2"}
无论是方法名还是属性名都可以用表达式定义。
4、Object.assign()方法
assign方法用于合并对象。
4.1
var obj1 = {a:1};
var obj2 = {b:2};
var obj3 = {c:3};
var obj4 = Object.assign({},obj1,obj2,obj3)
console.log(obj4) //{a: 1, b: 2, c: 3}
assign的第一个参数表示目标对象,assign方法会把其余参数的对象中的属性方法复制到目标对象中。
那些不可枚举的或者继承而来的属性或方法将不被拷贝。
4.2 覆盖
var obj1 = {a:1};
var obj2 = {a:2,b:2};
var obj3 = {b:3,c:3};
var obj4 = Object.assign(obj1,obj2,obj3)
console.log(obj4) //{a: 2, b: 3, c: 3}
如果对象之间存在属性冲突的话,后面的对象中的属性会覆盖前面的对象中的同名属性。
也就是obj1将被obj2覆盖,而obj2将被obj3覆盖。
5、浅拷贝
5.1
var obj2 = {
name : 'obj2'
}
var obj1 = {
name : 'obj1',
obj : obj2
}
var obj3 = Object.assign({},obj1,obj2);
obj3.obj.name = 'xxx';
console.log(obj3.obj.name) //xxx
console.log(obj2.name) //xxx
上面代码中,我们把两个对象与一个新对象进行合并,在obj1中的obj属性上引用了obj2
当obj这个属性被拷贝到新对象当中时,只是拷贝了其引用而已。所以在新对象上修改这个属性,也会在obj2上反映出来。
6、Object.keys方法和Object.values方法。
6.1
keys方法返回对象内部的所有可遍历属性的键名(不包括继承的)。
var obj = {
name : "obj",
age : 18
}
console.log(Object.keys(obj)) //["name", "age"]
6.2
values方法返回对象内部的所有可遍历属性的键值(不包括继承的)。
var obj = {
name : "obj",
age : 18
}
console.log(Object.values(obj)) //["obj", 18]
7、对象的解构赋值
使用解构赋值能够方便地从对象中提取值。
7.1
var obj = {
name : "obj",
age : 18
}
var obj2 = {name,age} = obj;
console.log(name,age) //obj 18
上面代码中,{name,age} 等价于 {name:name,age:age},解构赋值会根据键名A寻找等号右边的对象中的相同键名B,然后取这个相同键名B的值,赋给键名A的值。
7.2
var obj = {
name : "obj",
age : 18,
sex : '男',
fn () {
console.log(1)
}
}
var obj2 = {name,...info} = obj;
console.log(name,info) //obj {age: 18, sex: "男", fn: ƒ}
上面代码中,name与name相匹配,…info则表示把其他的未被匹配的属性全部拷贝进info变量中。
需要注意的是,当拷贝的值是引用类型的时候,拷贝的只是其引用地址,是一种浅拷贝。
8、拓展运算符
使用拓展运算符能够很方便地从对象中取出所有的值。
8.1
var obj = {
name : "obj",
age : 18,
sex : '男',
fn () {
console.log(1)
}
}
var newObj = {name : 'new',...obj};
console.log(newObj) //{name: "obj", age: 18, sex: "男", fn: ƒ}
上面代码中,…obj表示将obj对象中的所有属性放入newObj对象当中。
并且,obj会覆盖newObj中的同名属性。也就是说,后面的将覆盖前面的。如下:
8.2
var obj = {
name : "obj",
age : 18,
sex : '男',
fn () {
console.log(1)
}
}
var newObj = {...obj,name : 'new'};
console.log(newObj) //{name: "new", age: 18, sex: "男", fn: ƒ}
上面代码中,我们将位置调换了一下,结果依然是后面的属性覆盖前面的属性。
8.3
以下是对象的合并
var obj1 = {name : 'obj1'};
var obj2 = {age : 18};
var obj3 = {...obj1,...obj2};
console.log(obj3) //{name: "obj1", age: 18}