Resumo : neste tutorial, você aprenderá sobre objetos JavaScript e como manipular propriedades de objetos de maneira eficaz.
Introdução aos objetos JavaScript
Em JavaScript, um objeto é uma coleção não ordenada de pares chave-valor. Cada par de valores-chave é chamado de propriedade.
A chave de uma propriedade pode ser uma string. O valor de uma propriedade pode ser qualquer valor, por exemplo, uma string , um número , um array e até mesmo uma função .
JavaScript fornece muitas maneiras de criar um objeto. O mais comumente usado é usar a notação literal de objeto.
O exemplo a seguir cria um objeto vazio usando a notação literal de objeto:
let empty = {};
Linguagem de código: JavaScript ( javascript )
Para criar um objeto com propriedades, você usa key:value
entre chaves. Por exemplo, o seguinte cria um novo person
objeto:
let person = {
firstName: 'John',
lastName: 'Doe'
};
Linguagem de código: JavaScript ( javascript )
O person
objeto possui duas propriedades firstName
e lastName
com os valores correspondentes 'John'
e 'Doe'
.
Quando um objeto possui múltiplas propriedades, você usa uma vírgula ( ,
) para separá-las como no exemplo acima.
Acessando propriedades
Para acessar uma propriedade de um objeto, você usa uma de duas notações: a notação de ponto e a notação semelhante a uma matriz.
1) A notação de ponto (.)
O seguinte ilustra como usar a notação de ponto para acessar uma propriedade de um objeto:
objectName.propertyName
Linguagem de código: CSS ( css )
Por exemplo, para acessar a firstName
propriedade do person
objeto, você usa a seguinte expressão:
person.firstName
Linguagem de código: CSS ( css )
Este exemplo cria um person
objeto e mostra o nome e o sobrenome no console:
let person = {
firstName: 'John',
lastName: 'Doe'
};
console.log(person.firstName);
console.log(person.lastName);
Linguagem de código: JavaScript ( javascript )
2) Notação tipo array ( []
)
O seguinte ilustra como acessar o valor da propriedade de um objeto por meio da notação semelhante a um array:
objectName['propertyName']
Linguagem de código: CSS ( css )
Por exemplo:
let person = {
firstName: 'John',
lastName: 'Doe'
};
console.log(person['firstName']);
console.log(person['lastName']);
Linguagem de código: JavaScript ( javascript )
Quando o nome de uma propriedade contém espaços, você precisa colocá-lo entre aspas. Por exemplo, o address
objeto a seguir tem 'building no'
como propriedade:
let address = {
'building no': 3960,
street: 'North 1st street',
state: 'CA',
country: 'USA'
};
Linguagem de código: JavaScript ( javascript )
Para acessar a 'building no'
propriedade, você precisa usar a notação semelhante a um array:
address['building no'];
Linguagem de código: CSS ( css )
Se você usar a notação de ponto, receberá um erro:
address.'building no';
Linguagem de código: JavaScript ( javascript )
Erro:
SyntaxError: Unexpected string
Linguagem de código: JavaScript ( javascript )
Observe que não é uma boa prática usar espaços nos nomes das propriedades de um objeto.
A leitura de uma propriedade que não existe resultará em um arquivo undefined
. Por exemplo:
console.log(address.district);
Linguagem de código: CSS ( css )
Saída:
undefined
Linguagem de código: JavaScript ( javascript )
Modificando o valor de uma propriedade
Para alterar o valor de uma propriedade, você usa o operador de atribuição ( =
). Por exemplo:
let person = {
firstName: 'John',
lastName: 'Doe'
};
person.firstName = 'Jane';
console.log(person);
Linguagem de código: JavaScript ( javascript )
Saída:
{ firstName: 'Jane', lastName: 'Doe' }
Linguagem de código: CSS ( css )
Neste exemplo, alteramos o valor da firstName
propriedade do person
objeto de 'John'
para 'Jane'
.
Adicionando uma nova propriedade a um objeto
Ao contrário dos objetos em outras linguagens de programação, como Java e C# , você pode adicionar uma propriedade a um objeto após a criação do objeto.
A instrução a seguir adiciona a age
propriedade ao person
objeto e atribui 25 a ele:
person.age = 25;
Excluindo uma propriedade de um objeto
Para excluir uma propriedade de um objeto, você usa o delete
operador:
delete objectName.propertyName;
Linguagem de código: JavaScript ( javascript )
O exemplo a seguir remove a age
propriedade do person
objeto:
delete person.age;
Linguagem de código: JavaScript ( javascript )
Se você tentar acessar novamente a propriedade age, receberá um undefined
valor.
Verificando se existe uma propriedade
Para verificar se existe uma propriedade em um objeto, você usa o in
operador:
propertyName in objectName
O in
operador retorna true
se propertyName
existir no arquivo objectName
.
O exemplo a seguir cria um employee
objeto e usa o in
operador para verificar se as propriedades ssn
e employeeId
existem no objeto:
let employee = {
firstName: 'Peter',
lastName: 'Doe',
employeeId: 1
};
console.log('ssn' in employee);
console.log('employeeId' in employee);
Linguagem de código: JavaScript ( javascript )
Saída:
false
true
Linguagem de código: JavaScript ( javascript )
Resumo
- Um objeto é uma coleção de pares de valores-chave.
- Use a notação de ponto (
.
) ou notação semelhante a array ([]
) para acessar a propriedade de um objeto. - Use o
delete
operador para remover uma propriedade de um objeto. - Use o
in
operador para verificar se existe uma propriedade em um objeto.