Propriedades JavaScript

Índice

    Mostrar índice

As propriedades são a parte mais importante de qualquer objeto JavaScript.

Propriedades JavaScript

Propriedades são os valores associados a um objeto JavaScript.

Um objeto JavaScript é uma coleção de propriedades não ordenadas.

Geralmente, as propriedades podem ser alteradas, adicionadas e excluídas, mas algumas são somente leitura.

Acessando Propriedades JavaScript

A sintaxe para acessar a propriedade de um objeto é:

objectName.property      // person.age

ou

objectName["property"]   // person["age"]

ou

objectName[expression]   // x = "age"; person[x]

A expressão deve ser avaliada como um nome de propriedade.

Exemplo 1

person.firstname + " is " + person.age + " years old.";

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>
<p>Access a property with .property:</p>

<p id="demo"></p>

<script>
const person = {
  firstname: "John",
  lastname: "Doe",
  age: 50,
  eyecolor: "blue"
};

document.getElementById("demo").innerHTML = person.firstname + " is " + person.age + " years old.";
</script>

</body>
</html>

Exemplo 2

person["firstname"] + " is " + person["age"] + " years old.";

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>
<p>Access a property with ["property"]:</p>

<p id="demo"></p>

<script>
const person = {
  firstname: "John",
  lastname: "Doe",
  age: 50,
  eyecolor: "blue"
};

document.getElementById("demo").innerHTML = person["firstname"] + " is " + person["age"] + " years old.";
</script>

</body>
</html>

JavaScript para...em Loop

A instrução JavaScript for...in percorre as propriedades de um objeto.

Sintaxe

for (let variable in object) {
      // code to be executed
 }

O bloco de código dentro do loop for...in será executado uma vez para cada propriedade.

Percorrendo as propriedades de um objeto:

Exemplo

const person = {
  fname:" John",
  lname:" Doe",
  age: 25
};

for (let x in person) {
    txt += person[x];
 }

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>
<p>Looping object property values:</p>

<p id="demo"></p>

<script>
const person = {
  fname:"John",
  lname:"Doe",
  age:25
}; 

let txt = "";
for (let x in person) {
  txt += person[x] + " ";
}

document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

Adicionando novas propriedades

Você pode adicionar novas propriedades a um objeto existente simplesmente atribuindo um valor a ele.

Suponha que o objeto pessoa já exista - você pode então atribuir novas propriedades:

Exemplo

person.nationality = "English";

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>
<p>Add a new property to an existing object:</p>

<p id="demo"></p>

<script>
const person = {
  firstname: "John",
  lastname: "Doe",
  age: 50,
  eyecolor: "blue"
};

person.nationality = "English";
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.nationality + ".";
</script>

</body>
</html>

Excluindo Propriedades

A palavra-chave delete exclui uma propriedade de um objeto:

Exemplo

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

delete person.age;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>
<p>Deleting object properties.</p>

<p id="demo"></p>

<script>
const person = {
  firstname: "John",
  lastname: "Doe",
  age: 50,
  eyecolor: "blue"
};

delete person.age;

document.getElementById("demo").innerHTML =
person.firstname + " is " + person.age + " years old.";
</script>

</body>
</html>

ou exclua pessoa["idade"];

Exemplo

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

delete person["age"];

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>
<p>Deleting object properties.</p>

<p id="demo"></p>

<script>
const person = {
  firstname: "John",
  lastname: "Doe",
  age: 50,
  eyecolor: "blue"
};

delete person["age"];

document.getElementById("demo").innerHTML =
person.firstname + " is " + person.age + " years old.";
</script>

</body>
</html>

A palavra-chave delete exclui o valor da propriedade e a própria propriedade.

Após a exclusão, a propriedade não poderá ser usada antes de ser adicionada novamente.

O O operador delete foi projetado para ser usado nas propriedades do objeto. Não tem efeito sobre variáveis ou funções.

O operador delete não deve ser usado em objetos JavaScript predefinidos propriedades. Isso pode travar seu aplicativo.

Objetos aninhados

Os valores em um objeto podem ser outro objeto:

Exemplo

myObj = {
  name:"John",
  age:30,
    
  cars: {
    car1:"Ford",
      
  car2:"BMW",
    car3:"Fiat"
    }
}

Você pode acessar objetos aninhados usando a notação de ponto ou colchete:

Exemplo

myObj.cars.car2;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Access nested objects:</p>

<p id="demo"></p>

<script>
const myObj = {
  name: "John",
  age: 30,
  cars: {
  car1: "Ford",
  car2: "BMW",
  car3: "Fiat"
  }
}
document.getElementById("demo").innerHTML = myObj.cars.car2;
</script>

</body>
</html>

ou :

Exemplo

myObj.cars["car2"];

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Access nested objects:</p>

<p id="demo"></p>

<script>
const myObj = {
  name: "John",
  age: 30,
  cars: {
  car1: "Ford",
  car2: "BMW",
  car3: "Fiat"
  }
}
document.getElementById("demo").innerHTML = myObj.cars["car2"];
</script>

</body>
</html>

ou :

Exemplo

myObj["cars"]["car2"];

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Access nested objects:</p>

<p id="demo"></p>

<script>
const myObj = {
  name: "John",
  age: 30,
  cars: {
  car1: "Ford",
  car2: "BMW",
  car3: "Fiat"
  }
}
document.getElementById("demo").innerHTML = myObj["cars"]["car2"];
</script>

</body>
</html>

ou :

Exemplo

let p1 = "cars";
let p2 = "car2";
myObj[p1][p2];

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Access nested objects:</p>

<p id="demo"></p>

<script>
const myObj = {
  name: "John",
  age: 30,
  cars: {
  car1: "Ford",
  car2: "BMW",
  car3: "Fiat"
  }
}

let p1 = "cars";
let p2 = "car2";
document.getElementById("demo").innerHTML = myObj[p1][p2];
</script>

</body>
</html>

Matrizes e objetos aninhados

Os valores nos objetos podem ser matrizes e os valores nas matrizes podem ser objetos:

Exemplo

const myObj =
  {
  name: "John",
  age: 30,
    
  cars: [
    {name:"Ford", 
  models:["Fiesta", "Focus", "Mustang"]},
    
  {name:"BMW", models:["320", "X3", "X5"]},
      
  {name:"Fiat", models:["500", "Panda"]}
    ]
}

Para acessar arrays dentro de arrays, use um loop for-in para cada array:

Exemplo

for (let i in myObj.cars) {
  x += "<h1>" + myObj.cars[i].name 
  + "</h1>";
  for (let j in myObj.cars[i].models) {
    
  x += myObj.cars[i].models[j];
  }
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Nested JavaScript Objects and Arrays.</h2>

<p id="demo"></p>

<script>
let x = "";
const myObj = {
  name: "John",
  age: 30,
  cars: [
    {name:"Ford", models:["Fiesta", "Focus", "Mustang"]},
    {name:"BMW", models:["320", "X3", "X5"]},
    {name:"Fiat", models:["500", "Panda"]}
  ]
}

for (let i in myObj.cars) {
  x += "<h2>" + myObj.cars[i].name + "</h2>";
  for (let j in myObj.cars[i].models) {
    x += myObj.cars[i].models[j] + "<br>";
  }
}

document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Atributos de propriedade

Todas as propriedades têm um nome. Além disso, eles também têm um valor.

O valor é um dos atributos da propriedade.

Outros atributos são: enumerável, configurável e gravável.

Esses atributos definem como a propriedade pode ser acessada (é legível?, é é gravável?)

Em JavaScript, todos os atributos podem ser lidos, mas apenas o atributo value pode ser alterado (e somente se a propriedade for gravável).

( ECMAScript 5 possui métodos para obter e definir todas as propriedades atributos)

Propriedades do protótipo

Objetos JavaScript herdam as propriedades de seu protótipo.

A palavra-chave delete não exclui propriedades herdadas, mas se você excluir uma propriedade protótipo, afetará todos os objetos herdado do protótipo.