de Dmitri Grabov

Obiecte JavaScript, paranteze pătrate și algoritmi

Unul dintre cele mai puternice aspecte ale JavaScript-ului este posibilitatea de a se referi dinamic la proprietățile obiectelor. În acest articol vom analiza modul în care funcționează și ce avantaje ne-ar putea oferi acest lucru. Vom arunca o privire rapidă asupra unora dintre structurile de date utilizate în informatică. În plus, ne vom uita la ceva numit notație Big O care este utilizată pentru a descrie performanța unui algoritm.

Introducere obiecte

Să începem prin a crea un obiect simplu care reprezintă o mașină. Fiecare obiect are ceva numit properties. O proprietate este o variabilă care aparține unui obiect. Obiectul mașinii noastre va avea trei proprietăți: make, model și color.

Să vedem cum ar putea arăta:

const car = {  make: 'Ford',  model: 'Fiesta',  color: 'Red'};

Ne putem referi la proprietățile individuale ale unui obiect folosind notația punct. De exemplu, dacă am fi vrut să aflăm care este culoarea mașinii noastre, putem folosi notația cu puncte ca aceasta car.color.

Am putea chiar să-l scoatem folosind console.log:

console.log(car.color); //outputs: Red

Un alt mod de a face referire la o proprietate este folosirea notației între paranteze pătrate:

console.log(car['color']); //outputs: Red

În exemplul de mai sus, folosim numele proprietății ca un șir între paranteze pătrate pentru a obține valoarea corespunzătoare numelui proprietății respective. Lucrul util despre notația între paranteze pătrate este că putem folosi și variabile pentru a obține proprietăți dinamic.

Adică, mai degrabă decât codarea dură a unui anumit nume de proprietate, îl putem specifica ca șir într-o variabilă:

const propertyName="color";const console.log(car[propertyName]); //outputs: Red

Utilizarea căutării dinamice cu notație între paranteze pătrate

Să vedem un exemplu în care putem folosi acest lucru. Să presupunem că avem un restaurant și vrem să putem obține prețurile articolelor din meniul nostru. O modalitate de a face acest lucru este folosirea if/else declarații.

Să scriem o funcție care va accepta un nume de articol și va returna un preț:

function getPrice(itemName){  if(itemName === 'burger') {    return 10;  } else if(itemName === 'fries') {    return 3;  } else if(itemName === 'coleslaw') {    return 4;  } else if(itemName === 'coke') {    return 2;  } else if(itemName === 'beer') {    return 5;  }}

În timp ce abordarea de mai sus funcționează, nu este ideală. Am codat hardmeniul din codul nostru. Acum, dacă meniul nostru se schimbă, va trebui să ne rescriem codul și să îl redistribuim. În plus, am putea avea un meniu lung și a fi greoi să scriem tot acest cod.

O abordare mai bună ar fi separarea datelor și a logicii noastre. Datele vor conține meniul nostru, iar logica va căuta prețurile din acel meniu.

Putem reprezenta menu ca obiect în care numele proprietății, cunoscut și ca cheie, corespunde unei valori.

În acest caz, cheia va fi numele articolului și valoarea va fi prețul articolului:

const menu = {  burger: 10,  fries: 3,  coleslaw: 4,  coke: 2,  beer: 5};

Folosind notația între paranteze pătrate putem crea o funcție care va accepta două argumente:

• un obiect de meniu
• un șir cu numele articolului

și returnează prețul articolului respectiv:

const menu = {  burger: 10,  fries: 3,  coleslaw: 4,  coke: 2,  beer: 5};

function getPrice(itemName, menu){  const itemPrice = menu[itemName];  return itemPrice;}

const priceOfBurger = getPrice('burger', menu);console.log(priceOfBurger); // outputs: 10

Lucrul îngrijitor al acestei abordări este că ne-am separat datele de logica noastră. În acest exemplu, datele se află în codul nostru, dar ar putea proveni la fel de ușor dintr-o bază de date sau API. Nu mai este strâns asociat cu logica noastră de căutare care convertește numele articolului în prețul articolului.

Structuri de date și algoritmi

O hartă în termeni Informatică este o structură de date care este o colecție de perechi cheie / valoare în care fiecare cheie se mapează la o valoare corespunzătoare. Îl putem folosi pentru a arăta o valoare care corespunde unei anumite chei. Aceasta este ceea ce facem în exemplul anterior. Avem o cheie care este un nume de articol și putem căuta prețul corespunzător pentru acel articol folosind meniul nostru. Folosim un obiect pentru a implementa o structură de date a hărții.

Să vedem un exemplu de ce ar putea dori să folosim o hartă. Să presupunem că conducem o librărie și că avem o listă de cărți. Fiecare carte are un identificator unic numit International Standard Book Number (ISBN), care este un număr de 13 cifre. Ne stocăm cărțile într-o serie și dorim să le putem căuta folosind codul ISBN.

Un mod de a face acest lucru este prin looping peste matrice, verificarea valorii ISBN a fiecărei cărți și dacă se potrivește returnarea ei:

const books = [{  isbn: '978-0099540946',  author: 'Mikhail Bulgakov',  title: 'Master and Margarita'}, {  isbn: '978-0596517748',  author: 'Douglas Crockford',  title: 'JavaScript: The Good Parts'}, {  isbn: '978-1593275846',  author: 'Marijn Haverbeke',  title: 'Eloquent JavaScript'}];

function getBookByIsbn(isbn, books){  for(let i = 0; i < books.length; i++){    if(books[i].isbn === isbn) {      return books[i];    }  }}

const myBook = getBookByIsbn('978-1593275846', books);

Acest lucru funcționează bine în acest exemplu, deoarece avem doar trei cărți (este o mică librărie). Cu toate acestea, dacă am fi Amazon, iterația a peste milioane de cărți ar putea fi foarte lentă și costisitoare din punct de vedere al calculului.

Notare O mare este folosit în Informatică pentru a descrie performanța unui algoritm. De exemplu dacă n este numărul de cărți din colecția noastră, costul utilizării iterației pentru a căuta o carte în cel mai rău caz (cartea pe care o căutăm este ultima în listă) va fi Pe). Asta înseamnă că dacă numărul de cărți din colecția noastră se dublează, costul găsirii unei cărți folosind iterația se va dubla și.

Să aruncăm o privire la modul în care ne putem eficientiza algoritmul utilizând o structură de date diferită.

După cum sa discutat, o hartă poate fi utilizată pentru a căuta valoarea care corespunde unei chei. Ne putem structura datele ca hartă în loc de matrice folosind un obiect.

Cheia va fi ISBN și valoarea va fi obiectul de carte corespunzător:

const books = {  '978-0099540946':{    isbn: '978-0099540946',    author: 'Mikhail Bulgakov',    title: 'Master and Margarita'  },  '978-0596517748': {    isbn: '978-0596517748',    author: 'Douglas Crockford',    title: 'JavaScript: The Good Parts'  },  '978-1593275846': {    isbn: '978-1593275846',    author: 'Marijn Haverbeke',    title: 'Eloquent JavaScript'  }};

function getBookByIsbn(isbn, books){  return books[isbn];}

const myBook = getBookByIsbn('978-1593275846', books);

În loc să folosim iterația, putem folosi acum o căutare simplă a hărții prin ISBN pentru a obține valoarea noastră. Nu mai trebuie să verificăm valoarea ISBN pentru fiecare obiect. Obținem valoarea direct de pe hartă folosind cheia.

În ceea ce privește performanța, o căutare a hărții va oferi o îmbunătățire imensă față de iterație. Acest lucru se datorează faptului că căutarea pe hartă are un cost constant în termeni de calcul. Acest lucru poate fi scris folosind notația Big O ca O (1). Nu contează dacă avem trei sau trei milioane de cărți, putem obține cartea pe care o dorim la fel de repede făcând o căutare pe hartă folosind cheia ISBN.

Recapitulare

• Am văzut că putem accesa valorile proprietăților obiectului folosind notația punct și notația paranteză pătrată
• Am învățat cum putem căuta dinamic valorile proprietății folosind variabile cu notație între paranteze pătrate
• De asemenea, am aflat că o structură de date a hărții mapează cheile valorilor. Putem folosi tastele pentru a căuta direct valorile pe o hartă pe care o implementăm folosind un obiect.
• Am avut o primă privire asupra modului în care este descrisă performanța algoritmului folosind O mare notaţie. În plus, am văzut cum putem îmbunătăți performanța unei căutări convertind o serie de obiecte într-o hartă și folosind căutare directă mai degrabă decât iterație.

Doriți să testați noile abilități găsite? Incearca Crash Override exercițiu pe Codewars.

Doriți să aflați cum să scrieți aplicații web folosind JavaScript? alerg Laboratoare pentru constructori, o săptămână de 12 Cod de JavaScript bootcamp în Londra. Tehnologiile predate includ HMTL, CSS, JavaScript, Reacţiona, Redux, Nodul și Postgres. Tot ce aveți nevoie pentru a crea o întreagă aplicație web de la zero și pentru a obține primul loc de muncă în industrie. Taxele sunt de 3.000 GBP, iar următoarea cohortă începe pe 29 mai. Aplicațiile sunt deschise acum.