Artigo original: JavaScript Object Keys Tutorial – How to Use a JS Key-Value Pair
Você pode agrupar os dados relacionados em uma única estrutura de dados usando um objeto JavaScript, como este:
const mesa = {
altura: "1 metro e 20",
peso: "30 libras",
cor: "marrom",
material: "madeira",
};
Um objeto contém propriedades ou pares chave-valor. O objeto mesa
acima tem quatro propriedades. Cada propriedade tem um nome, também chamado de chave, e um valor correspondente.
Por exemplo, a chave altura
tem o valor de "1 metro e 20". Juntos, a chave e o valor formam uma única propriedade.
altura: "1 metro e 20",
O objeto mesa
contém dados sobre uma mesa. Na verdade, essa é uma razão pela qual você usaria um objeto do JavaScript: para armazenar dados. Também é simples recuperar os dados que você armazena em um objeto. Esses aspectos tornam os objetos muito úteis.
Este artigo trará informações sobre os objetos em JavaScript:
- como criar um objeto
- como armazenar dados em um objeto
- e recuperar dados a partir dele.
Comecemos pela criação de um objeto.
Como criar um objeto em JavaScript
Vou criar um objeto chamado pizza abaixo e acrescentar a ele pares chave-valor.
const pizza = {
sabor: "queijo",
molho: "marinara",
tamanho: "pequeno"
};
As chaves estão à esquerda dos dois pontos :
e os valores estão à direita dele. Cada par chave-valor é uma propriedade
. Há três propriedades nesse exemplo:
- A chave sabor tem um valor "queijo".
- A chave molho tem um valor "marinara".
- A chave tamanho tem um valor "pequeno".
Cada propriedade é separada por uma vírgula. As propriedades, juntas, ficam cercadas por chaves {}
.
Essa é a sintaxe básica do objeto. Há, porém, algumas regras a serem seguidas ao criar objetos em JavaScript.
Chaves de objetos em JavaScript
Cada chave em seu objeto do JavaScript deve ser uma string, símbolo ou número.
Veja com atenção o exemplo abaixo. Os nomes de chave 1
e 2
são, na verdade, transformados em strings.
const carrinhoCompras = {
1: "maçã",
2: "laranja"
};
É uma diferença deixada clara quando se imprime o objeto.
console.log(carrinhoCompras);
//Resultado: { '1': 'maçã', '2': 'laranja' }
Há outra regra a ter em mente sobre nomes de chaves: se seu nome de chave tiver espaços, você precisa deixá-lo entre aspas.
Dê uma olhada no objeto desenvolvedor
abaixo. Observe o último nome de chave, "nome do projeto atual". Esse nome de chave contém espaços. Portanto, eu o deixei entre aspas.
const desenvolvedor = {
nome: "Phil",
idade: 21,
desenvolvedorBackend: true,
linguagens: ["Python", "JavaScript", "Java", "C++"],
"nome do projeto atual": "O Incrível aplicativo"
};
Valores de objetos em JavaScript
Um valor, por outro lado, pode ser qualquer tipo de dado, incluindo um array, número ou booleano. Os valores no exemplo acima contêm estes tipos: string, inteiro, booleano e array.
Você pode até usar uma função como um valor. Nesse caso, ela é conhecida como método. sons()
, no objeto abaixo, é um exemplo.
const animal = {
tipo: "gato",
nome: "gatinho",
sons() { console.log("miau miau") }
};
Agora, vamos supor que você queira adicionar ou excluir um par chave-valor ou que, simplesmente, você queira recuperar o valor de um objeto.
Você pode fazer essas coisas usando a notação de ponto ou de colchetes, sobre as quais falaremos em seguida.
Como a notação de ponto e a notação de colchetes funcionam em JavaScript
A notação de ponto e a notação de colchetes são duas maneiras de acessar e usar as propriedades de um objeto. É provável que você use a notação de pontos com mais frequência. Por isso, vamos começar com ela.
Como adicionar um par chave-valor com notação de pontos em JavaScript
Vou criar um objeto vazio abaixo, chamado livro
.
const livro = {};
Para adicionar um par chave-valor usando a notação de ponto, use a sintaxe:
nomeDoObjeto.nomeDaChave = valor
Esse é o código para adicionar a chave (autor) e o valor ("Jane Smith") ao objeto livro
:
livro.autor = "Jane Smith";
Aqui está um desdobramento do código acima:
livro
é o nome do objeto- . (ponto)
autor
é o nome da chave- = (igual)
- "Jane Smith" é o valor
Quando eu imprimir o objeto livro
, verei o novo par chave-valor adicionado.
console.log(livro);
//Resultado: { autor: 'Jane Smith' }
Vou adicionar outro par chave-valor ao objeto livro
.
livro.anoPublicacao = 2006;
O objeto livro
tem agora duas propriedades.
console.log(livro);
//Resultado: { autor: 'Jane Smith', anoPublicacao: 2006 }
Como acessar dados em um objeto JavaScript usando a notação de ponto
Você também pode usar a notação de ponto em uma chave para acessar o valor relacionado.
Considere este objeto jogadorBasquete
.
const jogadorBasquete = {
nome: "James",
mediaPontosPorJogo: 20,
altura: "1,90 m",
posicao: "ala-armador"
};
Digamos que você queira recuperar o valor "ala-armador". Esta é a sintaxe a ser usada:
nomeDoObjeto.nomeDaChave
Vamos utilizar essa sintaxe para obter e imprimir o valor "ala-armador".
console.log(jogadorBasquete.posicao);
//Resultado: ala-armador
Aqui está um desdobramento do código acima:
- jogadorBasquete é o nome do objeto
- . (ponto)
- posicao é o nome da chave
Aqui temos outro exemplo:
console.log(jogadorBasquete.nome);
//Resultado: James
Como excluir um par chave-valor em JavaScript
Para excluir um par chave-valor, use o operador de exclusão. Esta é a sintaxe:
delete nomeObjeto.nomeChave
Assim, para apagar a chave altura
e seu valor do objeto jogadorBasquete, você escreveria este código:
delete jogadorBasquete.altura;
Como resultado, o objeto jogadorBasquete agora tem três pares chave-valor.
console.log(jogadorBasquete);
//Resultado: { nome: 'James', mediaPontosPorJogo: 20, posicao: 'ala-armador' }
É provável que você use frequentemente a notação de ponto, embora haja certos requisitos a serem observados.
Ao utilizar a notação de ponto, os nomes de chave não podem conter espaços, hifens, ou começar com um número.
Por exemplo, digamos que eu tente adicionar uma chave que contém espaços usando a notação de pontos. Vou receber um erro.
jogadorBasquete.porcentagem de acertos = "75%";
//Resulta em um erro
Portanto, a notação de pontos não funcionará em todas as situações. É por isso que existe outra opção: a notação de colchetes.
Como adicionar um par chave-valor usando notação de colchetes em JavaScript
Assim como a notação de ponto, você pode usar a notação de colchetes para adicionar um par chave-valor a um objeto.
A notação de colchetes oferece mais flexibilidade do que a notação de ponto. Isso porque os nomes de chave podem incluir espaços e hifens, podendo também começar com números.
Vou criar um objeto funcionario
abaixo.
const funcionario = {};
Agora, quero adicionar um par chave-valor usando a notação de colchetes. Esta é a sintaxe:
nomeDoObjeto["nomeDaChave"] = valor
Então, é assim que eu adicionaria a chave (ocupação
) e o valor (vendas
) ao objeto do funcionário:
funcionario["ocupação"] = "vendas";
Aqui está um desdobramento do código acima:
funcionario
é o nome do objeto"ocupação"
é o nome da chave- = (igual)
"vendas"
é o valor
Abaixo estão mais alguns exemplos que utilizam a flexibilidade da notação de colchetes para adicionar uma variedade de pares chave-valor.
//Acrescentar um nome de chave com várias palavras
funcionario["viaja frequentemente"] = true;
//Adicionar um nome de chave que inclui um hífen
funcionario["Primeiro-território"] = "Chicago";
//Adicionar um nome de chave que comece com um número
funcionario["25"] = "total de clientes";
Quando imprimo o objeto funcionário, esta é a aparência:
{
'25': 'total de clientes',
ocupacao: 'vendas',
'viaja frequentemente': true,
'Primeiro-território': 'Chicago'
}
Com essa informação em mente, podemos adicionar a chave "porcentagem de acertos"
ao objeto jogadorBasquete
abaixo.
const jogadorBasquete = {
nome: "James",
mediaPontosPorJogo: 20,
altura: "1,90 m",
posicao: "ala-armador"
};
Você deve se lembrar que a notação de ponto nos deixou com um erro quando tentamos adicionar uma chave que incluía espaços.
jogadorBasquete.porcentagem de acertos = "75%";
//Resulta em um erro
A notação de colchetes, no entanto, evita esses erros, como você pode ver aqui:
jogadorBasquete["porcentagem de acertos"] = "75%";
Este é o resultado quando eu imprimo o objeto:
{
nome: 'James',
mediaPontosPorJogo: 20,
altura: '1,90 m',
posicao: 'ala-armador',
'porcentagem de acertos': '75%'
}
Como acessar dados em um objeto do JavaScript usando a notação de colchetes
Você também pode usar a notação de parênteses em uma chave para acessar o valor relacionado.
Vamos recordar do objeto animal
do início do artigo.
const animal = {
tipo: "gato",
nome: "gatinho",
sons() { console.log("miau miau") }
};
Vamos obter o valor associado à chave nome
. Para isso, envolva o nome da chave entre aspas e coloque-a entre colchetes. Esta é a sintaxe:
nomeDoObjeto["nomeDaChave"]
Aqui está o código que você escreveria com a notação de colchetes:
animal["nome"];
Este é um desdobramento do código acima:
animal
é o nome do objeto["nome"]
é o nome da chave entre colchetes
Aqui está outro exemplo.
console.log(animal["sons"]());
//Resultado:
miau miau
undefined
Note que sons() é um método. Por isso, acrescentei os parênteses no final para invocá-lo.
É assim que você invocaria um método usando a notação de ponto.
console.log(animal.sons());
//Resultado:
miau miau
undefined
Métodos em objetos do JavaScript
Agora, você já sabe como acessar propriedades específicas. Se, no entanto, você quiser todas as chaves ou todos os valores de um objeto, como faria?
Há dois métodos que darão as informações de que você precisa.
const corredor = {
nome: "Jessica",
idade: 20,
milhasPorSemana: 40,
corrida: "maratona"
};
Use o método Object.keys()
para recuperar todos os nomes de chave de um objeto.
Esta é a sintaxe:
Object.keys(nomeDoObjeto)
Podemos usar esse método no objeto corredor
acima.
Object.keys(corredor);
Se você imprimir o resultado, receberá um array das chaves do objeto.
console.log(Object.keys(corredor));
//Resultado: [ 'nome', 'idade', 'milhasPorSemana', 'corrida' ]
Do mesmo modo, você pode usar o método Object.values()
para obter todos os valores de um objeto. Esta é a sintaxe:
Object.values(nomeObjeto)
Agora, vamos obter todos os valores do objeto corredor
.
console.log(Object.values(corredor));
//Resultado: [ 'Jessica', 20, 40, 'maratona' ]
Tratamos de muitas coisas. Aqui está um resumo das principais ideias:
Objetos
- Usamos objetos para armazenar dados como propriedades (pares chave-valor).
- Os nomes de chave devem ser strings, símbolos ou números.
- Os valores podem ser de qualquer tipo.
Acessar propriedades dos objetos
- Notação de pontos:
nomeDoObjeto.nomeDaChave
- Notação de colchetes:
nomeDoObjeto["nomeDaChave"]
Excluir uma propriedade
delete nomeDoObjeto.nomeDaChave
Você pode fazer muito com objetos. Agora, você conhece o básico para tirar proveito desse tipo de dados poderoso do JavaScript.
A autora escreve sobre aprender a programar e sobre as melhores maneiras de se fazer isso em seu blog, amymhaddad.com. Ela também usar o Twitter para falar sobre programação, aprendizagem e produtividade: @amymhaddad.