相信对象对于每个使用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'

结论：以上三种访问对象属性的方式：点号和方括号和对象分解的方式。具体采用哪种，我们平时使用的时候根据具体情况而定，并没有什么好坏之分。尤其要注意每种使用方式的边缘情况，以上都有说到。

访问对象的属性，你知道有哪些方法？

访问对象属性介绍

点号

方括号

对象分解法

热门文章

最新文章

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

访问对象的属性，你知道有哪些方法？

访问对象属性介绍

点号

方括号

对象分解法

热门文章

最新文章

相关电子书

相关实验场景