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}