JavaScript objektumok, szögletes zárójelek és algoritmusok

A JavaScript egyik legerősebb aspektusa, hogy dinamikusan hivatkozhat az objektumok tulajdonságaira. Ebben a cikkben megnézzük, hogyan működik ez, és milyen előnyökkel járhat ez számunkra. Gyorsan áttekintjük a Számítástudományban használt néhány adatszerkezetet. Ezenkívül megvizsgálunk egy úgynevezett Big O jelölést, amelyet egy algoritmus teljesítményének leírására használunk.

Objektumok bevezetője

Kezdjük egy egyszerű objektum létrehozásával, amely egy autót képvisel. Minden objektumnak van valami úgynevezett properties. A tulajdonság egy olyan változó, amely egy objektumhoz tartozik. Az autónk objektum lesz három tulajdonságok: make, modelés color.

Nézzük meg, hogy nézhet ki:

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

Pont jelöléssel használhatjuk az objektum egyes tulajdonságait. Például, ha meg akartuk tudni, hogy mi az autónk színe, használhatunk ilyen dot jelölést car.color.

Akár kimenetelezhetnénk console.log:

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

A tulajdonságra való hivatkozás másik módja szögletes zárójelben történő jelölés:

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

A fenti példában a tulajdonság nevét sztringként alkalmazzuk szögletes zárójelben, hogy megkapjuk az adott tulajdonság nevének megfelelő értéket. A szögletes zárójelben történő jelölés szempontjából hasznos, hogy változókat is használhatunk a tulajdonságok dinamikus megszerzéséhez.

Vagyis ahelyett, hogy egy adott tulajdonságnevet kemény kódolással írnánk be, megadhatjuk stringként egy változóban:

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

Dinamikus keresés szögletes zárójeles jelöléssel

Nézzünk meg egy példát, ahol ezt felhasználhatjuk. Tegyük fel, hogy éttermet működtetünk, és szeretnénk tudni, hogy az étlapunkon szereplő termékek árai megkapják. Ennek egyik módja a if/elsekijelentések használata .

Írjunk egy függvényt, amely elfogadja az elem nevét és árat ad vissza:

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

Bár a fenti megközelítés működik, nem ideális. Keményen kódoltuk a menüt a kódunkban. Ha megváltozik a menü, akkor át kell írnunk a kódunkat és újra kell telepítenünk. Ezenkívül hosszú menünk lehet, és ezt a kódot kell megírnunk nehézkesnek.

Jobb megközelítés lenne, ha elválasztanánk adatainkat és logikánkat. Az adatok tartalmazzák a menünket, és a logika keresi az árakat abból a menüből.

Olyan menuobjektumként ábrázolhatjuk , ahol a tulajdonság név, más néven kulcs, egy értéknek felel meg.

Ebben az esetben a kulcs az elem neve lesz, az érték pedig az ár:

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

A szögletes zárójeles jelöléssel létrehozhatunk egy függvényt, amely két argumentumot fogad el:

• menüobjektum
• karakterlánc elem nevével

és adja vissza a tétel árát:

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

Ebben a megközelítésben az a lényeg, hogy elválasztottuk adatainkat logikánktól. Ebben a példában az adatok a kódunkban élnek, de ugyanolyan könnyen származhatnak adatbázisból vagy API-ból. Már nincs szorosan összekapcsolva a keresési logikánkkal, amely az árucikk nevét tételárfolyamra konvertálja.

Datastruktúrák és algoritmusok

A számítástechnikai fogalmakban szereplő térkép egy adatstruktúra, amely kulcs / érték párok gyűjteménye, ahol minden kulcs egy megfelelő értékhez társul. Használhatjuk egy adott kulcsnak megfelelő érték megjelenítésére. Ezt tesszük az előző példában. Van egy kulcsunk, amely egy tétel neve, és a menüobjektumunk segítségével megkereshetjük az adott tétel megfelelő árát. Objektumot használunk a térképi adatstruktúra megvalósításához.

Nézzünk meg egy példát arra, miért érdemes térképet használni. Tegyük fel, hogy könyvesboltot működtetünk, és van egy könyvlistánk. Minden könyvnek egyedi azonosítója van, az úgynevezett International Standard Book Number (ISBN), amely egy 13 jegyű szám. Könyveinket tömbben tároljuk, és szeretnénk, ha megkereshetnénk őket az ISBN segítségével.

Ennek egyik módja a hurok áttekintése, az egyes könyvek ISBN-értékének ellenőrzése és visszaadása:

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

Ez jól működik ebben a példában, mivel csak három könyvünk van (ez egy kis könyvesbolt). Ha azonban Amazon lennénk, akkor több millió könyv ismétlése nagyon lassú és számítási szempontból drága lehet.

A Big O jelölést a számítástechnikában használják egy algoritmus teljesítményének leírására. Például, ha n a gyűjteményünkben lévő könyvek száma, akkor az iteráció költsége a könyv megkeresésére a legrosszabb esetben (a keresett könyv az utolsó a listán) O (n) lesz . Ez azt jelenti, hogy ha a gyűjteményünkben lévő könyvek száma megduplázódik, akkor az iteráció segítségével történő könyvkeresés költsége is megduplázódik.

Vizsgáljuk meg, hogyan tehetjük hatékonyabbá algoritmusunkat egy másik adatstruktúra használatával.

Amint arról már volt szó, egy térkép segítségével fel lehet keresni a kulcsnak megfelelő értéket. Objektum segítségével tömb helyett térképként strukturálhatjuk adatainkat.

A kulcs az ISBN lesz, az érték pedig a megfelelő könyvobjektum lesz:

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

Az iteráció helyett most egyszerű térképkeresést használhatunk ISBN szerint, hogy megkapjuk értékünket. Már nem kell ellenőriznünk az egyes objektumok ISBN-értékét. Az értéket közvetlenül a térképről kapjuk meg a kulcs segítségével.

A teljesítmény szempontjából a térképkeresés óriási javulást eredményez az iterációval szemben. Ennek oka, hogy a térképkeresésnek állandó költségei vannak a számítás szempontjából. Ez megírható a nagy O jelöléssel, mint O (1) . Nem számít, hogy három vagy hárommillió könyvünk van-e, a kívánt könyvet ugyanolyan gyorsan megszerezhetjük, ha térképkeresést hajtunk végre az ISBN-kulcs segítségével.

Újrafutóz

• We have seen we can access the values of object properties using dot notation and square bracket notation
• We learned how we can dynamically look up values of property by using variables with square bracket notation
• We have also learned that a map datastructure maps keys to values. We can use keys to directly look up values in a map which we implement using an object.
• We had a first glance at how algorithm performance is described using Big O notation. In addition, we saw how we can improve the performance of a search by converting an array of objects into a map and using direct lookup rather than iteration.

Want to test your new found skills? Try the Crash Override exercise on Codewars.

Want to learn how to write web applications using JavaScript? I run Constructor Labs, a 12 week JavaScript coding bootcamp in London. The technologies taught include HMTL, CSS, JavaScript, React, Redux, Node and Postgres. Everything you need to create an entire web app from scratch and get your first job in the industry. Fees are £3,000 and next cohort starts on 29th May. Applications are open now.