Puteți grupa datele aferente într-o singură structură de date utilizând un obiect JavaScript, astfel:

const desk = {
   height: "4 feet",
   weight: "30 pounds",
   color: "brown",
   material: "wood",
 };

Un obiect conține proprietăți sau perechi cheie-valoare. desk obiectul de mai sus are patru proprietăți. Fiecare proprietate are un nume, care se mai numește cheie și o valoare corespunzătoare.

De exemplu, cheia height are valoarea "4 feet". Împreună, cheia și valoarea alcătuiesc o singură proprietate.

height: "4 feet",

desk obiectul conține date despre un birou. De fapt, acesta este un motiv pentru care ați folosi un obiect JavaScript: pentru a stoca date. De asemenea, este simplu să preluați datele pe care le stocați într-un obiect. Aceste aspecte fac obiectele foarte utile.

Acest articol vă va pune în funcțiune cu obiecte JavaScript:

  • cum se creează un obiect
  • cum se stochează date într-un obiect
  • și preluați date din acesta.

Să începem prin a crea un obiect.

Cum se creează un obiect în JavaScript

Voi crea un obiect numit pizza de mai jos și adăugați perechi cheie-valoare.

const pizza = {
   topping: "cheese",
   sauce: "marinara",
   size: "small"
};

Cheile sunt în stânga colonului : iar valorile sunt în dreapta acestuia. Fiecare pereche cheie-valoare este a property. Există trei proprietăți în acest exemplu:

  • Cheia topping are o valoare “brânză”.
  • Cheia sos are o valoare „Marinara”.
  • Cheia mărimea are o valoare “mic”.

Fiecare proprietate este separată printr-o virgulă. Toate proprietățile sunt înfășurate în acolade.

Aceasta este sintaxa obiectului de bază. Dar există câteva reguli de care trebuie să ții cont atunci când creezi obiecte JavaScript.

Chei de obiecte în JavaScript

Fiecare cheie din obiectul dvs. JavaScript trebuie să fie un șir, un simbol sau un număr.

Aruncați o privire atentă la exemplul de mai jos. Numele cheie 1 și 2 sunt constrânși de fapt în corzi.

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

Este o diferență clarificată atunci când tipăriți obiectul.

console.log(shoppingCart);
//Result: { '1': 'apple', '2': 'oranges' }

Există o altă regulă de reținut cu privire la numele cheilor: dacă numele cheii dvs. conține spații, trebuie să o înfășurați între ghilimele.

Uită-te la programmer obiect de mai jos. Observați numele de ultimă cheie, "current project name" . Acest nume cheie conține spații, așa că l-am înfășurat în ghilimele.

const programmer = {
   firstname: "Phil",
   age: 21,
   backendDeveloper: true,
   languages: ["Python", "JavaScript", "Java", "C++"],
   "current project name": "The Amazing App"
};

Valorile obiectelor în JavaScript

O valoare, pe de altă parte, poate fi orice tip de date, inclusiv o matrice, un număr sau boolean. Valorile din exemplul de mai sus conțin aceste tipuri: șir, număr întreg, boolean și o matrice.

Puteți utiliza chiar și o funcție ca valoare, caz în care este cunoscută ca metodă. sounds(), în obiectul de mai jos, este un exemplu.

const animal = {
   type: "cat",
   name: "kitty",
   sounds() { console.log("meow meow") }
};

Acum spuneți că doriți să adăugați sau să ștergeți o pereche cheie-valoare. Sau pur și simplu doriți să recuperați valoarea unui obiect.

Puteți face aceste lucruri utilizând notația punct sau paranteză, pe care o vom aborda în continuare.

Cum funcționează notația punctuală și notația paranteză în JavaScript

Notarea punct și notația paranteză sunt două moduri de a accesa și utiliza proprietățile unui obiect. Probabil că veți găsi căutați mai des pentru notarea punctelor, așa că vom începe cu asta.

Cum se adaugă o pereche valoare-cheie cu notație punct în JavaScript

Voi crea un gol book obiect de mai jos.

const book = {};

Pentru a adăuga o pereche cheie-valoare utilizând notația punct, utilizați sintaxa:

objectName.keyName = value

Acesta este codul pentru a adăuga cheia (autorul) și valoarea („Jane Smith”) la book obiect:

book.author = "Jane Smith";

Iată o defalcare a codului de mai sus:

  • book este numele obiectului
  • . (punct)
  • author este numele cheie
  • = (egal)
  • "Jane Smith" este valoarea

Când printez obiectul de carte, voi vedea noua pereche cheie-valoare adăugată.

console.log(book);
//Result: { author: 'Jane Smith' }

Voi adăuga o altă pereche cheie-valoare la book obiect.

book.publicationYear = 2006;

book obiectul are acum două proprietăți.

console.log(book);
//Result: { author: 'Jane Smith', publicationYear: 2006 }

Cum se accesează datele într-un obiect JavaScript folosind notația punct

De asemenea, puteți utiliza notația punct pe o tastă pentru acces valoarea aferentă.

Gandeste-te la asta basketballPlayer obiect.

const basketballPlayer = {
   name: "James",
   averagePointsPerGame: 20,
   height: "6 feet, 2 inches",
   position: "shooting guard"
};

Spuneți că doriți să recuperați valoarea „gardă de tragere”. Aceasta este sintaxa de utilizat:

objectName.keyName

Să punem această sintaxă pe care să o folosim pentru a obține și a imprima valoarea „gardului de tragere”.

console.log(basketballPlayer.position);
//Result: shooting guard

Iată o defalcare a codului de mai sus:

  • basketballPlayer este numele obiectului
  • . (punct)
  • position este numele cheie

Acesta este un alt exemplu.

console.log(basketballPlayer.name);
//Result: James

Cum se șterge o pereche cheie-valoare în JavaScript

Pentru a șterge o pereche cheie-valoare utilizați delete operator. Aceasta este sintaxa:

delete objectName.keyName

Deci, pentru a șterge fișierul height cheie și valoarea sa din basketballPlayer obiect, ai scrie acest cod:

delete basketballPlayer.height;

Ca urmare, basketballPlayer obiectul are acum trei perechi cheie-valoare.

console.log(basketballPlayer);
//Result: { name: 'James', averagePointsPerGame: 20, position: 'shooting guard' }

Probabil că veți găsi frecvent căutarea pentru notarea punctelor, deși există anumite cerințe de care să fiți conștienți.

Când utilizați notația punctelor, numele cheilor nu pot conține spații, cratime sau pot începe cu un număr.

De exemplu, să spun că încerc să adaug o cheie care conține spații folosind notația punct. Voi primi o eroare.

basketballPlayer.shooting percentage = "75%";
//Results in an error

Deci notația punct nu va funcționa în orice situație. De aceea există o altă opțiune: notația între paranteze.

Cum se adaugă o pereche valoare-cheie utilizând notația în paranteză în JavaScript

La fel ca notația punct, puteți utiliza notația paranteză pentru a adăuga o pereche cheie-valoare unui obiect.

Notarea paranteză oferă mai multă flexibilitate decât notația punct. Asta pentru că numele cheie poate sa includ spații și cratime și pot începe cu numere.

Voi crea un employee obiect de mai jos.

const employee = {};

Acum vreau să adaug o pereche cheie-valoare folosind notația paranteză. Aceasta este sintaxa:

objectName[“keyName”] = value

Deci, așa aș adăuga cheia (vânzări) și valoarea („ocupația”) la obiectul angajatului:

employee["occupation"] = "sales";

Iată o defalcare a codului de mai sus:

  • employee este numele obiectului
  • "occupation" este numele cheie
  • = (egal)
  • "sales" este valoarea

Mai jos sunt mai multe exemple care utilizează flexibilitatea notației paranteze pentru a adăuga o varietate de perechi cheie-valoare.

//Add multi-word key name
employee["travels frequently"] = true;
 
//Add key name that starts with a number and includes a hyphen
employee["1st-territory"] = "Chicago";
 
//Add a key name that starts with a number
employee["25"] = "total customers";

Când tipăresc employee obiect, arată așa:

{
  '25': 'total customers',
  occupation: 'sales',
  'travels frequently': true,
  '1st-territory': 'Chicago'
}

Având în vedere aceste informații, putem adăuga tasta „procent de fotografiere” la basketballPlayer obiect de sus.

const basketballPlayer = {
   name: "James",
   averagePointsPerGame: 20,
   height: "6 feet, 2 inches",
   position: "shooting guard"
};

Vă puteți aminti că notația punct ne-a lăsat o eroare atunci când am încercat să adăugăm o cheie care să includă spații.

basketballPlayer.shooting percentage = "75%";
//Results in an error

Dar notația paranteză ne lasă fără erori, după cum puteți vedea aici:

basketballPlayer["shooting percentage"] = "75%";

Acesta este rezultatul atunci când imprim obiectul:

{
  name: 'James',
  averagePointsPerGame: 20,
  height: '6 feet, 2 inches',
  position: 'shooting guard',
  'shooting percentage': '75%'
}

Cum se accesează datele într-un obiect JavaScript folosind notația în paranteză

De asemenea, puteți utiliza notația paranteză pe o tastă pentru acces valoarea aferentă.

Reamintim animal obiect de la începutul articolului.

const animal = {
   type: "cat",
   name: "kitty",
   sounds() { console.log("meow meow") }
};

Să obținem valoarea asociată cheii, name. Pentru a face acest lucru, înfășurați ghilimele cu numele cheii și puneți-le între paranteze. Aceasta este sintaxa:

objectName[“keyName”]

Iată codul pe care l-ați scrie cu notație între paranteze: animal["name"];.

Aceasta este o defalcare a codului de mai sus:

  • animal este numele obiectului
  • ["name"] este numele cheii cuprins între paranteze drepte

Iată un alt exemplu.

console.log(animal["sounds"]());

//Result: 
meow meow
undefined

Rețineți că sounds() este o metodă, motiv pentru care am adăugat paranteze la final pentru a o invoca.

Acesta este modul în care ați invoca o metodă folosind notația punct.

console.log(animal.sounds());

//Result: 
meow meow
undefined

Metode de obiect JavaScript

Știți cum să accesați proprietăți specifice. Dar dacă vrei toate a tastelor sau toate a valorilor dintr-un obiect?

Există două metode care vă vor oferi informațiile de care aveți nevoie.

const runner = {
   name: "Jessica",
   age: 20,
   milesPerWeek: 40,
   race: "marathon"
};

Folosește Object.keys() metoda de a extrage toate numele cheilor dintr-un obiect.

Aceasta este sintaxa:

Object.keys(objectName)

Putem folosi această metodă pe cele de mai sus runner obiect.

Object.keys(runner);

Dacă tipăriți rezultatul, veți obține o serie de chei ale obiectului.

console.log(Object.keys(runner));
//Result: [ 'name', 'age', 'milesPerWeek', 'race' ]

La fel, puteți utiliza fișierul Object.values() metoda pentru a obține toate valorile dintr-un obiect. Aceasta este sintaxa:

Object.values(objectName)

Acum vom obține toate valorile din runner obiect.

console.log(Object.values(runner));
//Result: [ 'Jessica', 20, 40, 'marathon' ]

Am acoperit mult teren. Iată un rezumat al ideilor cheie:

Obiecte:

  • Utilizați obiecte pentru a stoca date ca proprietăți (perechi cheie-valoare).
  • Numele cheilor trebuie să fie șiruri, simboluri sau numere.
  • Valorile pot fi de orice tip.

Accesați proprietățile obiectului:

  • Notare punct: objectName.keyName
  • Notare paranteză: objectName[“keyName”]

Ștergeți o proprietate:

  • delete objectName.keyName

Puteți face multe lucruri cu obiecte. Și acum aveți câteva dintre elementele de bază, astfel încât să puteți profita de acest puternic tip de date JavaScript.

Scriu despre învățarea programării și despre cele mai bune modalități de a continua amymhaddad.com. Eu de asemenea tweet despre programare, învățare și productivitate: @amymhaddad.