ES6學(xué)習(xí)教程之對象的擴(kuò)展詳解

一、 屬性的簡潔表示法

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

屬性：

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}

函數(shù)：

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

等同于

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

測試：

obj.fun();//simply function

二、屬性名表達(dá)式

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

屬性

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

注意：

屬性名表達(dá)式與簡介表達(dá)式不能同時(shí)使用。

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

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

三、方法的name屬性

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

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

• 一般情況方法的name屬性返回函數(shù)名
• 如果是取值函數(shù)會(huì)在函數(shù)名前加”get”
• 如果是存值函數(shù)會(huì)在函數(shù)名前加”set”
• 如果bind方法創(chuàng)建的函數(shù)會(huì)在函數(shù)名前加”bound”
• 如果是Function構(gòu)造函數(shù)創(chuàng)建的函數(shù)，會(huì)在函數(shù)名前加”anonymous”
• 如果對象的方法是一個(gè)Symbol值，那么name屬性返回的是這個(gè)Symbol值的描述*
  

四、Oject.is()

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

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

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

五、Oject.assign()

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

注意：

• 每個(gè)參數(shù)必須是對象，否則會(huì)報(bào)TypeError錯(cuò)誤。
• 如果目標(biāo)對象與源對象有同名屬性，或多個(gè)源對象有同名的屬性，則后面的屬性會(huì)覆蓋前面的屬性
• Object.assign只復(fù)制自身屬性，不可枚舉的屬性和繼承屬性不會(huì)被復(fù)制
• 屬性名為Symbol值的屬性，也會(huì)被Object。assign復(fù)制。
  

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可用于處理數(shù)組，但是會(huì)將其視為對象

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

其他用處

• 為對象添加屬性
• 為對象添加方法
• 克隆對象
• 合并多個(gè)對象
• 為屬性指定默認(rèn)值
  

六、屬性的可枚舉性

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

ES5中會(huì)忽略enumerable為false的屬性

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

ES6新增的操作

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

7. 屬性的遍歷

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

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

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

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

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

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

proto 屬性

（前后應(yīng)該有兩個(gè)下劃線，這里沒顯示出來）。用來讀取或者設(shè)置當(dāng)前對象的prototype對象。但是一般不直接對這個(gè)屬性進(jìn)行操作，而是通過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. 對象的擴(kuò)展運(yùn)算符

ES7中提案，將rest參數(shù)/擴(kuò)展運(yùn)算符（…）引入對象。

Rest參數(shù)

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

簡單的demo

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

擴(kuò)展運(yùn)算符

擴(kuò)展運(yùn)算符用于取出參數(shù)對象的所有可遍歷屬性，復(fù)制到當(dāng)前對象中。

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

擴(kuò)展運(yùn)算符還可以合并兩個(gè)對象。

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}

擴(kuò)展運(yùn)算符還可以自定義屬性，會(huì)在新對象中覆蓋掉原有參數(shù)。

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

總結(jié)

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