相信对象对于每个使用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 token
console.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'
结论：以上三种访问对象属性的方式：点号和方括号和对象分解的方式。具体采用哪种，我们平时使用的时候根据具体情况而定，并没有什么好坏之分。尤其要注意每种使用方式的边缘情况，以上都有说到。
获取更多作者文章，关注公众号太空编程
网友评论