{"id":231802,"date":"2023-01-13T20:48:00","date_gmt":"2023-01-13T17:48:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231802"},"modified":"2022-11-10T05:16:27","modified_gmt":"2022-11-10T02:16:27","slug":"kuidas-luua-javascriptis-kahesuunalist-kaarti","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/kuidas-luua-javascriptis-kahesuunalist-kaarti\/","title":{"rendered":"Kuidas luua JavaScriptis kahesuunalist kaarti"},"content":{"rendered":"\n<p>Kahesuunaline kaart on arvutiteaduse mudel, kus v\u00f5tme ja v\u00e4\u00e4rtuse paaridel on v\u00f5tmete ja v\u00e4\u00e4rtuste vahel bijektiivne 1-1 suhe. See v\u00f5imaldab meil mitte ainult teha p\u00e4ringuid v\u00f5tme j\u00e4rgi ja saada v\u00e4\u00e4rtust, vaid ka teha p\u00e4ringuid v\u00e4\u00e4rtuse j\u00e4rgi ja saada v\u00f5ti. Vaatame, kuidas rakendada JavaScriptis kahesuunalist kaarti ja muudame selle hiljem TypeScriptis turvaliseks<\/p>\n<h2>Arvutiteadus ja matemaatika taga<\/h2>\n<p>Haarame kahesuunalise kaardi p\u00f5hidefinitsiooni:<\/p>\n<blockquote>\n<p>Arvutiteaduses on <strong>kahesuunaline kaart<\/strong> assotsiatiivne andmestruktuur, milles v\u00f5tme-v\u00e4\u00e4rtuste paarid moodustavad \u00fcks-\u00fchele vastavuse. Seega on binaarsuhe funktsionaalne igas suunas: iga v\u00e4\u00e4rtuse saab vastendada ka kordumatu v\u00f5tmega.<\/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=\"Kuidas luua JavaScriptis kahesuunalist kaarti\" ><\/a><\/p>\n<p>Krediit: <a href=\"https:\/\/en.wikipedia.org\/wiki\/Bidirectional_map\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">kahesuunaline kaart<\/a><\/p>\n<p>Arvutiteaduse kahesuunalise kaardi juured on matemaatilises funktsioonis, mida nimetatakse bijektsiooniks. Seos paari komponentide ja selle iga komponendi vahel erinevates komplektides on bijektiivne funktsioon, mida nimetatakse ka inverteeritavaks funktsiooniks, mis on funktsioon, mis t\u00f6\u00f6tab m\u00f5lemal viisil, sidudes t\u00e4pselt \u00fche elemendi \u00fchest hulgast t\u00e4pselt \u00fche elemendiga. teine \u200b\u200bkomplekt:<\/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=\"Kuidas luua JavaScriptis kahesuunalist kaarti\" ><\/a><\/p>\n<p>Krediit: <a href=\"https:\/\/en.wikipedia.org\/wiki\/Bijection\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Bijection<\/a><\/p>\n<p>Seda silmas pidades saame teada, et \u00fclaltoodud komplektide bijektiivne funktsioon annab midagi sellist:<\/p>\n<p>f (1) = D<br \/>\nf (C) = 3<\/p>\n<p>Teine asi, mis tuleneb bijektiivsest funktsioonist, on see, et komplektid on t\u00e4pselt sama pikkusega, vastasel juhul bijekteerimine eba\u00f5nnestub.<\/p>\n<h2>Kahesuunalise kaardi l\u00e4htestamine<\/h2>\n<p>Modelleerime selle <a href=\"https:\/\/startfunction.com\/category\/javascript\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">JavaScripti<\/a> klassiga, mis l\u00e4htestatakse v\u00f5tme-v\u00e4\u00e4rtuste paaride objektiga:<\/p>\n<pre><code>const bimap = new BidirectionalMap({\n  a: 'A',\n  b: 'B',\n  c: 'C',\n})<\/code><\/pre>\n<p>Sisemiselt loome kaks loendit. \u00dcks loend salvestab paaride loendi, mida me nimetame edasisuunavaks kaardiks, kus v\u00f5tmekaardid v\u00e4\u00e4rtusele ja on koopia objektist, mida kasutasime kahesuunalise kaardi l\u00e4htestamiseks. Teist loendit nimetatakse p\u00f6\u00f6rdkaardiks ja see salvestab kahesuunalise kaardi l\u00e4htestamiseks kasutatud objekti versiooni, kus v\u00f5tme ja v\u00e4\u00e4rtuse paarid on \u00fcmber p\u00f6\u00f6ratud ja &quot;v\u00e4\u00e4rtus&quot; vastendatakse n\u00fc\u00fcd &quot;v\u00f5tmega&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>Pange t\u00e4hele, et kahesuunalise kaardi l\u00e4htestava objekti olemuse t\u00f5ttu ei saa te v\u00f5tme jaoks numbrit kasutada, kuid saate seda siiski kasutada v\u00e4\u00e4rtusena ja saate hiljem selle j\u00e4rgi p\u00e4ringuid teha:<\/p>\n<pre><code>const bimap = new BidirectionalMap({\n  a: 42,\n  b: 'B',\n  c: 'C',\n})<\/code><\/pre>\n<p>J\u00f5ulisema, kuid ka keerukama versiooni saab kirjutada JavaScripti <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Map\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">kaardi andmet\u00fc\u00fcbiga<\/a> ja lubada v\u00f5tmeid, mis on numbrid, funktsioonid v\u00f5i isegi NaN.<\/p>\n<h2>Hankige element kahesuunaliselt kaardilt<\/h2>\n<p>Seni on meil andmestruktuur, mis majutab kahte objekti, millest \u00fcks on v\u00f5tmev\u00e4\u00e4rtuste poolest teise peegel. N\u00fc\u00fcd vajame meetodit, et sellest midagi v\u00e4lja saada. Rakendame <code>get()<\/code>funktsiooni:<\/p>\n<pre><code>  get( key) {\n      return this.fwdMap[key] || this.revMap[key]\n  }<\/code><\/pre>\n<p>See on v\u00e4ga lihtne: kui see on p\u00e4rikaardil olemas, tagastame selle, vastasel juhul tagastame tagurpidi kaardil. Kui seda pole, <code>undefined<\/code>tagastatakse.<\/p>\n<p>N\u00fc\u00fcd saame m\u00f5ned elemendid, n\u00e4iteks:<\/p>\n<pre><code>console.log( bimap.get('a')) console.log( bimap.get('A')) <\/code><\/pre>\n<h2>Lisage kahesuunalisele kaardile element<\/h2>\n<p>Meie kaardil ei ole praegu v\u00f5imalust rohkem elemente lisada, seega lisame funktsiooni uute elementide lisamiseks kaardile:<\/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>See v\u00f5tab vastu kahest elemendist koosneva massiivi, mille tippime hiljem <a href=\"https:\/\/startfunction.com\/tag\/typescript\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">TypeScriptiga kortee\u017eina<\/a> ja m\u00e4\u00e4rab need v\u00f5tmetena \u2013 m\u00f5lemas suunas vastavatele objektidele v\u00e4\u00e4rtused.<\/p>\n<p>Ja n\u00fc\u00fcd saame paari lisada ja selle uue paari kohta p\u00e4ringuid teha<\/p>\n<pre><code>bimap.add(['d', 'D'])\nconsole.log( bimap.get('D')) <\/code><\/pre>\n<h2>T\u00fc\u00fcbikindel kahesuunaline kaart TypeScriptis<\/h2>\n<p>Asjade paremaks muutmiseks ja tippimise turvaliseks muutmiseks saame selle TypeScriptis \u00fcmber kirjutada ja lisada tippimism\u00f5isteid, nagu kaardi l\u00e4htestamisel \u00fcldine objekt ja uue elemendi lisamisel <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/basic-types.html#tuple\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">kortee\u017e .<\/a><\/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>See tippimine muudab meie kaardi n\u00fc\u00fcd t\u00e4iesti turvaliseks ja tagab, et sel juhul kasutame alati nii v\u00f5tmete kui ka v\u00e4\u00e4rtuste jaoks stringe.<\/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>Saate nendelt kaartidelt p\u00e4ringuid teha v\u00f5tme j\u00e4rgi ja saada selle v\u00e4\u00e4rtuse v\u00f5i v\u00e4\u00e4rtuse j\u00e4rgi ja hankida selle v\u00f5tme<\/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":[718,749,729,894,842],"tags":[1165],"class_list":["post-231802","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arendaja","category-avatud-laehtekoodiga","category-javascript-4","category-kood","category-opetused","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/231802","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=231802"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/231802\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/224548"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=231802"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=231802"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=231802"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}