Objetos são uma área que todo desenvolvedor de JavaScript deve conhecer muito bem. O acesso às propriedades do objeto também pertence a esta área. Neste tutorial, você aprenderá como acessar as propriedades do objeto de três maneiras. Você aprenderá como usar a notação de ponto, notação de colchetes e desestruturação.
Introdução a como acessar propriedades de objetos
Objetos são um dos tipos de dados em JavaScript. Eles permitem que você armazene dados em pares de valores-chave. Essas “chaves” nesses pares também são chamadas de propriedades. Se você ainda não está familiarizado com objetos , pode considerá-los como variáveis . Essas variáveis existem apenas no objeto que as contém, e não em qualquer lugar fora desses objetos.
Em JavaScript, existem várias maneiras de acessar uma dessas propriedades. Estas são notação de pontos, notação de colchetes e desestruturação. A notação de ponto às vezes também é chamada de acessador de propriedade de ponto. Outro nome para a notação de colchetes é acesso de propriedade de colchetes. Há uma coisa importante a ser mencionada.
Todas essas formas pressupõem que você saiba o nome da propriedade que deseja acessar. Se você não sabe, nada está perdido. Você pode fazer loops para iterar sobre o objeto para obter todas as propriedades, incluindo a que deseja. Mas agora, vamos dar uma olhada nessas três maneiras que você pode usar para acessar as propriedades do objeto.
Notação de ponto
A notação de ponto, ou acessador de propriedade de ponto, é provavelmente a forma mais popular de acessar propriedades de objeto em JavaScript. Este método é muito fácil de aprender e também fácil de usar. A sintaxe é a seguinte. Primeiro, você especifica algum objeto. Em segundo lugar, você especifica o nome da propriedade. Entre o objeto e o nome da propriedade há um ponto ( .).
Você pode usar o mesmo processo também para acessar propriedades mais profundas. Nesse caso, você encadeia várias propriedades. Você os acorrenta da maneira como estão aninhados. Portanto, a propriedade mais superficial virá primeiro, logo após o nome do objeto. A propriedade mais profunda virá como a última: obj.shallowProp.deeperProp.DeepestProp.
Digamos que você deseja acessar uma propriedade cujo valor é uma matriz. Você deseja acessar um item específico nessa matriz. Nesse caso, você pode fazer o que faria normalmente se o array fosse uma variável. Você usa a notação de ponto para acessar a propriedade desejada. Depois disso, você usa colchetes e índice para obter o item na matriz desejada.
// 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'
console.log(myObj.alias)
// Output:
// 'Iron Man'
// Accessing deeper object properties:
// Access the "current" property that exists
// in nested object assigned to "affiliation" property
console.log(myObj.affiliation.current)
// Output:
// 'Avengers'
// Accessing array items in objects:
// Access the first item inside the array
// assigned to "creators" property.
console.log(myObj.creators[0])
// Output:
// 'Stan Lee'
Notação de pontos e nomes de propriedades válidos
Em JavaScript, existem regras que dizem o que é e o que não é um identificador válido. Um identificador válido pode conter letras Unicode, $, _, e dígitos 0-9. No entanto, não pode começar com um dígito. Seguir essas regras é necessário, especialmente quando você deseja declarar novas variáveis.
Essas regras também são importantes quando você deseja acessar as propriedades do objeto. Isso é especialmente verdadeiro para a notação de pontos. A notação de pontos funciona apenas com identificadores válidos. Não funcionará se a propriedade em questão violar essas regras. Por exemplo, se ele começa com um número ou contém apenas um número. Ou, se contiver -.
Se você quiser acessar alguma propriedade que viole essas regras, não use a notação de ponto. Em vez disso, use a notação de colchetes. Dessa forma, você ainda poderá trabalhar com essa propriedade normalmente. Você aprenderá sobre a notação de colchetes na próxima seção.
// 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'
Notação de colchetes
A segunda maneira que você pode usar para acessar as propriedades do objeto é a notação de colchetes. A principal característica deste método são os colchetes. A sintaxe é semelhante à notação de ponto. No entanto, existem algumas diferenças importantes. Você novamente começa com o nome do objeto com o qual está trabalhando.
Em segundo lugar, vem o nome da propriedade. Aqui, você deve envolver o nome da propriedade entre aspas e colchetes. Não importa se você usa aspas simples ou duplas. O que importa é que você os use para envolver o nome da propriedade. Então, você o envolve com colchetes e o coloca após o objeto. Nenhum ponto entre eles.
A notação de colchetes também permite acessar propriedades mais profundas. Isso funciona de forma semelhante à notação de ponto. Todas as propriedades são encadeadas, desde as mais rasas até as mais profundas. No caso de colchetes, não há pontos entre as propriedades. Além disso, você deve envolver todas as propriedades com aspas e colchetes.
Acessar itens dentro de matrizes atribuídas a propriedades funciona de maneira semelhante. Primeiro, especifique o nome da propriedade e envolva-o com aspas e colchetes. Em seguida, adicione um par adicional de colchetes com o índice do item que deseja acessar.
// 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'
Notação de colchetes e propriedades de objetos calculados
Uma coisa interessante que a notação de colchetes permite é usar nomes de propriedades computadas. Esses nomes de propriedade podem não ser conhecidos no início, mas posteriormente, ou no tempo de execução. Um exemplo pode ser um nome de propriedade armazenado dentro de uma variável. Você pode fazer referência a essa variável para acessar a propriedade que corresponde ao valor da variável.
Esta variável pode ser indefinida no início e atribuída posteriormente. Isso não importa se você usar no momento certo. Usar propriedades de objeto computado com notação de colchetes é semelhante ao que você faria normalmente. A diferença é que, agora, você omite as aspas. Você coloca o nome da variável entre os colchetes, sem eles.
// 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'
Desestruturação de objetos
A desestruturação de objetos é a última forma de acessar as propriedades dos objetos. Também é o mais novo. A notação de ponto e colchete existe há muito tempo. A destruição foi adicionada ao JavaScript recentemente como parte da especificação ES6. No entanto, rapidamente se tornou muito popular entre os desenvolvedores de JavaScript devido à simplicidade e usabilidade.
Você o usa quando declara uma nova variável. No lado esquerdo da atribuição, você especifica o nome da propriedade e envolve-o com chaves. No lado direito, você faz referência ao objeto com o qual deseja trabalhar. Isso atribuirá à variável o valor da propriedade que você especificou.
// 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'
// Extract the value of "affiliation" property:
const { affiliation } = myObj
// Log the value of new "affiliation" variable:
console.log(affiliation)
// Output:
// [
// 'Black Glove',
// 'Injustice Gang',
// 'Injustice League',
// 'Joker League of Anarchy',
// 'Justice League of Arkham'
// ]
// Extract the value of "status" property:
const { status } = myObj
// Log the value of new "status" variable:
console.log(status)
// Output:
// { alignment: 'bad', occupation: 'criminal' }
Destruindo propriedades múltiplas
Você pode usar a desestruturação de objetos para “desestruturar” várias propriedades. Dito de outra forma, para atribuir várias variáveis ao mesmo tempo. Para fazer isso, você adiciona propriedades adicionais dentro das chaves no lado esquerdo da atribuição. Essas propriedades devem ser separadas por vírgulas.
// 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' }
Nomes de variáveis personalizadas e aliases
Atribuir valores a variáveis com desestruturação de objetos é muito fácil. E se você quiser usar um nome de variável diferente do nome da propriedade? Você pode. A desestruturação do objeto permite que você especifique um alias para a variável. Você pode usar este alias para fazer referência à variável usando um nome diferente do da propriedade.
Quando você deseja criar um alias, você o especifica dentro das chaves no lado esquerdo da atribuição. Você adiciona dois pontos ( :) seguido pelo novo alias logo após o nome da propriedade. De agora em diante, você pode usar este alias quando quiser fazer referência a essa variável.
// 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'
// Extract the value of "alias" property
// and assign it to variable called "heroName" (new alias).
const { alias: heroName } = myObj
// Use new alias "heroName" to get the value
console.log(heroName)
// Output:
// 'Hulk'
Nomes de variáveis personalizadas (aliases) para várias propriedades
Assim como você pode alterar o nome da variável para uma propriedade, você pode alterá-lo para várias. O processo é o mesmo. Você deve adicionar dois pontos adicionais e um novo apelido dentro das chaves. Faça isso para cada propriedade para a qual deseja alterar o nome da variável.
// 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' ]
Desestruturação de objetos, aliases e valores padrão
A desestruturação de objetos pode ser legal, mas e se a propriedade que você deseja acessar não existir? Uma coisa que você pode fazer com a desestruturação de objetos é fornecer algum valor padrão. Se a propriedade não existir, a variável receberá este valor padrão. Caso contrário, será atribuído o valor existente.
Quando você deseja especificar o valor padrão para qualquer propriedade, você também o faz dentro das chaves. Você especifica o valor padrão após o nome da propriedade. Você também deve separar esses dois com sinal de igual ( =). Se houver um alias, o valor padrão virá depois do alias, por último.
// 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 "gender" property
// and add default value in case it doesn't exist.
const { gender = 'Unknown' } = myObj
// Log the value of "name":
console.log(gender)
// Output:
// 'Unknown'
// 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'
Desestruturação de objetos e propriedades computadas
Similarmente à notação de colchetes, a desestruturação de objetos também permite o uso de nomes de propriedades computadas. A forma de usar é a seguinte. Envolva o nome da variável, que contém o nome da propriedade, com colchetes e coloque-o dentro das chaves. Uma coisa a lembrar é que você deve especificar um alias. Caso contrário, você obterá SyntaxError.
// 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'
Conclusão: como acessar as propriedades do objeto em JavaScript de três maneiras
Estas são três maneiras de acessar as propriedades do objeto em JavaScript: notação de ponto e colchete e desestruturação do objeto. Espero que este tutorial tenha ajudado você a entender como todos eles funcionam e como usá-los. Agora, encontre aquele com o qual você se sente mais confortável e comece a usá-lo. Lembre-se de que não existem maneiras boas ou ruins de acessar as propriedades.