一、 屬性的簡(jiǎn)潔表示法
ES6允許直接寫入變量和函數(shù)作為對(duì)象的屬性和方法。意思就是說允許在對(duì)象中只寫屬性名,不用寫屬性值。這時(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}}測(cè)試:
getPoint();//{x:1,y:10}函數(shù):
var obj = { fun(){ return "simply function"; }};等同于
var obj = { fun: function(){ return "simply function"; }}測(cè)試:
obj.fun();//simply function
二、屬性名表達(dá)式
ES6里允許定義對(duì)象的時(shí)候用表達(dá)式作為對(duì)象的屬性名或者方法名,即把表達(dá)式放在方括號(hào)里。
屬性
let propKey = 'foo';let obj = { [propKey] : true, ['a'+'bc'] : 123}測(cè)試:
obj.foo; //trueobj.abc ; //123
方法
let obj = { ['h'+'ello'](){ return "hello world"; }}測(cè)試:
obj.hello();//hello world
注意:
屬性名表達(dá)式與簡(jiǎn)介表達(dá)式不能同時(shí)使用。
//錯(cuò)誤的var foo = 'bar';var bar = 'abc';var baz = { [foo] };//正確var foo = 'bar';var baz = { [foo] : 'abc'}三、方法的name屬性
這個(gè)比較容易理解,直接闡述文字。
函數(shù)的name屬性返回函數(shù)名。對(duì)象方法也是函數(shù),因此也有函數(shù)名。
四、Oject.is()
Object.is()用來比較兩個(gè)值yan'ge嚴(yán)格相等。與嚴(yán)格比價(jià)運(yùn)算符(===)的行為基本一致。不同之處只有兩個(gè):一是 +0 不等于 -0 ,二是NaN等于自身
+0 === -0 //trueNaN === NaN //falseObject.is(+0,-0);//falseObject.is(NaN,NaN);//true
五、Oject.assign()
Object.assign()方法是用于將源對(duì)象的可枚舉屬性復(fù)制到目標(biāo)對(duì)象。它至少需要兩個(gè)參數(shù),第一是目標(biāo)對(duì)象,后面的全是源對(duì)象。
注意:
Object.assign只復(fù)制自身屬性,不可枚舉的屬性和繼承屬性不會(huì)被復(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ì)將其視為對(duì)象
Object.assign([1,2,3],[4,5]);//[4,5,3]
其他用處
六、屬性的可枚舉性
對(duì)象的沒個(gè)屬性都有一個(gè)描述對(duì)象(Descriptor),可通過Object.getOwnPropertyDescriptor(object,prop) ,object表示對(duì)象,prop表示對(duì)象的里的一個(gè)屬性,用的時(shí)候需要加上引號(hào)。描述對(duì)象里面有個(gè)enumerable(可枚舉性)屬性,來描述該屬性是否可枚舉。
ES5中會(huì)忽略enumerable為false的屬性
for…in循環(huán):只遍歷對(duì)象自身和繼承的可枚舉屬性(包含繼承)Object.keys() :返回對(duì)象自身的所有可枚舉屬性的鍵名Json.stringify() :只串行化對(duì)象自身的可枚舉屬性ES6新增的操作
Object.assign() : 只復(fù)制對(duì)象自身的可枚舉屬性Reflect.enumerate() : 返回所有for…in循環(huán)會(huì)遍歷的屬性(包含繼承)7. 屬性的遍歷
ES6中一共有6種方法可以遍歷對(duì)象的屬性。
for…in循環(huán)遍歷對(duì)象自身和繼承的可枚舉的屬性(不含Symbol屬性)Object.keys(obj)返回一個(gè)數(shù)組,包括對(duì)象自身的(不含繼承的)所有可枚舉屬性(不含Symbol屬性,但是包含不可枚舉屬性)Object.getOwnPropertySymbols(obj)返回一個(gè)數(shù)組,包含對(duì)象自身的所有Symbol屬性。Relect.ownKeys(obj)返回一個(gè)數(shù)組,包含對(duì)象的所有屬性,包含屬性名是Symbol或者字符串,也不管是否可枚舉。Reflect.enumerate(obj)返回一個(gè)Iterator對(duì)象,遍歷對(duì)象自身的和繼承的所有可枚舉屬性(不含Symbol),與for…in相同以上6種方法遍歷對(duì)象的屬性遵守同樣的屬性遍歷次序規(guī)則
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)前對(duì)象的prototype對(duì)象。但是一般不直接對(duì)這個(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 //10obj.y //20obj.z //40Object.getProtortypeOf()
function Rectangle(){}var rec = new Rectangle();Object.getPrototypeOf(rec) === Rectangele.prototype // true9. 對(duì)象的擴(kuò)展運(yùn)算符
ES7中提案,將rest參數(shù)/擴(kuò)展運(yùn)算符(…)引入對(duì)象。
Rest參數(shù)
Rest參數(shù)用于從一個(gè)對(duì)象取值,相當(dāng)于將所有可遍歷尚未被讀取的屬性,分配到制定的對(duì)象上。所有的鍵及其值都會(huì)復(fù)制到新對(duì)象上。需要注意的是rest參數(shù)的復(fù)制是淺復(fù)制,并且也不會(huì)復(fù)制繼承自原型對(duì)象的屬性。
簡(jiǎn)單的demo
 let {x,y,...k} = {x:2, y:3,z:4,a:5};x //2y //3k //{z:4,a:5}擴(kuò)展運(yùn)算符
擴(kuò)展運(yùn)算符用于取出參數(shù)對(duì)象的所有可遍歷屬性,復(fù)制到當(dāng)前對(duì)象中。
let z = {a:3 ,b:4};let n = {...z};n //{a:3,b:4}擴(kuò)展運(yùn)算符還可以合并兩個(gè)對(duì)象。
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ì)在新對(duì)象中覆蓋掉原有參數(shù)。
let a = {x:1,y:2};let aWithOverides = {...a,x:3,y:4};aWithOverides //{x:4,y:4}總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對(duì)武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注