ES6學習教程之對象的擴展詳解

一、 屬性的簡潔表示法

ES6允許直接寫入變量和函數作為對象的屬性和方法。意思就是說允許在對象中只寫屬性名，不用寫屬性值。這時，屬性值等于屬性名稱所代表的變量。下面分別舉一個例子來說明：

屬性：

function getPoint(){
 var x = 1 ;
 var y = 2;
 return {x,y}
}

等同于

fucntion getPoint(x,y){
 var x = 1 ;
 var y = 2;
 return {x:x,y:y}
}

測試：

getPoint();//{x:1,y:10}

函數：

var obj = {
 fun(){
 return "simply function";
 }
};

等同于

var obj = {
 fun: function(){
 return "simply function";
 }
}

測試：

obj.fun();//simply function

二、屬性名表達式

ES6里允許定義對象的時候用表達式作為對象的屬性名或者方法名，即把表達式放在方括號里。

屬性

let propKey = 'foo';

let obj = {
 [propKey] : true,
 ['a'+'bc'] : 123
}

測試：

obj.foo; //true
obj.abc ; //123

方法

let obj = {
 ['h'+'ello'](){
 return "hello world";
 }
}

測試：

obj.hello();//hello world

注意：

屬性名表達式與簡介表達式不能同時使用。

//錯誤的
var foo = 'bar';
var bar = 'abc';
var baz = { [foo] };

//正確
var foo = 'bar';
var baz = { [foo] : 'abc'}

三、方法的name屬性

這個比較容易理解，直接闡述文字。

函數的name屬性返回函數名。對象方法也是函數，因此也有函數名。

• 一般情況方法的name屬性返回函數名
• 如果是取值函數會在函數名前加”get”
• 如果是存值函數會在函數名前加”set”
• 如果bind方法創建的函數會在函數名前加”bound”
• 如果是Function構造函數創建的函數，會在函數名前加”anonymous”
• 如果對象的方法是一個Symbol值，那么name屬性返回的是這個Symbol值的描述*
  

四、Oject.is()

Object.is()用來比較兩個值yan'ge嚴格相等。與嚴格比價運算符（===）的行為基本一致。不同之處只有兩個：一是 +0 不等于 -0 ，二是NaN等于自身

+0 === -0 //true
NaN === NaN //false

Object.is(+0,-0);//false
Object.is(NaN,NaN);//true

五、Oject.assign()

Object.assign()方法是用于將源對象的可枚舉屬性復制到目標對象。它至少需要兩個參數，第一是目標對象，后面的全是源對象。

注意：

• 每個參數必須是對象，否則會報TypeError錯誤。
• 如果目標對象與源對象有同名屬性，或多個源對象有同名的屬性，則后面的屬性會覆蓋前面的屬性
• Object.assign只復制自身屬性，不可枚舉的屬性和繼承屬性不會被復制
• 屬性名為Symbol值的屬性，也會被Object。assign復制。
  

demo：

var target = {a:1,b:2};

var source1 = {a:2,c:5};
var source2 = {a:3,d:6};

Object.assign(target,source1,source2);
target//{a:3,b:2,c:5,d:6}

Object.assign可用于處理數組，但是會將其視為對象

Object.assign([1,2,3],[4,5]);
//[4,5,3]

其他用處

• 為對象添加屬性
• 為對象添加方法
• 克隆對象
• 合并多個對象
• 為屬性指定默認值
  

六、屬性的可枚舉性

對象的沒個屬性都有一個描述對象(Descriptor)，可通過Object.getOwnPropertyDescriptor(object,prop) ,object表示對象，prop表示對象的里的一個屬性，用的時候需要加上引號。描述對象里面有個enumerable（可枚舉性）屬性，來描述該屬性是否可枚舉。

ES5中會忽略enumerable為false的屬性

• for…in循環：只遍歷對象自身和繼承的可枚舉屬性（包含繼承）
• Object.keys() :返回對象自身的所有可枚舉屬性的鍵名
• Json.stringify() :只串行化對象自身的可枚舉屬性
  

ES6新增的操作

• Object.assign() : 只復制對象自身的可枚舉屬性
• Reflect.enumerate() : 返回所有for…in循環會遍歷的屬性（包含繼承）
  

7. 屬性的遍歷

ES6中一共有6種方法可以遍歷對象的屬性。

• for…in循環遍歷對象自身和繼承的可枚舉的屬性（不含Symbol屬性）
• Object.keys(obj)返回一個數組，包括對象自身的（不含繼承的）所有可枚舉屬性（不含Symbol屬性，但是包含不可枚舉屬性）
• Object.getOwnPropertySymbols(obj)返回一個數組，包含對象自身的所有Symbol屬性。
• Relect.ownKeys(obj)返回一個數組，包含對象的所有屬性，包含屬性名是Symbol或者字符串，也不管是否可枚舉。
• Reflect.enumerate(obj)返回一個Iterator對象，遍歷對象自身的和繼承的所有可枚舉屬性（不含Symbol）,與for…in相同

以上6種方法遍歷對象的屬性遵守同樣的屬性遍歷次序規則

• 首先遍歷所有屬性名為數值的屬性，按照數字排序
• 其次遍歷所有屬性名為字符串的屬性，按照生成時間排序
• 最后遍歷所有屬性名為Symbol值的屬性，按照生成時間排序

Reflect.ownkeys({[Symbol()]:0,b:0,10:0,2:0,a:0})
//[‘2','10','b','a',Symbol()]

八、 proto 屬性，Object.setPrototypeOf(),Object.getPrototypeOf()

proto 屬性

（前后應該有兩個下劃線，這里沒顯示出來）。用來讀取或者設置當前對象的prototype對象。但是一般不直接對這個屬性進行操作，而是通過Object.setProtortypeOf() （寫操作）、Object.getPrototypeOf() （讀操作）或者Object.create() （生成操作）代替。

Object.setProtortypeOf()

let proto = {};
let obj = { x : 10};
Object.setProtortypeOf(obj,proto);

proto.y = 20;
proto.z = 40;

obj.x //10
obj.y //20
obj.z //40

Object.getProtortypeOf()

function Rectangle(){}

var rec = new Rectangle();

Object.getPrototypeOf(rec) === Rectangele.prototype // true

9. 對象的擴展運算符

ES7中提案，將rest參數/擴展運算符（…）引入對象。

Rest參數

Rest參數用于從一個對象取值，相當于將所有可遍歷尚未被讀取的屬性，分配到制定的對象上。所有的鍵及其值都會復制到新對象上。需要注意的是rest參數的復制是淺復制，并且也不會復制繼承自原型對象的屬性。

簡單的demo

 let {x,y,...k} = {x:2, y:3,z:4,a:5};
x //2
y //3
k //{z:4,a:5}

擴展運算符

擴展運算符用于取出參數對象的所有可遍歷屬性，復制到當前對象中。

let z = {a:3 ,b:4};
let n = {...z};
n //{a:3,b:4}

擴展運算符還可以合并兩個對象。

let a = { c:5,d:6 };
let b = { e:7,f:8 };
let ab = {...a,...b};
ab //{c:5,d:6,e:7,f:7}

擴展運算符還可以自定義屬性，會在新對象中覆蓋掉原有參數。

let a = {x:1,y:2};
let aWithOverides = {...a,x:3,y:4};
aWithOverides //{x:4,y:4}

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。