{"id":232326,"date":"2023-01-13T20:08:00","date_gmt":"2023-01-13T17:08:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=232326"},"modified":"2022-11-10T08:44:51","modified_gmt":"2022-11-10T05:44:51","slug":"kaksisuuntaisen-kartan-luominen-javascriptillae","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/kaksisuuntaisen-kartan-luominen-javascriptillae\/","title":{"rendered":"Kaksisuuntaisen kartan luominen JavaScriptill\u00e4"},"content":{"rendered":"\n<p>Kaksisuuntainen kartta on tietojenk\u00e4sittelytieteen malli, jossa avain-arvo -pareilla on bijektiivinen 1-1 suhde avainten ja arvojen v\u00e4lill\u00e4. T\u00e4m\u00e4 mahdollistaa kyselyn avaimella ja arvon saamisen lis\u00e4ksi my\u00f6s kyselyn arvon perusteella ja avaimen saamisen. Katsotaan, kuinka kaksisuuntainen kartta otetaan k\u00e4ytt\u00f6\u00f6n JavaScriptiss\u00e4 ja tehd\u00e4\u00e4n siit\u00e4 my\u00f6hemmin turvallinen TypeScriptiss\u00e4<\/p>\n<h2>Tietojenk\u00e4sittely ja matematiikka takana<\/h2>\n<p>Otetaan kaksisuuntaisen kartan perusm\u00e4\u00e4ritelm\u00e4:<\/p>\n<blockquote>\n<p>Tietojenk\u00e4sittelytieteess\u00e4 <strong>kaksisuuntainen kartta<\/strong> on assosiatiivinen tietorakenne, jossa avain-arvo -parit muodostavat yksi-yhteen vastaavuuden. N\u00e4in ollen bin\u00e4\u00e4risuhde on toiminnallinen joka suuntaan: jokainen arvo voidaan my\u00f6s kartoittaa yksil\u00f6lliseen avaimeen.<\/p>\n<\/blockquote>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157501-61e6b9e14822e.png\" data-rel=\"lightbox\" ><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157501-61e6b9e14822e.png\" alt=\"Kaksisuuntaisen kartan luominen JavaScriptill\u00e4\" ><\/a><\/p>\n<p>Luotto: <a href=\"https:\/\/en.wikipedia.org\/wiki\/Bidirectional_map\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Kaksisuuntainen kartta<\/a><\/p>\n<p>Tietojenk\u00e4sittelytieteen kaksisuuntaisen kartan juuret ovat matemaattisessa funktiossa, jota kutsutaan bijektioksi. Suhde parin komponenttien ja sen kunkin komponentin v\u00e4lill\u00e4 eri joukoissa on bijektiivinen funktio, jota kutsutaan my\u00f6s k\u00e4\u00e4nnett\u00e4v\u00e4ksi funktioksi, joka on funktio, joka toimii molemmilla tavoilla ja yhdist\u00e4\u00e4 t\u00e4sm\u00e4lleen yhden elementin joukosta t\u00e4sm\u00e4lleen yhden alkion kanssa. toinen setti:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157501-61e6b9e2a629e.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157501-61e6b9e2a629e.png\" alt=\"Kaksisuuntaisen kartan luominen JavaScriptill\u00e4\" ><\/a><\/p>\n<p>Luotto: <a href=\"https:\/\/en.wikipedia.org\/wiki\/Bijection\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Bijection<\/a><\/p>\n<p>T\u00e4m\u00e4n mieless\u00e4 voimme tiet\u00e4\u00e4, ett\u00e4 bijektiivinen funktio yll\u00e4 oleville joukoille tuottaa jotain seuraavanlaista:<\/p>\n<p>f (1) = D<br \/>\nf (C) = 3<\/p>\n<p>Toinen bijektiivifunktiosta aiheutuva asia on, ett\u00e4 joukot ovat t\u00e4sm\u00e4lleen saman pituisia, muuten bijektio ep\u00e4onnistuu.<\/p>\n<h2>Alusta kaksisuuntainen kartta<\/h2>\n<p>Mallimme t\u00e4m\u00e4n <a href=\"https:\/\/startfunction.com\/category\/javascript\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">JavaScript<\/a> &#8211; luokalla, joka alustetaan avain-arvoparien objektilla:<\/p>\n<pre><code>const bimap = new BidirectionalMap({\n  a: 'A',\n  b: 'B',\n  c: 'C',\n})<\/code><\/pre>\n<p>Sis\u00e4isesti luomme kaksi luetteloa. Yksi luettelo tallentaa luettelon pareista, joita kutsumme eteenp\u00e4in suunnatuksi kartaksi, jossa avainkartat arvoihin, ja se on kopio objektista, jota k\u00e4ytimme kaksisuuntaisen kartan alustamiseen. Toista luetteloa kutsutaan k\u00e4\u00e4nteiseksi kartaksi, ja se tallentaa kaksisuuntaisen kartan alustamiseen k\u00e4ytetyn objektin version, jossa avain-arvo -parit on k\u00e4\u00e4nnetty ja &quot;arvo&quot; on nyt yhdistetty &quot;avaimeen&quot;:<\/p>\n<pre><code>class BidirectionalMap {\n  fwdMap = {}\n  revMap = {}\n\n  constructor(map) {\n      this.fwdMap = { ...map }\n      this.revMap = Object.keys(map).reduce(\n          (acc, cur) =&gt; ({\n              ...acc,\n              [map[cur]]: cur,\n          }),\n          {}) }\n}<\/code><\/pre>\n<p>Huomaa, ett\u00e4 kaksisuuntaisen kartan alustavan objektin luonteesta johtuen et voi k\u00e4ytt\u00e4\u00e4 avaimelle numeroa, mutta voit silti k\u00e4ytt\u00e4\u00e4 sit\u00e4 arvona ja voit my\u00f6hemmin tehd\u00e4 kyselyn sen perusteella:<\/p>\n<pre><code>const bimap = new BidirectionalMap({\n  a: 42,\n  b: 'B',\n  c: 'C',\n})<\/code><\/pre>\n<p>Vahvempi, mutta my\u00f6s monimutkaisempi versio voitaisiin kirjoittaa JavaScriptin <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Map\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">karttatietotyypill\u00e4<\/a> ja sallia avaimet, jotka ovat numeroita, funktioita tai jopa NaN.<\/p>\n<h2>Hanki elementti kaksisuuntaisesta kartasta<\/h2>\n<p>T\u00e4h\u00e4n asti meill\u00e4 on tietorakenne, joka is\u00e4nn\u00f6i kahta objektia, joista toinen on toisen peili avainarvojen suhteen. Tarvitsemme nyt menetelm\u00e4n saadaksemme siit\u00e4 jotain irti. Toteutetaan <code>get()<\/code>funktio:<\/p>\n<pre><code>  get( key) {\n      return this.fwdMap[key] || this.revMap[key]\n  }<\/code><\/pre>\n<p>Se on hyvin suoraviivaista: jos se on olemassa eteenp\u00e4in suunnatussa kartassa, palaamme sen, muuten palautamme sen k\u00e4\u00e4nteisest\u00e4 kartasta. Jos sellaista ei ole, <code>undefined<\/code>palautetaan.<\/p>\n<p>Voimme nyt saada joitain elementtej\u00e4, kuten:<\/p>\n<pre><code>console.log( bimap.get('a')) console.log( bimap.get('A')) <\/code><\/pre>\n<h2>Lis\u00e4\u00e4 elementti kaksisuuntaiseen karttaan<\/h2>\n<p>Kartallamme ei ole t\u00e4ll\u00e4 hetkell\u00e4 tapaa lis\u00e4t\u00e4 elementtej\u00e4, joten lis\u00e4t\u00e4\u00e4n toiminto uusien elementtien lis\u00e4\u00e4miseksi karttaan:<\/p>\n<pre><code>  add( pair) {\n    this.fwdMap[pair[0]] = pair[1]\n    this.revMap[pair[1]] = pair[0]\n  }<\/code><\/pre>\n<p>T\u00e4m\u00e4 vastaanottaa kahden elementin taulukon, jonka kirjoitamme my\u00f6hemmin <a href=\"https:\/\/startfunction.com\/tag\/typescript\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">monikkona TypeScriptill\u00e4<\/a> ja m\u00e4\u00e4ritt\u00e4\u00e4 ne avainarvoiksi molempiin suuntiin vastaaville objekteille.<\/p>\n<p>Ja nyt voimme lis\u00e4t\u00e4 parin ja kysy\u00e4 t\u00e4t\u00e4 uutta paria<\/p>\n<pre><code>bimap.add(['d', 'D'])\nconsole.log( bimap.get('D')) <\/code><\/pre>\n<h2>Tyyppiturvallinen kaksisuuntainen kartta TypeScriptiss\u00e4<\/h2>\n<p>Asioiden parantamiseksi ja kirjoittamisen turvallisuuden parantamiseksi voimme kirjoittaa t\u00e4m\u00e4n uudelleen TypeScriptiss\u00e4 ja lis\u00e4t\u00e4 kirjoitusk\u00e4sitteit\u00e4, kuten yleisen objektin karttaa alusttaessa ja monikkoa, <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/basic-types.html#tuple\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">kun<\/a> lis\u00e4\u00e4t uutta elementti\u00e4.<\/p>\n<pre><code>class BidirectionalMap {\n  fwdMap = {}\n  revMap = {}\n\n  constructor(map: { [key: string]: string }) {\n      this.fwdMap = { ...map }\n      this.revMap = Object.keys(map).reduce(\n          (acc, cur) =&gt; ({\n              ...acc,\n              [map[cur]]: cur,\n          }),\n          {}) }\n\n  get(key: string): string | undefined {\n      return this.fwdMap[key] || this.revMap[key]\n  }\n\n  add(pair: [string, string]) {\n    this.fwdMap[pair[0]] = pair[1]\n    this.revMap[pair[1]] = pair[0]\n  }\n}<\/code><\/pre>\n<p>T\u00e4m\u00e4 kirjoittaminen tekee nyt kartasta t\u00e4ysin turvallisen ja varmistaa, ett\u00e4 t\u00e4ss\u00e4 tapauksessa k\u00e4yt\u00e4mme aina merkkijonoja sek\u00e4 avaimille ett\u00e4 arvoille.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/startfunction.com\" class=\"external external_icon\">startfunction.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Voit kysy\u00e4 n\u00e4it\u00e4 karttoja avaimella ja saada sen arvon tai arvolla ja saada sen avaimen<\/p>\n","protected":false},"author":1,"featured_media":224548,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[750,730,719,895,843],"tags":[1166],"class_list":["post-232326","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-avoin-laehdekoodi","category-javascript-5","category-kehittaejae","category-koodi","category-opetusohjelmia","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/232326","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=232326"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/232326\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/224548"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=232326"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=232326"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=232326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}