ES6 - Obiekty

JavaScript obsługuje rozszerzanie typów danych. Obiekty JavaScript to świetny sposób na definiowanie niestandardowych typów danych.

Na objectto instancja zawierająca zestaw par klucz-wartość. W przeciwieństwie do pierwotnych typów danych obiekty mogą reprezentować wiele lub złożone wartości i mogą zmieniać się w czasie ich życia. Wartości mogą być wartościami skalarnymi lub funkcjami, a nawet tablicą innych obiektów.

Wariacje składniowe służące do definiowania obiektu są omówione dalej.

Inicjatory obiektów

Podobnie jak typy pierwotne, obiekty mają składnię dosłowną: curly bracesv({i}). Poniżej przedstawiono składnię definiowania obiektu.

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

Nazywa się zawartość obiektu properties (lub członków), a właściwości składają się z name (lub klucz) i value. Nazwy właściwości muszą być łańcuchami lub symbolami, a wartości mogą być dowolnego typu (w tym inne obiekty).

Podobnie jak wszystkie zmienne JavaScript, zarówno nazwa obiektu (która może być zwykłą zmienną), jak i nazwa właściwości uwzględniają wielkość liter. Dostęp do właściwości obiektu uzyskuje się za pomocą prostej notacji z kropką.

Poniżej przedstawiono składnię dostępu do właściwości obiektu.

objectName.propertyName

Przykład: inicjatory obiektów

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())

Powyższy przykład definiuje osobę obiektu. Obiekt ma trzy właściwości. Trzecia właściwość odnosi się do funkcji.

Poniższe dane wyjściowe są wyświetlane po pomyślnym wykonaniu powyższego kodu.

Tom 
Hanks 
Hello!!

W ES6, przypisując wartość właściwości, która jest zgodna z nazwą właściwości, możesz pominąć wartość właściwości.

Przykład

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

Powyższy fragment kodu definiuje obiekt baz. Obiekt posiada własnośćfoo. Wartość właściwości jest tutaj pomijana, ponieważ ES6 niejawnie przypisuje wartość zmiennej foo do klucza obiektu foo.

Poniżej znajduje się odpowiednik ES5 powyższego kodu.

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

Poniższe dane wyjściowe są wyświetlane po pomyślnym wykonaniu powyższego kodu.

bar

Przy tej skróconej składni silnik JS szuka w zakresie zawierającym zmiennej o tej samej nazwie. Jeśli zostanie znaleziony, wartość tej zmiennej jest przypisywana do właściwości. Jeśli nie zostanie znaleziony, zostanie zgłoszony błąd odwołania.

Konstruktor Object ()

JavaScript udostępnia specjalną funkcję konstruktora o nazwie Object()zbudować obiekt. Operator new służy do tworzenia instancji obiektu. Aby utworzyć obiekt, po operatorze new następuje metoda konstruktora.

Poniżej przedstawiono składnię definiowania obiektu.

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

Poniżej przedstawiono składnię dostępu do właściwości.

Object_name.property_key                    
OR              
Object_name["property_key"]

Przykład

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"])

Poniższe dane wyjściowe są wyświetlane po pomyślnym wykonaniu powyższego kodu.

Ford 
Mustang 
1987

Nieprzypisane właściwości obiektu są niezdefiniowane.

Przykład

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

Poniższe dane wyjściowe są wyświetlane po pomyślnym wykonaniu powyższego kodu.

undefined

Note- Nazwą właściwości obiektu może być dowolny prawidłowy ciąg JavaScript lub cokolwiek, co można przekształcić w ciąg, w tym pusty ciąg. Jednak każda nazwa właściwości, która nie jest prawidłowym identyfikatorem JavaScript (na przykład nazwa właściwości, która ma spację lub myślnik albo zaczyna się od cyfry) jest dostępna tylko przy użyciu notacji z nawiasami kwadratowymi.

Dostęp do właściwości można również uzyskać, używając wartości ciągu przechowywanej w zmiennej. Innymi słowy, klucz właściwości obiektu może być wartością dynamiczną. Na przykład: zmienna. Koncepcję tę ilustruje poniższy przykład.

Przykład

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

Poniższe dane wyjściowe są wyświetlane po pomyślnym wykonaniu powyższego kodu.

Ford

Funkcja konstruktora

Obiekt można utworzyć, wykonując następujące dwa kroki -

Step 1 - Zdefiniuj typ obiektu, pisząc funkcję konstruktora.

Poniżej znajduje się składnia tego samego.

function function_name() { 
   this.property_name = value 
}

Plik ‘this’ słowo kluczowe odnosi się do aktualnie używanego obiektu i definiuje właściwość obiektu.

Step 2 - Utwórz instancję obiektu z nową składnią.

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

Object_name.property_name

Słowo kluczowe new wywołuje konstruktor funkcji i inicjuje klucze właściwości funkcji.

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)

Powyższy przykład używa konstruktora funkcji do zdefiniowania obiektu.

Poniższe dane wyjściowe są wyświetlane po pomyślnym wykonaniu powyższego kodu.

Ford 
F123

Nową właściwość można zawsze dodać do wcześniej zdefiniowanego obiektu. Weźmy na przykład pod uwagę następujący fragment kodu -

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

Poniższe dane wyjściowe są wyświetlane po pomyślnym wykonaniu powyższego kodu.

Ford 
F123

Metoda Object.create

Obiekty można również tworzyć za pomocą Object.create()metoda. Pozwala na stworzenie prototypu obiektu, który chcesz, bez konieczności definiowania funkcji konstruktora.

Przykład

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

Powyższy przykład definiuje obiekt -role i ustawia domyślne wartości właściwości. Tworzone są dwa nowe wystąpienia, które zastępują domyślną wartość właściwości obiektu.

Poniższe dane wyjściowe są wyświetlane po pomyślnym wykonaniu powyższego kodu.

Admin 
Guest

Funkcja Object. assign ()

Plik Object.assign()Metoda służy do kopiowania wartości wszystkich wyliczalnych właściwości własnych z jednego lub większej liczby obiektów źródłowych do obiektu docelowego. Zwróci obiekt docelowy.

Poniżej znajduje się składnia tego samego.

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]) 
}

Poniższe dane wyjściowe są wyświetlane po pomyślnym wykonaniu powyższego kodu.

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);

Poniższe dane wyjściowe są wyświetlane po pomyślnym wykonaniu powyższego kodu.

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

Note- W przeciwieństwie do kopiowania obiektów, gdy obiekty są scalane, większy obiekt nie zachowuje nowej kopii właściwości. Raczej zawiera odniesienie do właściwości zawartych w oryginalnych obiektach. Poniższy przykład wyjaśnia tę koncepcję.

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);

Poniższe dane wyjściowe są wyświetlane po pomyślnym wykonaniu powyższego kodu.

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

Usuwanie właściwości

Właściwość można usunąć za pomocą operatora delete. Poniższy kod pokazuje, jak usunąć właściwość.

Przykład

// 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"

Poniższe dane wyjściowe są wyświetlane po pomyślnym wykonaniu powyższego kodu.

false

Fragment kodu usuwa właściwość z obiektu. Przykład wyświetla false, ponieważ operator in nie znajduje właściwości w obiekcie.

Porównywanie obiektów

W JavaScript obiekty są typami referencyjnymi. Dwa różne obiekty nigdy nie są równe, nawet jeśli mają takie same właściwości. Dzieje się tak, ponieważ wskazują one na zupełnie inny adres pamięci. Tylko te obiekty, które mają wspólne odniesienie, są prawdziwe w porównaniu.

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

W powyższym przykładzie val1 i val2to dwa różne obiekty, które odnoszą się do dwóch różnych adresów pamięci. Stąd przy porównaniu dla równości operator zwróci fałsz.

Example 2 − Single Object Reference

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

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

W powyższym przykładzie zawartość val1 jest przypisana do val2, tj. Odniesienia do właściwości w val1 są wspólne z val2. Ponieważ obiekty współdzielą teraz odniesienie do właściwości, operator równości zwróci wartość true dla dwóch różnych obiektów, które odwołują się do dwóch różnych adresów pamięci. Stąd przy porównaniu dla równości operator zwróci fałsz.

Dezstrukturyzacja obiektu

Termin destructuringodnosi się do rozbicia struktury bytu. Destrukcyjna składnia przypisania w JavaScript umożliwia wyodrębnienie danych z tablic lub obiektów do odrębnych zmiennych. To samo ilustruje poniższy przykład.

Przykład 1

Podczas niszczenia obiektu nazwy zmiennych i nazwy właściwości obiektu muszą być zgodne.

<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>

Dane wyjściowe powyższego kodu będą widoczne poniżej -

Prijin
7.2
7.2
student_name Prijin

Przykład 2

Jeśli zmienna i przypisanie znajdują się w dwóch różnych etapach, składnia obiektu destrukturyzującego zostanie otoczona przez () jak pokazano w przykładzie ({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>

Wynik powyższego kodu będzie taki, jak wspomniano poniżej -

20
1001
2000
0.1

Przykład 3

Poniższy przykład pokazuje destructuring używając rest operator i jak niszczyć zagnieżdżone obiekty.

<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>

Wynik powyższego kodu będzie taki, jak wspomniano poniżej -

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