相信對象對于每個使用JavaScript的人來說都不陌生。訪問對象的屬性幾乎日常開發每天都在用。下面我們一起探索下有哪些方式可以實現屬性的訪問。

訪問對象屬性介紹

對象是JavaScript的一種常見的數據類型。它允許我們以鍵值對的形式存儲數據。這一系列的鍵成為對象的屬性。

常見的訪問對象的屬性的方式有三種，包括點號、方括號和對象分解。點號也經常被叫做點號屬性訪問器。而方括號表示法也被稱為方括號屬性訪問器。

這三種訪問方式都是在你知道屬性名的情況下，否則于事無補。你只能通過循環遍歷獲取所有的屬性，其中包括你想要獲取的那個屬性。下面來分別看下三種訪問方式。

點號

點號訪問器是訪問屬性里用的最多的一種方式。或許是最簡單的一種形式。語法就是你先指定一些對象，然后根據你所知道的屬性名，在對象和屬性名之間用點號連接。

使用同樣的方式你也可以訪問對象里更深層次的屬性。通過層層嵌套的方式將它們連接起來。例如obj.shallowProp.deeperProp.DeepestProp。

//?Create?an?object?using?object?literal: const?myObj?=?{name:?'Anthony?Edward?Stark',alias:?'Iron?Man',gender:?'male',education:?'MIT',affiliation:?{current:?'Avengers'},creators:?['Stan?Lee',?'Larry?Lieber',?'Don?Heck',?'Jack?Kirby'],status:?{alignment:?'good'} }//?Accessing?object?properties?with?dot?notation: //?First:?name?of?the?object. //?Second:?name?of?the?property?to?access. //?Third:?dot?character?between?the?object?and?property. console.log(myObj.name) //?Output: //?'Anthony?Edward?Stark'//?Accessing?deeper?object?properties: //?Access?the?"current"?property?that?exists //?in?nested?object?assigned?to?"affiliation"?property console.log(myObj.affiliation.current) //?Output: //?'Avengers'

在JavaScript中，有規則說明什么是有效標識符和無效標識符。有效標識符包含Unicode字母、$、_和數字0-9。但是不能以數字開頭。當我們在聲明變量的時候要注意這些規則。

在使用點訪問器也要注意屬性名的有效性。點訪問器只在有效的標識符的情況下訪問才有結果。如果該屬性名以數字開頭或者只包含數字，再或者包含-符號，就不能使用點訪問器。

這個時候我們就得使用方括號訪問器了。

//?Create?an?object: myObj?=?{1:?'First?property','first-name':?'Bruce', }//?Try?to?use?dot?notation //?to?access?properties?on?"myObj". console.log(myObj.1) //?Output: //?SyntaxError:?Unexpected?tokenconsole.log(myObj.first-name) //?Output: //?NaN//?Try?to?use?bracket?notation //?to?access?properties?on?"myObj". console.log(myObj['1']) //?Output: //?'First?property'console.log(myObj[1]) //?Output: //?'First?property'console.log(myObj['first-name']) //?Output: //?'Bruce'

方括號

第二種訪問對象屬性的方式就是方括號表示法。顧名思義就是通過方括號去訪問，和點號有點類似。但是又有很大的區別。

首先我們給屬性名加上引號，單引號或者雙引號都可以。然后給它們整體用方括號包起來放在對象的后面。

方括號訪問器也支持一級以上的屬性訪問。和點號類似。如果遇到屬性值為數組的情況，則通過方括號加索引值得方式來獲取該變量。

//?Create?an?object: const?myObj?=?{name:?'Bruce?Thomas?Wayne',alias:?'Batman',affiliation:?['Batman?Family',?'Justice?League',?'Outsiders',?'Guild?of?Detection'],status:?{alignment:?'good',occupation:?'businessman'} }//?Accessing?object?properties?with?bracket?notation: //?First:?name?of?the?object. //?Second:?name?of?the?property?to?access. //?Note:?property?name?must?be?wrapped?with?quotes //?and?then?with?square?brackets. console.log(myObj['name']) //?Output: //?'Bruce?Thomas?Wayne'//?Accessing?deeper?object?properties: //?Access?the?"alignment"?property?that?exists //?in?nested?object?assigned?to?"status"?property console.log(myObj['status']['alignment']) //?Output: //?'good'//?Accessing?array?items?in?objects: //?Access?the?second?item?inside?the?array //?assigned?to?"affiliation"?property. console.log(myObj['affiliation'][1]) //?Output: //?'Justice?League'

有趣的一點是方括號支持通過計算的屬性名進行訪問。簡而言之就是你一開始可能并不知道該屬性名，但是之后這個屬性名被存在某一個變量中，你可以引用此變量來訪問與變量值匹配的屬性。

注意區別在于，變量名放在方括號里是不需要加引號的。

//?Create?an?object: const?myObj?=?{name:?'James?Howlett',alias:?'Wolverine',status:?{alignment:?'good'} }//?Assign?a?property?you?want?to?access?to?a?variable: const?myProp?=?'alias'//?Use?the?variable?to?access?specific?property?("alias"): //?Referencing?"myProp"?will?return?value?"alias", //?which?will?be?used?to?access?the?same?property?("alias"). //?I.e.:?myObj[myProp]?=>?myObj['alias'] console.log(myObj[myProp]) //?Output: //?'Wolverine'

對象分解法

最后一種訪問對象屬性的方式就是對象分解法。可能很少有人用到。作為ES6規范的一部分，解構最近被加到JavaScript中來。由于它的簡單易用，受到廣大開發者的喜愛。

經常在聲明變量的時候用到。在賦值運算的左邊使用大括號包起屬性的名稱，右邊即為對象。通過這種方式將指定的屬性的值來給變量賦值。

//?Create?an?object: const?myObj?=?{name:?'Unknown',alias:?'The?Joker',affiliation:?['Black?Glove',?'Injustice?Gang',?'Injustice?League',?'Joker?League?of?Anarchy',?'Justice?League?of?Arkham'],status:?{alignment:?'bad',occupation:?'criminal'} }//?Extract?the?value?of?"alias"?property: const?{?alias?}?=?myObj//?Log?the?value?of?new?"alias"?variable: console.log(alias) //?Output: //?'The?Joker'

還可以同時給多個屬性解構，屬性名稱之間通過逗號隔開。

//?Create?an?object: const?myObj?=?{name:?'Dr.?Reed?Richards',alias:?'Mister?Fantastic',affiliation:?'Fantastic?Four',status:?{alignment:?'good'} }//?Use?object?destructuring?to?assign?multiple?variables: //?Desctructure?"name",?"alias",?"affiliation"?and?"status". const?{?name,?alias,?affiliation,?status?}?=?myObj//?Log?the?values?of?new?variables: console.log(name) //?Output: //?'Dr.?Reed?Richards'console.log(alias) //?Output: //?'Mister?Fantastic'console.log(affiliation) //?Output: //?'Fantastic?Four'console.log(status) //?Output: //?{?alignment:?'good'?}

使用解構的方式為變量賦值變得如此簡單。但是如果你想給一個變量名不屬性名相同的變量賦值，怎么辦？也是可以的，對象解構允許你給變量指定別名。這樣你就可以通過別名引用這個變量。

使用方式就是在左側的屬性名的后面通過:隔開。

//?Create?an?object: const?myObj?=?{name:?'Bruce?Banner',alias:?'Hulk',affiliation:?['S.H.I.E.L.D.'],status:?{alignment:?'good'} }//?Extract?the?value?of?"name"?property //?and?assign?it?to?variable?called?"realName"?(new?alias). const?{?name:?realName?}?=?myObj//?Use?new?alias?"realName"?to?get?the?value console.log(realName) //?Output: //?'Bruce?Banner'

如果你想從對象解構的屬性中同時改變多個變量名，方法類似。只要在每個屬性名的后面增加新的變量名，然后用:隔開即可。

//?Create?an?object: const?myObj?=?{name:?'Oliver?Jonas?Queen',alias:?'Green?Arrow',affiliation:?['Justice?League',?'Justice?Society?International'],status:?{alignment:?'good'} }//?Change?multiple?variable?names: //?Change?variable?for?"name"?to?"realName". //?Change?variable?for?"alias"?to?"heroName". //?Change?variable?for?"affiliation"?to?"connection". const?{?name:?realName,?alias:?heroName,?affiliation:?connection?}?=?myObj//?Log?all?values?using?new?variable?names: console.log(realName) //?Output: //?'Oliver?Jonas?Queen'console.log(heroName) //?Output: //?'Green?Arrow'console.log(connection) //?Output: //?[?'Justice?League',?'Justice?Society?International'?]

對象解構使用起來很爽吧，但是如果你訪問的屬性不存在會怎么樣？有一種方式你可以做的是提供一個默認值。在屬性名不存在的時候，獲取的就是默認值。

我們將默認值通過=加到屬性名的后面，如果這個時候又為屬性名增加別名，那么就加在別名的后面。

//?Create?an?object: const?myObj?=?{name:?'Richard?John?Grayson',alias:?'Nightwing',status:?{alignment:?'good'} }//?Deconstruct?the?"name"?property //?and?add?default?value?in?case?it?doesn't?exist. const?{?name?=?'Anonymous'?}?=?myObj//?Log?the?value?of?name console.log(name) //?Output: //?'Richard?John?Grayson'//?Deconstruct?the?"name"?property //?and?"affiliation"?property, //?change?it?to?"connections"?and?add?default?value //?in?case?"affiliation"?property?doesn't?exist. const?{?name,?affiliation:?connections?=?'No?connections'?}?=?myObj//?Log?the?value?of?new?variable?"connections": console.log(connections) //?Output: //?'No?connections'

解構的時候遇到計算屬性怎么辦？

和方括號訪問器類似，對象解構也支持屬性是一個變量的情況。除了使用方括號將屬性名包起來以外，值得一提的是，這個時候你必須要為它指定一個別名，否則會出現語法錯誤。

//?Create?an?object: const?myObj?=?{name:?'Max?Eisenhardt',alias:?'Magneto',status:?{alignment:?'bad'},creators:?['Stan?Lee',?'Jack?Kirby'] }//?Assign?a?property?you?want?to?access?to?a?variable: const?myProp?=?'name'//?Use?the?variable?to?access?specific?property?("name") //?and?also?create?alias?for?it: //?Referencing?"myProp"?will?now?return?value?"name", //?which?will?be?used?to?access?the?"name"?property. const?{?[myProp]:?name?}?=?myObj//?Log?the?value?of?new?variable?"name": console.log(name) //?Output: //?'Wolverine'//?Use?computed?property?name?with?default?value: const?myProp?=?'powers'//?Use?the?variable?to?access?specific?property?("powers") //?and?create?alias?"abilities"?for?it. //?If?the?property?doesn't?exist,?use?'Unknown' //?as?the?default?value?for?the?new?variable. const?{?[myProp]:?abilities?=?'Unknown'?}?=?myObj//?Log?the?value?of?new?variable?"abilities": console.log(abilities) //?Output: //?'Unknown'

結論：以上三種訪問對象屬性的方式：點號和方括號和對象分解的方式。具體采用哪種，我們平時使用的時候根據具體情況而定，并沒有什么好壞之分。尤其要注意每種使用方式的邊緣情況，以上都有說到。

總結

以上是生活随笔為你收集整理的访问对象的属性，你知道有哪些方法？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。