JavaScript-objektit, hakasulkeet ja algoritmit

Yksi JavaScriptin tehokkaimmista ominaisuuksista on mahdollisuus viitata dynaamisesti objektien ominaisuuksiin. Tässä artikkelissa tarkastellaan, miten tämä toimii ja mitä etuja se voi antaa meille. Tarkastelemme nopeasti tietojenkäsittelytieteen tietorakenteita. Lisäksi tarkastelemme jotakin nimeltä Big O-notaatio, jota käytetään kuvaamaan algoritmin suorituskykyä.

Esineiden esittely

Aloitetaan luomalla yksinkertainen esine, joka edustaa autoa. Jokaisella esineellä on jotain nimeltään properties. Ominaisuus on muuttuja, joka kuuluu esineeseen. Automme esine on kolme ominaisuuksia: make, modelja color.

Katsotaanpa, miltä se voi näyttää:

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

Voimme viitata kohteen yksittäisiin ominaisuuksiin pistemerkinnällä. Esimerkiksi, jos halusimme selvittää automme värin, voimme käyttää tällaisia ​​pistemerkintöjä car.color.

Voisimme jopa tuottaa sen käyttämällä console.log:

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

Toinen tapa viitata ominaisuuteen on käyttää hakasulkujen merkintöjä:

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

Yllä olevassa esimerkissä käytämme ominaisuuden nimeä merkkijonona hakasulkeissa kyseisen ominaisuuden nimeä vastaavan arvon saamiseksi. Hyödyllinen asia hakasulkujen merkinnöissä on, että voimme myös käyttää muuttujia saadaksesi ominaisuuksia dynaamisesti.

Eli sen sijaan, että tietyn ominaisuuden nimeä koodattaisiin kovalla koodilla, voimme määrittää sen merkkijonona muuttujassa:

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

Dynaamisen haun käyttäminen hakasulkeissa

Katsotaanpa esimerkkiä, jossa voimme käyttää tätä. Oletetaan, että meillä on ravintola ja haluamme pystyä saamaan valikkomme tuotteiden hinnat. Yksi tapa tehdä tämä on käyttää if/elselauseita.

Kirjoitetaan funktio, joka hyväksyy nimikkeen ja palauttaa hinnan:

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

Vaikka yllä oleva lähestymistapa toimii, se ei ole ihanteellinen. Olemme koodanneet valikon kovasti koodissamme. Jos valikkomme muuttuu, meidän on kirjoitettava koodi uudelleen ja asennettava se uudelleen. Lisäksi meillä voi olla pitkä valikko, ja kaiken tämän koodin kirjoittaminen olisi hankalaa.

Parempi lähestymistapa olisi erottaa tietomme ja logiikkamme. Tiedot sisältävät valikkomme ja logiikka etsii hinnat kyseisestä valikosta.

Voimme edustaa menuobjektia, jossa ominaisuuden nimi, joka tunnetaan myös nimellä avain, vastaa arvoa.

Tällöin avain on nimikkeen nimi ja arvo tuotteen hinta:

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

Neliömerkinnällä voidaan luoda funktio, joka hyväksyy kaksi argumenttia:

  • valikkoobjekti
  • merkkijono, jonka nimi on

ja palauta kyseisen tuotteen hinta:

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

Tämän lähestymistavan siisti asia on, että olemme erottaneet tietomme logiikastamme. Tässä esimerkissä tiedot elävät koodissamme, mutta ne voivat yhtä helposti tulla tietokannasta tai sovellusliittymästä. Se ei ole enää tiiviisti yhdistetty hakulogiikkaamme, joka muuntaa nimikkeen tuotteen hinnaksi.

Datarakenteet ja algoritmit

Kartta tietojenkäsittelytieteen termeillä on tietorakenne, joka on kokoelma avain / arvo-pareja, joissa kukin avain kartoittaa vastaavan arvon. Voimme käyttää sitä etsimään tiettyä avainta vastaavaa arvoa. Tätä teemme edellisessä esimerkissä. Meillä on avain, joka on nimikkeen nimi, ja voimme etsiä vastaavan tuotteen hinnan valikko-objektillamme. Käytämme objektiä karttatietorakenteen toteuttamiseen.

Katsotaanpa esimerkkiä siitä, miksi saatamme haluta käyttää karttaa. Oletetaan, että meillä on kirjakauppa ja meillä on luettelo kirjoista. Jokaisella kirjalla on yksilöllinen tunniste nimeltä International Standard Book Number (ISBN), joka on 13-numeroinen luku. Varastamme kirjamme joukossa ja haluamme pystyä etsimään niitä ISBN-numeron avulla.

Yksi tapa tehdä se on siirtyä taulukkoon, tarkistaa jokaisen kirjan ISBN-arvo ja palauttaa se vastaamalla sitä:

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

Se toimii hyvin tässä esimerkissä, koska meillä on vain kolme kirjaa (se on pieni kirjakauppa). Jos olisimme Amazon, miljoonien kirjojen toistaminen voi olla hyvin hidasta ja laskennallisesti kallista.

Big O -merkintää käytetään tietojenkäsittelytieteessä kuvaamaan algoritmin suorituskykyä. Esimerkiksi jos n on kokoelmassamme olevien kirjojen lukumäärä, iteroinnin käyttökustannukset kirjan etsimiseen pahimmassa tapauksessa (etsimämme kirja on viimeinen luettelossa) on O (n) . Tämä tarkoittaa, että jos kokoelmamme kirjojen määrä kaksinkertaistuu, myös iterointia käyttävän kirjan löytämisen kustannukset kaksinkertaistuvat.

Katsotaanpa, miten voimme tehostaa algoritmiamme käyttämällä erilaista tietorakennetta.

Kuten keskusteltiin, karttaa voidaan käyttää avainta vastaavan arvon etsimiseen. Voimme rakentaa tietomme karttana taulukon sijasta käyttämällä objektia.

Avain on ISBN ja arvo vastaava kirjaobjekti:

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

Iteraation käyttämisen sijasta voimme nyt käyttää yksinkertaista ISBN-karttahaun arvojemme saamiseksi. Meidän ei enää tarvitse tarkistaa jokaisen objektin ISBN-arvoa. Saamme arvon suoraan kartalta avaimen avulla.

Suorituskyvyn kannalta karttahaun avulla saavutetaan valtava parannus iterointiin. Tämä johtuu siitä, että karttahaulla on pysyvät kustannukset laskennassa. Tämä voidaan kirjoittaa käyttämällä suurta O-merkintää O: na (1) . Ei ole väliä onko meillä kolme tai kolme miljoonaa kirjaa, voimme saada haluamasi kirjan yhtä nopeasti tekemällä karttahaun ISBN-näppäimellä.

Kertaus

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

Haluatko oppia kirjoittamaan verkkosovelluksia JavaScriptin avulla? Juoksen Constructor Labs, 12 viikkoa JavaScriptiä koodaava bootcamp Lontoossa. Opetettuja tekniikoita ovat HMTL , CSS , JavaScript , React , Redux , Node ja Postgres . Kaikki mitä tarvitset kokonaisen verkkosovelluksen luomiseen tyhjästä ja ensimmäinen työpaikkasi alalla. Palkkiot ovat 3000 puntaa ja seuraava kohortti alkaa 29. toukokuuta. Hakemukset ovat auki nyt.