es6 对象的拓展

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}

猜你喜欢