ES6 - Objetos

JavaScript suporta a extensão de tipos de dados. Objetos JavaScript são uma ótima maneira de definir tipos de dados personalizados.

A objecté uma instância que contém um conjunto de pares de valores-chave. Ao contrário dos tipos de dados primitivos, os objetos podem representar valores múltiplos ou complexos e podem mudar ao longo de sua vida. Os valores podem ser valores escalares ou funções ou mesmo array de outros objetos.

As variações sintáticas para definir um objeto são discutidas mais adiante.

Inicializadores de objeto

Como os tipos primitivos, os objetos têm uma sintaxe literal: curly bracesv({e}). A seguir está a sintaxe para definir um objeto.

var identifier = {
   Key1:value, Key2: function () { 
      //functions 
   }, 
   Key3: [“content1”,” content2”] 
}

O conteúdo de um objeto é chamado properties (ou membros), e as propriedades consistem em um name (ou chave) e value. Os nomes das propriedades devem ser strings ou símbolos, e os valores podem ser de qualquer tipo (incluindo outros objetos).

Como todas as variáveis ​​JavaScript, tanto o nome do objeto (que pode ser uma variável normal) e o nome da propriedade diferenciam maiúsculas de minúsculas. Você acessa as propriedades de um objeto com uma notação de ponto simples.

A seguir está a sintaxe para acessar as Propriedades do Objeto.

objectName.propertyName

Exemplo: inicializadores de objeto

var person = { 
   firstname:"Tom", 
   lastname:"Hanks", 
   func:function(){return "Hello!!"},    
}; 
//access the object values 
console.log(person.firstname)   
console.log(person.lastname) 
console.log(person.func())

O exemplo acima define uma pessoa-objeto. O objeto possui três propriedades. A terceira propriedade refere-se a uma função.

A seguinte saída é exibida na execução bem-sucedida do código acima.

Tom 
Hanks 
Hello!!

No ES6, atribuindo um valor de propriedade que corresponda a um nome de propriedade, você pode omitir o valor da propriedade.

Exemplo

var foo = 'bar' 
var baz = { foo } 
console.log(baz.foo)

O trecho de código acima define um objeto baz. O objeto tem uma propriedadefoo. O valor da propriedade é omitido aqui, pois o ES6 atribui implicitamente o valor da variável foo à chave foo do objeto.

A seguir está o ES5 equivalente ao código acima.

var foo = 'bar' 
var baz = { foo:foo } 
console.log(baz.foo)

A seguinte saída é exibida na execução bem-sucedida do código acima.

bar

Com essa sintaxe abreviada, o mecanismo JS procura no escopo contido por uma variável com o mesmo nome. Se for encontrado, o valor dessa variável é atribuído à propriedade. Se não for encontrado, um erro de referência é lançado.

O construtor Object ()

JavaScript fornece uma função construtora especial chamada Object()para construir o objeto. O novo operador é usado para criar uma instância de um objeto. Para criar um objeto, o novo operador é seguido pelo método construtor.

A seguir está a sintaxe para definir um objeto.

var obj_name = new Object(); 
obj_name.property = value;    
OR             
obj_name["key"] = value

A seguir está a sintaxe para acessar uma propriedade.

Object_name.property_key                    
OR              
Object_name["property_key"]

Exemplo

var myCar = new Object(); 
myCar.make = "Ford"; //define an object 
myCar.model = "Mustang"; 
myCar.year = 1987;  

console.log(myCar["make"]) //access the object property 
console.log(myCar["model"]) 
console.log(myCar["year"])

A seguinte saída é exibida na execução bem-sucedida do código acima.

Ford 
Mustang 
1987

Propriedades não atribuídas de um objeto são indefinidas.

Exemplo

var myCar = new Object(); 
myCar.make = "Ford"; 
console.log(myCar["model"])

A seguinte saída é exibida na execução bem-sucedida do código acima.

undefined

Note- Um nome de propriedade de objeto pode ser qualquer string JavaScript válida ou qualquer coisa que possa ser convertida em uma string, incluindo a string vazia. No entanto, qualquer nome de propriedade que não seja um identificador JavaScript válido (por exemplo, um nome de propriedade que tenha um espaço ou um hífen ou que comece com um número) só pode ser acessado usando a notação de colchetes.

As propriedades também podem ser acessadas usando um valor de string armazenado em uma variável. Em outras palavras, a chave de propriedade do objeto pode ser um valor dinâmico. Por exemplo: uma variável. O referido conceito é ilustrado no exemplo a seguir.

Exemplo

var myCar = new Object()  
var propertyName = "make"; 
myCar[propertyName] = "Ford"; 
console.log(myCar.make)

A seguinte saída é exibida na execução bem-sucedida do código acima.

Ford

Função de construtor

Um objeto pode ser criado usando as duas etapas a seguir -

Step 1 - Defina o tipo de objeto escrevendo uma função construtora.

A seguir está a sintaxe para o mesmo.

function function_name() { 
   this.property_name = value 
}

o ‘this’ palavra-chave refere-se ao objeto atual em uso e define a propriedade do objeto.

Step 2 - Crie uma instância do objeto com a nova sintaxe.

var Object_name= new function_name() 
//Access the property value  

Object_name.property_name

A nova palavra-chave invoca o construtor da função e inicializa as chaves de propriedade da função.

Example − Using a Function Constructor

function Car() { 
   this.make = "Ford" 
   this.model = "F123" 
}  
var obj = new Car() 
console.log(obj.make) 
console.log(obj.model)

O exemplo acima usa um construtor de função para definir um objeto.

A seguinte saída é exibida na execução bem-sucedida do código acima.

Ford 
F123

Uma nova propriedade sempre pode ser adicionada a um objeto previamente definido. Por exemplo, considere o seguinte snippet de código -

function Car() { 
   this.make = "Ford" 
} 
var obj = new Car() 
obj.model = "F123" 
console.log(obj.make) 
console.log(obj.model)

A seguinte saída é exibida na execução bem-sucedida do código acima.

Ford 
F123

O método Object.create

Os objetos também podem ser criados usando o Object.create()método. Ele permite que você crie o protótipo para o objeto que você deseja, sem ter que definir uma função de construtor.

Exemplo

var roles = { 
   type: "Admin", // Default value of properties 
   displayType : function() {  
      // Method which will display type of role 
      console.log(this.type); 
   } 
}  
// Create new role type called super_role 
var super_role = Object.create(roles); 
super_role.displayType(); // Output:Admin  

// Create new role type called Guest 
var guest_role = Object.create(roles); 
guest_role.type = "Guest"; 
guest_role.displayType(); // Output:Guest

O exemplo acima define um objeto -roles e define os valores padrão para as propriedades. Duas novas instâncias são criadas para substituir o valor das propriedades padrão do objeto.

A seguinte saída é exibida na execução bem-sucedida do código acima.

Admin 
Guest

A função Object.assign ()

o Object.assign()método é usado para copiar os valores de todas as propriedades próprias enumeráveis ​​de um ou mais objetos de origem para um objeto de destino. Ele retornará o objeto de destino.

A seguir está a sintaxe para o mesmo.

Object.assign(target, ...sources)

Example − Cloning an Object

"use strict" 
var det = { name:"Tom", ID:"E1001" }; 
var copy = Object.assign({}, det); 
console.log(copy);  
for (let val in copy) { 
   console.log(copy[val]) 
}

A seguinte saída é exibida na execução bem-sucedida do código acima.

Tom 
E1001

Example − Merging Objects

var o1 = { a: 10 }; 
var o2 = { b: 20 }; 
var o3 = { c: 30 }; 
var obj = Object.assign(o1, o2, o3); 
console.log(obj);  
console.log(o1);

A seguinte saída é exibida na execução bem-sucedida do código acima.

{ a: 10, b: 20, c: 30 } 
{ a: 10, b: 20, c: 30 }

Note- Ao contrário de copiar objetos, quando os objetos são mesclados, o objeto maior não mantém uma nova cópia das propriedades. Em vez disso, contém a referência às propriedades contidas nos objetos originais. O exemplo a seguir explica esse conceito.

var o1 = { a: 10 }; 
var obj = Object.assign(o1); 
obj.a++ 
console.log("Value of 'a' in the Merged object after increment  ") 
console.log(obj.a);  
console.log("value of 'a' in the Original Object after increment ") 
console.log(o1.a);

A seguinte saída é exibida na execução bem-sucedida do código acima.

Value of 'a' in the Merged object after increment 
11  
value of 'a' in the Original Object after increment 
11

Excluindo Propriedades

Você pode remover uma propriedade usando o operador delete. O código a seguir mostra como remover uma propriedade.

Exemplo

// Creates a new object, myobj, with two properties, a and b. 
var myobj = new Object; 
myobj.a = 5; 
myobj.b = 12; 

// Removes the ‘a’ property 
delete myobj.a; 
console.log ("a" in myobj) // yields "false"

A seguinte saída é exibida na execução bem-sucedida do código acima.

false

O trecho de código exclui a propriedade do objeto. O exemplo imprime falso porque o operador in não encontra a propriedade no objeto.

Comparando Objetos

Em JavaScript, os objetos são um tipo de referência. Dois objetos distintos nunca são iguais, mesmo que tenham as mesmas propriedades. Isso ocorre porque eles apontam para um endereço de memória completamente diferente. Apenas os objetos que compartilham uma referência comum produzem resultados verdadeiros na comparação.

Example 1 − Different Object References

var val1 = {name: "Tom"}; 
var val2 = {name: "Tom"}; 
console.log(val1 == val2)  // return false 
console.log(val1 === val2)  // return false

No exemplo acima, val1 e val2são dois objetos distintos que se referem a dois endereços de memória diferentes. Portanto, na comparação para igualdade, o operador retornará falso.

Example 2 − Single Object Reference

var val1 = {name: "Tom"}; 
var val2 = val1  

console.log(val1 == val2) // return true 
console.log(val1 === val2) // return true

No exemplo acima, os conteúdos em val1 são atribuídos a val2, ou seja, a referência das propriedades em val1 são compartilhadas com val2. Como os objetos agora compartilham a referência à propriedade, o operador de igualdade retornará true para dois objetos distintos que se referem a dois endereços de memória diferentes. Portanto, na comparação para igualdade, o operador retornará falso.

Desestruturação de objetos

O termo destructuringrefere-se a quebrar a estrutura de uma entidade. A sintaxe de atribuição de desestruturação em JavaScript torna possível extrair dados de arrays ou objetos em variáveis ​​distintas. O mesmo é ilustrado no exemplo a seguir.

Exemplo 1

Ao desestruturar um objeto, os nomes das variáveis ​​e os nomes das propriedades do objeto devem corresponder.

<script>
let student = {
   rollno:20,
   name:'Prijin',
   cgpa:7.2
}

//destructuring to same property name
   let {name,cgpa} = student
   console.log(name)
   console.log(cgpa)

//destructuring to different name
   let {name:student_name,cgpa:student_cgpa}=student
   console.log(student_cgpa)
   console.log("student_name",student_name)
</script>

A saída do código acima será como visto abaixo -

Prijin
7.2
7.2
student_name Prijin

Exemplo 2

Se a variável e a atribuição estiverem em duas etapas diferentes, a sintaxe do objeto de desestruturação será cercada por () como mostrado no exemplo ({rollno} = student) -

<script>
   let student = {
      rollno:20,
      name:'Prijin',
      cgpa:7.2
   }

   // destructuring to already declared variable
   let rollno;
   ({rollno} = student)
   console.log(rollno)

   // assign default values to variables

   let product ={ id:1001,price:2000} //discount is not product property
   let {id,price,discount=.10} = product
   console.log(id)
   console.log(price)
   console.log(discount)
</script>

A saída do código acima será conforme mencionado abaixo -

20
1001
2000
0.1

Exemplo 3

O exemplo abaixo mostra destructuring usando o rest operator e como destruir objetos aninhados.

<script>
   // rest operator with object destructuring
   let customers= {
      c1:101,
      c2:102,
      c3:103
   }

   let {c1,...others} = customers
   console.log(c1)
   console.log(others)

   //nested objects
   let emp = {
      id:101,
      address:{
         city:'Mumbai',
         pin:1234
      }
   }
   let {address} = emp;

   console.log(address)
   let {address:{city,pin}} = emp
   console.log(city)
</script>

A saída do código acima será conforme mencionado abaixo -

101
{c2: 102, c3: 103}
{city: "Mumbai", pin: 1234}
Mumbai