{"id":231781,"date":"2023-01-12T11:57:00","date_gmt":"2023-01-12T08:57:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231781"},"modified":"2022-11-10T05:11:50","modified_gmt":"2022-11-10T02:11:50","slug":"5-tipptasemel-javascripti-funktsiooni-koodi-taeiustamiseks","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/5-tipptasemel-javascripti-funktsiooni-koodi-taeiustamiseks\/","title":{"rendered":"5 tipptasemel JavaScripti funktsiooni koodi t\u00e4iustamiseks"},"content":{"rendered":"\n

JavaScripti funktsioonid kasvavad pidevalt ja saavad uusi, nagu operaatorid, s\u00fcntaksikonstruktsioonid, avaldised. Paljud neist on viimastel aastatel kasutusele v\u00f5etud ja m\u00f5ned neist on juba teist laadi, n\u00e4iteks rasva noole =><\/code>avaldis v\u00f5i objekti levitamise ...<\/code>operaator.<\/p>\n

JavaScripti funktsioonid algavad ettepanekutest<\/h2>\n

K\u00f5ik need JavaScripti funktsioonid algavad TC 39-le esitatud ettepanekutest. Tehniline komitee 39<\/a> vastutab standardimise eest:<\/p>\n

\n

\u00fcldotstarbeline, platvormidevaheline, m\u00fc\u00fcja-neutraalne programmeerimiskeel ECMAScript (JavaScript). See h\u00f5lmab keele s\u00fcntaksit, semantikat ning keelt toetavaid teeke ja t\u00e4iendavaid tehnoloogiaid.<\/p>\n<\/blockquote>\n

T\u00e4nu JavaScripti kompilaatorile Babel<\/a> on palju JavaScripti ettepanekuid, mida saame t\u00e4na oma voogu lisada. M\u00f5ned neist pakuvad rohkem selgust, n\u00e4iteks numbriline eraldaja. Teised, nagu do<\/code>avaldised, tutvustavad v\u00f5imalust segada React JSX-i siltidega keerulisi tingimustingimusi.<\/p>\n

Vaatame selles artiklis 5 JavaScripti funktsiooni, mis on veel ettepaneku staadiumis, kuid mida saame Babeliga kasutada ja mis parandavad oluliselt teie kodeerimiskogemust.<\/p>\n

Igal neist on link oma Babeli lehele, kus n\u00e4ete, kuidas Paabelit seda kasutama konfigureerida, kuigi siin kirjeldatud JavaScripti pakutavad funktsioonid on juba Babel 7-ga kaasatud. Igal jaotisel on ka link oma ettepanekule Ecma TC39<\/a> organisatsioonis GitHub<\/a>.<\/p>\n

Nullh coalescing operaator<\/h2>\n

\"5<\/a><\/p>\n

Ettepanek: https:\/\/github.com\/tc39\/proposal-nullish-coalescing<\/a><\/p>\n

Paabel: https:\/\/babeljs.io\/docs\/en\/next\/babel-plugin-proposal-nullish-coalescing-operator.html<\/a><\/p>\n

See JavaScripti ettepanek kirjeldab operaatorit, mis v\u00f5imaldab anda operaatori paremal k\u00fcljel varuv\u00e4\u00e4rtuse, kui muutuja v\u00f5i objekti atribuut on m\u00e4\u00e4ratlemata. Kui see pole m\u00e4\u00e4ratlemata, kasutab see operaatori vasakut poolt:<\/p>\n

const maybeUndef = undefined;\nconst val = maybeUndef ?? 2021; <\/code><\/pre>\n
See sarnaneb kolmepoolse operaatorina kirjutamisega:<\/p>\n
const maybeUndef = undefined;\nconst val = maybeUndef? maybeUndef: 2021; <\/code><\/pre>\n
Pange t\u00e4hele, et see operaator ei kontrolli, kas vari ei eksisteeri. See annab veateate:<\/p>\n
const val = maybeUndef ?? 2021;  <\/code><\/pre>\n
Kuid ettevaatlik, see operaator ei ole 100% nagu kolmekomponentne operaator, mis tagastab esimese k\u00fclje, kui hinnatud tingimus on t\u00f5ene. See ei hinda v\u00e4\u00e4rtusi, mis tavaliselt on JavaScriptis<\/a> valed, v\u00e4\u00e4rtusele false<\/code>. N\u00e4iteks t\u00fchja stringi ei v\u00f5eta arvesse false<\/code>:<\/p>\n
const someEmptyString = '';\nconst val = someEmptyString ?? 'fallback'; <\/code><\/pre>\n
Erinevalt nullist koalesseerimisoperaatorist oleks fallback<\/code>selle hindamise tulemusel visanud kolmepoolne operaator.<\/p>\n
Valikuline aheldamisoperaator<\/h2>\n
\"5<\/a><\/p>\n
Ettepanek: https:\/\/github.com\/tc39\/proposal-optional-chaining<\/a><\/p>\n
Paabel: https:\/\/babeljs.io\/docs\/en\/next\/babel-plugin-proposal-optional-chaining.html<\/a><\/p>\n
See operaator t\u00f6\u00f6tab ka muutujate ja objekti omadustega: see kontrollib, kas pesastatud omadused, mida me l\u00e4bime, on olemas v\u00f5i mitte. Ilma selle operaatorita peame kontrollima iga pesastatud atribuuti:<\/p>\n
const val = anObj && anObj.aProp && anObj.aProp.aNestedProp<\/code><\/pre>\n
Uue valikulise kettimise operaatoriga saame teha midagi sellist:<\/p>\n
const val = anObj.aProp?.aNestedProp<\/code><\/pre>\n
See tundub palju selgem ja kirjutamine on l\u00fchem. See operaator t\u00f6\u00f6tab ka numbrimassiividega, seega on hea kogudega t\u00f6\u00f6tada:<\/p>\n
const val = anObj.anArray[0]?.someProp<\/code><\/pre>\n
Ja me saame virnastada mitu operaatorit:<\/p>\n
const val = anObj.anArray[0]?.someProp?.aNestedProp<\/code><\/pre>\n
Ja mis siis, kui me \u00fchendame selle eelmise, nullilise \u00fchendamisega? Saame s\u00fcntaksi, mis kontrollib iga l\u00e4bitud atribuudi olemasolu ja kui seda ei ole, annab varuv\u00e4\u00e4rtuse:<\/p>\n
const val = anObj.anArray[0]?.someProp ?? 'someDefaultValue'<\/code><\/pre>\n
Kui m\u00f5ni v\u00e4\u00e4rtustest puudub, tagastatakse see someDefaultValue<\/code>. Nende kahe operaatori kombineerimine on suurep\u00e4rane viis lodashi get funktsiooni<\/a> asendamiseks .<\/p>\n
Torujuhtme operaator<\/h2>\n
\"5<\/a><\/p>\n
Ettepanek: https:\/\/github.com\/tc39\/proposal-pipeline-operator<\/a><\/p>\n
Paabel: https:\/\/babeljs.io\/docs\/en\/babel-plugin-proposal-pipeline-op<\/a> e<\/a> rator<\/a><\/p>\n
See operaator on osa mitmest eksperimentaalsest JavaScripti funktsioonist ja see pakub mitme funktsiooni aheldamisel paremat loetavust. Kaaluge j\u00e4rgmist funktsiooni:<\/p>\n
const reverseWords = \n      str => str\n        .split( ' ') .reduce( (revStr, word) => [ word, ...revStr ], []) .join( ' ' );\n\nconsole.log( reverseWords( 'this is fun') ); <\/code><\/pre>\n
Kui meil on vaja neid kokku aheldatud osateisendusi uuesti kasutada, saame need jagada erinevateks funktsioonideks ja seej\u00e4rel nende abil tulemuse koostada:<\/p>\n
const splitBySpace = str => str.split( ' ' );\nconst reverseArray = arr => arr.reduce( (acc, cur) => [ cur, ...acc ], [] );\nconst joinWithSpace = arr => arr.join( ' ' );\n\nconst reverseWords =\n    str => joinWithSpace(\n        reverseArray(\n            splitBySpace(\n                str)) );\n\nconsole.log( reverseWords( 'this is fun') ); <\/code><\/pre>\n
splitBySpace<\/code>Selle juures on veider see, et stringile rakendatud teisenduste m\u00f5istmiseks peame hakkama seda lugema alt, reast \u00fclespoole. See on vastuolus meie loomuliku lugemisvooluga, \u00fclalt alla. Samuti l\u00f5petame k\u00f5igi nende inetute rippuvate sulgudega. Selle v\u00f5iks kirjutada \u00fche reaga ja see pole palju ilusam:<\/p>\n
const reverseWords = str => joinWithSpace( reverseArray( splitBySpace( str)) );<\/code><\/pre>\n
Siin peame alustama lugemist keskfunktsioonist v\u00e4limiste funktsioonide suunas v\u00f5i paremalt vasakule, mis on l\u00e4\u00e4ne vasakult paremale lugemise jaoks vastupidine.<\/p>\n
Torujuhtme operaator saab muuta need konstruktsioonid palju loetavamaks ja sarnaseks aheldamisega, mis meil algselt oli enne teisenduste teisaldamist eraldi funktsioonidesse:<\/p>\n
const reverseWords =\n    str => str\n        |> splitBySpace\n        |> reverseArray\n        |> joinWithSpace;<\/code><\/pre>\n
N\u00fc\u00fcd on rakendatud teisendused kirjutatud sarnaselt meie kirjutamisviisiga, \u00fclalt alla, neid on paremini lugeda ja meil pole \u00fchtegi sulgu rippumas. Edu!<\/p>\n
Numbriline eraldaja<\/h2>\n
\"5<\/a><\/p>\n
Ettepanek: https:\/\/github.com\/tc39\/proposal-numeric-separator<\/a><\/p>\n
Paabel: https:\/\/babeljs.io\/docs\/en\/next\/babel-plugin-proposal-numeric-separator.html<\/a><\/p>\n
See numbriline eraldaja erineb teistest JavaScripti funktsioonidest, kuna see ei ole operaator. See on s\u00fcntaksikonstruktsioon, mis muudab numbrilised literaalid loetavamaks, luues numbrir\u00fchmade visuaalse eraldamise. Suuri arvulisi literaale on raske s\u00f5eluda ja kiiresti m\u00f5ista, eriti kui numbrit korratakse mitu korda. N\u00e4iteks:<\/p>\n
const longNum = 1000000000000;<\/code><\/pre>\n
Kiire pilguga on raske aru saada. See eraldaja muudab selle loetavamaks:<\/p>\n
const longNum = 1_000_000_000_000;<\/code><\/pre>\n
N\u00fc\u00fcd saame kiiresti aru, et see on triljon.<\/p>\n
Tehke v\u00e4ljendeid<\/h2>\n
\"5<\/a><\/p>\n
Ettepanek: https:\/\/github.com\/tc39\/proposal-do-expressions<\/a><\/p>\n
Paabel: https:\/\/babeljs.io\/docs\/en\/babel-plugin-proposal-do-expressions<\/a><\/p>\n
Viimane uutest JavaScripti funktsioonidest, mida me l\u00e4bime, on avaldis, mida saab hinnata. Selle avaldise tulemus tuleb p\u00e4rast ploki t\u00e4itmist, milles v\u00f5ib olla mitu lauset. Saame h\u00f5lpsasti aru do-avaldistest, kui t\u00f5lgime sellise kolmeosalise operaatori avaldise:<\/p>\n
const res = isCold( color )? 'light-blue': 'orange';<\/code><\/pre>\n
Kirjutaksime samav\u00e4\u00e4rse do{}<\/code>avaldise j\u00e4rgmiselt:<\/p>\n
const res = do {\n    if (isCold( color)) {\n        'light-blue';\n    } else {\n        'orange';\n    }\n};<\/code><\/pre>\n
Pange t\u00e4hele, et me ei pea v\u00e4\u00e4rtust tagastama, kuna see pole funktsioon. Kui sel konkreetsel juhul saab selle kolmeosalisemalt kirjutada, on do-avaldised palju v\u00f5imsamad, v\u00f5imaldades n\u00e4iteks mitut avaldust:<\/p>\n
const res = do {\n    if (isCold( color)) {\n        'light-blue';\n    } else if (isHot( color)) {\n        'orange';\n    } else if (isRain( color)) {\n        'purple';\n    } else {\n        'green';\n    }\n};<\/code><\/pre>\n
See on t\u00f5esti v\u00f5imas JSX-is, kus saame selle selle siltidega segada, ilma et peaksime tulemust esmalt v\u00e4liselt arvutama. N\u00e4iteks kui kasutaksime nende komponentide renderdamiseks Reacti, saaksime teha j\u00e4rgmist.<\/a><\/p>\n
const MyComp = ({ color }) => ({\n            do {\n                if (isCold( color)) {\n                    ;\n                } else if (isHot( color)) {\n                    ;\n                } else if (isRain( color)) {\n                    ;\n                } else {\n                    ;\n                }\n            }\n        }\n\n);<\/code><\/pre>\n
Veel JavaScripti ettepanekuid<\/h2>\n
Iga p\u00e4ev arutatakse rohkem ettepanekuid JavaScripti keelele huvitavamate funktsioonide lisamiseks. Nende pakutud JavaScripti funktsioonide j\u00e4rjest suurenevat loendit saab lugeda aadressil https:\/\/github.com\/tc39\/proposals#ecmascript-proposals<\/a>. Siin esitatud ettepanekud on peaaegu l\u00f5pule j\u00f5udmas ja seega peaaegu lisamisele ECMAScripti standardisse, nagu on selgitatud selles aktsepteerimisprotsessi<\/a> kirjeldavas tabelis .<\/p>\n
M\u00f5ned uued JavaScripti funktsioonid, mida me selles artiklis uurisime, nagu do-avaldised v\u00f5i konveierioperaator, on 1 etapi ettepanekud<\/a>, mis t\u00e4hendab, et enne ECMAScripti standardi osaks saamist on neil veel palju teha.<\/p>\n
:  startfunction.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Lugege 5 uue JavaScripti funktsiooni, operaatori ja avaldise kohta, mis parandavad teie koodi, muutes selle loetavamaks ja t\u00f5husamaks.<\/p>\n","protected":false},"author":1,"featured_media":157555,"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-231781","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\/231781","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=231781"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/231781\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/157555"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=231781"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=231781"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=231781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}