Top 11 (a více!) funkcí JavaScriptu, které musíte znát

autor:
Tweet
Share
Share
Pin

Kód chytře! Staňte se rychlejším, produktivnějším a šťastnějším vývojářem JavaScriptu díky zvládnutí těchto nejdůležitějších a opakujících se funkcí v jazyce.

Ať už je to backend nebo frontend (nebo dokonce kosmické lodě), JavaScript je všude. Je to také poměrně flexibilní jazyk (což znamená, že má hardcore funkční programovací vzory a také dobré staré třídy) a jeho podobnost s jinými jazyky „podobnými C“ umožňuje vývojářům snadný přechod z jiných jazyků.

Pokud chceš zvyšte úroveň své hry JSNavrhuji, abyste se naučili, procvičili a nakonec zvládli následující základní funkce dostupné v tomto jazyce. Ne všechny jsou vyloženě „potřebné“ pro řešení problémů, ale v některých případech pro vás mohou udělat hodně těžké práce, zatímco v jiných mohou snížit množství kódu, který musíte napsat.

mapa()

Bylo by kacířství napsat článek o důležitých funkcích JavaScriptu a nezmínit se o map()! 😆😆 Spolu s filter() a reduction() tvoří map() svatou trojici druhů. Toto jsou funkce, které budete ve své kariéře používat znovu a znovu, takže stojí za to se na ně podívat. Pojďme se s nimi vypořádat jeden po druhém, počínaje map().

map() patří mezi ty funkce, které lidem s učením JavaScriptu dělají největší potíže. Proč? Ne proto, že by na tom bylo něco přirozeně složitého, ale protože způsob, jakým tato funkce funguje, je myšlenka převzatá z toho, co se nazývá funkční programování. A protože nejsme vystaveni funkcionálnímu programování – naše školy a průmysl je plný objektově orientovaných jazyků – naše zaujaté mozky se to fungování zdá podivné nebo dokonce špatné.

JavaScript je mnohem funkčnější než objektově orientovaný, i když jeho moderní verze se snaží tuto skutečnost skrýt. Ale to je celá plechovka červů, kterou možná někdy jindy otevřu. 🤣 Dobře, takže mapa() . . .

map() je velmi jednoduchá funkce; připojí se k poli a pomůže nám převést každou položku na něco jiného, ​​což vede k novému poli. Jak přesně převést položku je poskytováno jako další funkce, která je podle konvence anonymní.

To je všechno! Na syntaxi může být potřeba si trochu zvyknout, ale v podstatě to je to, co děláme ve funkci map(). Proč bychom mohli chtít použít map()? Záleží na tom, čeho se snažíme dosáhnout. Řekněme například, že jsme zaznamenali teplotu pro každý den minulého týdne a uložili ji jako jednoduché pole. Nyní nám však bylo řečeno, že přístroje nebyly příliš přesné a hlásily o 1,5 stupně nižší teplotu, než měly.

Tuto opravu můžeme provést pomocí funkce map() takto:

const weeklyReadings = [20, 22, 20.5, 19, 21, 21.5, 23];

const correctedWeeklyReadings = weeklyReadings.map(reading => reading + 1.5);

console.log(correctedWeeklyReadings); // gives [ 21.5, 23.5, 22, 20.5, 22.5, 23, 24.5 ]

Další, velmi praktický příklad pochází ze světa Reactu, kde je vytváření seznamů prvků DOM z polí běžným vzorem; takže něco takového je běžné:

export default ({ products }) => {
    return products.map(product => {
        return (
            <div className="product" key={product.id}>
                <div className="p-name">{product.name}</div>
                <div className="p-desc">{product.description}</div>
            </div>
        );
    });
};

Zde máme funkční komponentu React, která dostává jako rekvizity seznam produktů. Z tohoto seznamu (pole) pak sestaví seznam HTML „divs“, v podstatě převede každý objekt produktu do HTML. Objekt původních produktů zůstává nedotčen.

Můžete namítnout, že map() není nic jiného než oslavovaná smyčka for a měli byste úplnou pravdu. Ale všimněte si, že jakmile tento argument uvedete, je to vaše objektově orientovaná trénovaná mysl, která mluví, zatímco tyto funkce a jejich zdůvodnění pocházejí z funkčního programování, kde jsou uniformita, kompaktnost a elegance vysoce ctěny. 🙂

filtr()

filter() je velmi užitečná funkce, kterou budete v mnoha situacích používat znovu a znovu. Jak název napovídá, tato funkce filtruje pole na základě zadaných pravidel/logiky a vrací nové pole obsahující položky, které tato pravidla splňují.

Použijme znovu náš příklad počasí. Předpokládejme, že máme pole obsahující maximální teploty pro každý den minulého týdne; nyní chceme zjistit, kolik z těch dnů bylo chladnějších. Ano, „chladnější“ je subjektivní pojem, takže řekněme, že hledáme dny, kdy byla teplota nižší než 20. Můžeme to udělat pomocí funkce filter() takto:

const weeklyReadings = [20, 22, 20.5, 19, 21, 21.5, 23];

const colderDays = weeklyReadings.filter(dayTemperature => {
    return dayTemperature < 20;
});

console.log("Total colder days in week were: " + colderDays.length); // 1

Všimněte si, že anonymní funkce, kterou předáme do filter(), musí vrátit booleovskou hodnotu: true nebo false. Takto bude filter() vědět, zda má nebo nemá tuto položku zahrnout do filtrovaného pole. Do této anonymní funkce můžete napsat libovolné množství složité logiky; můžete provádět volání API a číst uživatelské vstupy a tak dále, pokud se ujistíte, že nakonec vracíte booleovskou hodnotu.

Pozor: Toto je vedlejší poznámka, kterou jsem nucen poskytnout na základě svých zkušeností jako vývojář JavaScriptu. Ať už je to kvůli nedbalosti nebo špatným základům, mnoho programátorů vytváří ve svých programech jemné chyby při použití filter(). Pojďme přepsat předchozí kód tak, aby obsahoval chybu:

const weeklyReadings = [20, 22, 20.5, 19, 21, 21.5, 23];

const colderDays = weeklyReadings.filter(dayTemperature => {
    return dayTemperature < 20;
});

if(colderDays) {
    console.log("Yes, there were colder days last week");
} else {
    console.log("No, there were no colder days");
}

Všimli jste si něčeho? Skvělá práce, pokud ano! Podmínka if ke konci kontroluje colderDays, což je ve skutečnosti pole! Budete překvapeni, kolikrát lidé tuto chybu udělají, když se ve špatné náladě (z jakéhokoli důvodu) předhánějí ve splnění termínů nebo kódu. Problém s touto podmínkou je, že JavaScript je v mnoha ohledech podivný a nekonzistentní jazyk a „pravdivost“ věcí je jedním z nich. Zatímco [] == true vrací false, takže si myslíte, že výše uvedený kód není porušen, realita je taková, že uvnitř podmínky if, [] hodnotí jako pravdivé! Jinými slovy, kód, který jsme napsali, nikdy nebude říkat, že minulý týden nebyly žádné chladnější dny.

  Jak naskenovat Snapcode uložený do role fotoaparátu

Oprava je velmi jednoduchá, jak je uvedeno v kódu před výše uvedeným kódem. Kontrolujeme colderDays.length, který nám zaručeně dá celé číslo (nulu nebo vyšší) a funguje tak konzistentně v logických porovnáváních. Všimněte si, že filter() bude vždy, vždy, vždy vracet pole, prázdné nebo neprázdné, takže se na to můžeme spolehnout a s jistotou psát naše logická srovnání.

Byla to delší zajížďka, než jsem plánoval, ale chyby, jako je tato, stojí za to upozornit deseti tisíci slovy, v případě potřeby velkými písmeny. Doufám, že se tím nenecháte skousnout a ušetříte si stovky hodin úsilí při ladění! 🙂

snížit()

Ze všech funkcí v tomto článku, stejně jako ve standardní JavaScriptové knihovně, patří reduction() k předním hráčům „matoucích a divných“. I když je tato funkce velmi důležitá a v mnoha situacích vede k elegantnímu kódu, většina vývojářů JavaScriptu se jí vyhýbá a raději píší podrobnější kód.

Důvod je ten – a tady budu upřímný! — Redukovat() je těžké pochopit, jak ve smyslu konceptu, tak ve smyslu provedení. Když si přečtete jeho popis, přečetli jste si ho několikrát a stále pochybujete, zda jste jej nečetli špatně; a když to uvidíte v akci a zkusíte si představit, jak to funguje, váš mozek se zkroutí do tisíce uzlů! 🤭

Teď se neboj. Funkce redukovat() se ve složitosti a zastrašování ani zdaleka neblíží, řekněme, B+ stromy a jejich algoritmy. Jde jen o to, že s tímto druhem logiky se průměrný programátor během denní práce jen zřídka setká.

Takže poté, co jsem z vás vyděsil denní světlo a pak jsem vám okamžitě řekl, abyste si nedělali starosti, bych vám konečně rád ukázal, co je tato funkce a proč přesně ji můžeme potřebovat.

Jak název napovídá, reduction() se používá k redukci něčeho. Věc, kterou redukuje, je pole a věc, na kterou redukuje dané pole, je jediná hodnota (číslo, řetězec, funkce, objekt, cokoliv). Zde je jednodušší způsob, jak to vyjádřit — reduction() transformuje pole na jedinou hodnotu. Všimněte si, že vrácená hodnota z reduction() není pole, což je případ map() a filter(). Pochopit toto je už polovina úspěchu. 🙂

Nyní je docela zřejmé, že pokud se chystáme transformovat (zmenšit) pole, musíme dodat nezbytnou logiku; a na základě vašich zkušeností jako vývojář JS jste už asi uhodli, že to děláme pomocí funkce. Této funkci říkáme redukční funkce, která tvoří první argument pro snížení(). Druhým argumentem je počáteční hodnota, jako je číslo, řetězec atd. (za chvíli vysvětlím, co je to sakra za „počáteční hodnotu“).

Na základě našich dosavadních znalostí můžeme říci, že volání funkce reduction() vypadá takto: array.reduce(reducerFunction, beginValue). Nyní se zaměřme na jádro celé věci: funkci redukce. Jak již bylo stanoveno, funkce redukce je to, co říká redukci(), jak převést pole na jedinou hodnotu. Vyžaduje dva argumenty: proměnnou, která funguje jako akumulátor (nebojte se, vysvětlím i tento bit), a proměnnou pro uložení aktuální hodnoty.

Já vím, já vím . . . to byla spousta terminologie pro jedinou funkci, která není ani povinná v JavaScriptu. 😝😝 A to je důvod, proč lidé utíkají před snížit(). Ale pokud se to naučíte krok za krokem, nejenže to pochopíte, ale také to oceníte, až se stanete lepším vývojářem.

Dobře, takže zpět k aktuálnímu tématu. „Počáteční hodnota“ předávaná redukci() je . . . počáteční hodnota pro výpočet, který chcete použít. Například, pokud budete násobit ve funkci reduktor, počáteční hodnota 1 dává smysl; navíc můžete začít s 0 a tak dále.

Nyní se podíváme na signaturu pro funkci redukce. Funkce redukce předávaná do funkce reduction() má následující tvar: redukční funkce (akumulátor, aktuální hodnota). „Akumulátor“ je pouze ozdobný název pro proměnnou, která shromažďuje a uchovává výsledek výpočtu; je to přesně jako použití proměnné s názvem total k sečtení všech položek v poli pomocí něčeho jako total += arr[i]. Přesně takto se použije funkce redukce v redukci(): akumulátor je zpočátku nastaven na počáteční hodnotu, kterou zadáte, a pak se jeden po druhém navštíví prvky v poli, provede se výpočet a výsledek se uloží do akumulátor a tak dále. . .

Jaká je tedy tato „aktuální hodnota“ ve funkci reduktoru? Je to stejná myšlenka, jakou byste si v duchu představili, kdybych vás požádal o procházení pole: vzali byste proměnnou, která by začínala na indexu nula, a posouvali ji o krok vpřed. Když to děláte, když vás požádám, abyste se náhle zastavili, ocitli byste se na jednom z prvků pole, že? To je to, co máme na mysli pod pojmem aktuální hodnota: je to hodnota proměnné použité k reprezentaci položky pole, která je aktuálně zvažována (přemýšlejte o opakování pole, pokud to pomůže).

Se vším, co bylo řečeno, je čas podívat se na jednoduchý příklad a podívat se, jak se celý tento žargon spojuje ve skutečném volání reduction(). Řekněme, že máme pole obsahující prvních n přirozených čísel (1, 2, 3 … n) a zajímá nás nalezení faktoriálu n. Víme, že najít n! prostě potřebujeme vše vynásobit, což nás vede k této implementaci:

const numbers = [1, 2, 3, 4, 5];
const factorial = numbers.reduce((acc, item) => acc * item, 1);
console.log(factorial); // 120

V těchto pouhých třech řádcích kódu se toho děje hodně, takže to pojďme rozbalit jeden po druhém v kontextu (velmi dlouhé) diskuse, kterou jsme až dosud vedli. Jak je zřejmé, čísla je pole, které obsahuje všechna čísla, která chceme násobit. Dále se podívejte na volání numbers.reduce(), které říká, že počáteční hodnota pro acc by měla být 1 (protože neovlivňuje ani neruší žádné násobení). Dále zkontrolujte tělo funkce redukce, `(acc, item) => acc * položka, která jednoduše říká, že návratová hodnota pro každou iteraci v poli by měla být tato položka vynásobená tím, co je již v akumulátoru. Iterace a vlastně ukládání násobení explicitně do akumulátoru je to, co se děje za scénou, a je jedním z největších důvodů, proč je reduction() takovým kamenem úrazu pro vývojáře JavaScriptu.

  Jak poslouchat Spotify offline na hodinkách Samsung

Proč používat snížit()?

Je to opravdu skvělá otázka a abych byl upřímný, nemám jednoznačnou odpověď. Cokoli redukční() dělá, lze provádět pomocí smyček, forEach() atd. Tyto techniky však vedou k mnohem většímu množství kódu, což ztěžuje čtení, zvláště pokud spěcháte. Pak je tu starost o neměnnost: s funkcemi reduction() a podobnými funkcemi si můžete být jisti, že vaše původní data nebyla zmutována; to samo o sobě eliminuje celé třídy chyb, zejména v distribuovaných aplikacích.

A konečně, reduction() je mnohem flexibilnější v tom smyslu, že akumulátorem může být objekt, pole nebo dokonce funkce, je-li to potřeba; totéž platí pro počáteční hodnotu a další části volání funkce – dovnitř může vstoupit téměř cokoli a téměř cokoliv vyjít, takže při navrhování opakovaně použitelného kódu existuje extrémní flexibilita.

Pokud stále nejste přesvědčeni, je to také naprosto v pořádku; komunita JavaScriptu sama o sobě je ostře rozdělena na „kompaktnost“, „eleganci“ a „sílu“ funkce reduction(), takže je v pořádku, pokud ji nepoužíváte. 🙂 Ale určitě se na nějaké podívejte pěkné příklady než se rozhodnete bin snížit().

nějaký()

Řekněme, že máte řadu objektů, přičemž každý objekt představuje osobu. Chcete vědět, zda jsou v poli lidé starší 35 let. Všimněte si, že není třeba počítat, kolik takových lidí je, natož získat jejich seznam. To, co zde říkáme, je ekvivalentem „jeden nebo více“ nebo „alespoň jeden“.

Jak to děláš?

Ano, můžete vytvořit proměnnou flag a smyčku přes pole, abyste tento problém vyřešili takto:

const persons = [
    {
        name: 'Person 1',
        age: 32
    },
    
    {
        name: 'Person 2',
        age: 40
    },
];

let foundOver35 = false;

for (let i = 0; i < persons.length; i ++) {
    if(persons[i].age > 35) {
        foundOver35 = true;
        break;
    }
}

if(foundOver35) {
    console.log("Yup, there are a few people here!")
}

Problém? Kód je podle mého názoru příliš podobný C nebo Java. „Verbose“ je další slovo, které mě napadá. Zkušený JS by mohl myslet na „ošklivé“, „strašné“ atd. 😝 A právem, tvrdil bych. Jedním ze způsobů, jak vylepšit tento kus kódu, je použít něco jako map(), ale i tak je řešení trochu neohrabané.

Ukázalo se, že máme poměrně úhlednou funkci nazvanou some() již dostupnou v základním jazyce. Tato funkce pracuje s poli a přijímá vlastní funkci „filtrování“, která vrací booleovskou hodnotu true nebo false. V podstatě dělá to, o co jsme se posledních pár minut snažili, jen velmi stručně a elegantně. Můžeme jej použít takto:

const persons = [
    {
        name: 'Person 1',
        age: 32
    },
    
    {
        name: 'Person 2',
        age: 40
    },
];

if(persons.some(person => {
    return person.age > 35
})) {
    console.log("Found some people!")
}

Stejný vstup, stejný výsledek jako předtím; ale všimněte si masivní redukce kódu! Všimněte si také, jak drasticky se snižuje kognitivní zátěž, protože již nepotřebujeme analyzovat kód řádek po řádku, jako bychom byli sami interpretem! Kód se nyní čte téměř jako přirozený jazyk.

každý()

Stejně jako some() máme další užitečnou funkci nazvanou every(). Jak již můžete hádat, i toto vrací booleovskou hodnotu v závislosti na tom, zda všechny položky v poli projdou daným testem. Test, který je třeba splnit, je samozřejmě většinu času dodáván jako anonymní funkce. Ušetřím vás bolesti z toho, jak může vypadat naivní verze kódu, takže zde je návod, jak se používá every():

const entries = [
    {
        id: 1
    },
    
    {
        id: 2
    },
    
    {
        id: 3  
    },
];

if(entries.every(entry => {
    return Number.isInteger(entry.id) && entry.id > 0;
})) {
    console.log("All the entries have a valid id")
}

Jak je zřejmé, kód kontroluje všechny objekty v poli na platnou vlastnost id. Definice „platného“ závisí na kontextu problému, ale jak vidíte, pro tento kód jsem uvažoval o nezáporných celých číslech. Opět vidíme, jak jednoduché a elegantní je čtení kódu, což je jediným cílem této (a podobných) funkcí.

zahrnuje()

Jak zkontrolujete existenci dílčích řetězců a prvků pole? No, pokud jste jako já, rychle sáhnete po indexOf() a pak vyhledáte dokumenty, abyste věděli, jaké jsou možné návratové hodnoty. Je to značná nepříjemnost a návratové hodnoty jsou těžko zapamatovatelné (rychlé – co znamená proces, který vrací 2 do operačního systému?).

Ale je tu hezká alternativa, kterou můžeme využít: include(). Použití je stejně jednoduché jako název a výsledný kód je extrémně hřejivý. Mějte na paměti, že porovnávání se provádí pomocí include() rozlišuje velká a malá písmena, ale myslím, že to stejně všichni intuitivně očekáváme. A teď je čas na nějaký kód!

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(4));
const name = "Ankush";
console.log(name.includes('ank')); // false, because first letter is in small caps
console.log(name.includes('Ank')); // true, as expected

Od této skromné ​​metody však nečekejte příliš mnoho:

const user = {a: 10, b: 20};
console.log(user.includes('a')); // blows up, as objects don't have a "includes" method

Nemůže se dívat dovnitř objektů, protože prostě není pro objekty definován. Ale hej, víme, že to funguje na polích, takže možná můžeme udělat nějaký trik. . . 🤔.

const persons = [{name: 'Phil'}, {name: 'Jane'}];
persons.includes({name: 'Phil'});

Takže, co se stane, když spustíte tento kód? Neexploduje, ale výstup je také zklamáním: falešný. 😫😫 Ve skutečnosti to souvisí s objekty, ukazateli a tím, jak JavaScript vidí a spravuje paměť, což je vlastní svět. Pokud se chcete ponořit hlouběji, klidně se vrhněte (možná začněte tady), ale tady se zastavím.

Můžeme přimět výše uvedený kód, aby se choval, pokud jej přepíšeme následovně, ale v tuto chvíli se to podle mého názoru víceméně stává vtipem:

const phil = {name: 'Phil'};
const persons = [phil, {name: 'Jane'}];
persons.includes(phil); // true

Přesto to ukazuje, že dokážeme, aby include() fungovalo na objektech, takže si myslím, že to není úplná katastrofa. 😄

  Jak někoho vyhodit z Netflixu

plátek()

Předpokládejme, že máme řetězec a požádám vás, abyste vrátili jeho část, která začíná „r“ a končí „z“ (skutečné znaky nejsou důležité). Jak byste k tomu přistoupil? Možná byste vytvořili nový řetězec a použili jej k uložení všech potřebných znaků a jejich vrácení. Nebo pokud jste jako většina programátorů, dali byste mi na oplátku dva indexy pole: jeden označující začátek podřetězce a druhý označující konec.

Oba tyto přístupy jsou v pořádku, ale existuje koncept zvaný krájení, který v takových situacích nabízí elegantní řešení. Naštěstí neexistuje žádná srozumitelná teorie, kterou by se dalo následovat; krájení znamená přesně to, co zní — vytvoření menšího provázku/pole z daného, ​​podobně jako vytváříme plátky ovoce. Podívejme se, co tím myslím, pomocí jednoduchého příkladu:

const headline = "And in tonight's special, the guest we've all been waiting for!";
const startIndex = headline.indexOf('guest');
const endIndex = headline.indexOf('waiting');
const newHeadline = headline.slice(startIndex, endIndex);
console.log(newHeadline); // guest we've all been

Když provádíme slice(), poskytujeme JavaScriptu dva indexy – jeden, kde chceme dělení začít, a druhý, kde chceme, aby se zastavilo. Háček s slice() je v tom, že koncový index není zahrnut v konečném výsledku, což je důvod, proč vidíme, že v novém nadpisu ve výše uvedeném kódu chybí slovo „čekání“.

Pojmy jako krájení jsou výraznější v jiných jazycích, zejména v Pythonu. Pokud se zeptáte těchto vývojářů, řeknou, že si nedokážou představit život bez této funkce, a je to tak správně, když jazyk poskytuje velmi úhlednou syntaxi pro krájení.

Krájení je úhledné a extrémně pohodlné a není důvod ho nepoužívat. Také to není syntaktický cukr prošpikovaný výkonnostní penalizací, protože vytváří mělké kopie původního pole/řetězce. Vývojářům JavaScriptu důrazně doporučuji seznámit se s slice() a přidat jej do svého arzenálu!

spoj ()

Metoda splice() zní jako příbuzná metody slice() a v některých ohledech můžeme tvrdit, že tomu tak je. Oba vytvářejí nová pole/řetězce z původních, s jedním malým, ale důležitým rozdílem – splice() odstraňuje, mění nebo přidává prvky, ale upravuje původní pole. Toto „zničení“ původního pole může způsobit obrovské problémy, pokud nejste opatrní nebo nerozumíte hlubokým kopiím a odkazům. Zajímalo by mě, co bránilo vývojářům používat stejný přístup jako pro slice() a ponechat původní pole nedotčené, ale myslím, že můžeme být k jazyku shovívavější vytvořeno za pouhých deset dní.

Bez ohledu na mé stížnosti se pojďme podívat na to, jak splice() funguje. Ukážu příklad, kdy odstraníme několik prvků z pole, protože toto je nejčastější použití, které pro tuto metodu najdete. Také se zdržím uvádění příkladů sčítání a vkládání, protože tyto lze snadno vyhledat a jsou také jednoduché.

const items = ['eggs', 'milk', 'cheese', 'bread', 'butter'];
items.splice(2, 1);
console.log(items); // [ 'eggs', 'milk', 'bread', 'butter' ]

Výše uvedené volání splice() říká: začněte na indexu 2 (tedy na třetím místě) pole a odeberte jednu položku. V daném poli je „sýr“ třetí položkou, takže se z pole odstraní a pole položek se zkrátí, jak se očekávalo. Mimochodem, odstraněné položky se vrátí pomocí splice() ve formě nebo v poli, takže pokud bychom chtěli, mohli jsme zachytit ‚sýr‘ do proměnné.

Podle mých zkušeností mají indexOf() a splice() velkou synergii — najdeme index položky a poté jej z daného pole odstraníme. Všimněte si však, že to není vždy nejúčinnější metoda a často je použití klíčů objektu (ekvivalent hash mapy) mnohem rychlejší.

posun()

shift() je pohodlná metoda řazení a používá se k odstranění prvního prvku pole. Všimněte si, že totéž lze provést pomocí splice(), ale shift() je o něco snadněji zapamatovatelné a intuitivní, když vše, co musíte udělat, je odříznout první prvek.

const items = ['eggs', 'milk', 'cheese', 'bread', 'butter'];
items.shift()
console.log(items); // [ 'milk', 'cheese', 'bread', 'butter' ]

unshift()

Stejně jako shift() odstraní první prvek z pole, unshift() přidá nový prvek na začátek pole. Jeho použití je stejně jednoduché a kompaktní:

const items = ['eggs', 'milk'];
items.unshift('bread')
console.log(items); // [ 'bread', 'eggs', 'milk' ]

Nemohu si však pomoci a varovat nové hráče: na rozdíl od populárních metod push() a pop() jsou shift() a unshift() extrémně neefektivní (kvůli způsobu, jakým fungují základní algoritmy). Pokud tedy pracujete na velkých polích (řekněme 2000+ položek), příliš mnoho těchto volání funkcí může vaši aplikaci zastavit.

vyplnit()

Někdy je potřeba změnit několik položek na jednu hodnotu nebo dokonce „resetovat“ celé pole, abych tak řekl. V těchto situacích vás fill() ušetří před zacyklením a chybami typu off-by-one. Lze jej použít k nahrazení části nebo celého pole danou hodnotou. Podívejme se na několik příkladů:

const heights = [1, 2, 4, 5, 6, 7, 1, 1];
heights.fill(0);
console.log(heights); // [0, 0, 0, 0, 0, 0, 0, 0]

const heights2 = [1, 2, 4, 5, 6, 7, 1, 1];
heights2.fill(0, 4);
console.log(heights2); // [1, 2, 4, 5, 0, 0, 0, 0]

Další funkce stojí za zmínku

Zatímco výše uvedený seznam je to, s čím se většina vývojářů JavaScriptu ve své kariéře nakonec setkává a používá, není v žádném případě úplný. V JavaScriptu je tolik menších, ale užitečných funkcí (metod), že je nebude možné všechny pokrýt v jednom článku. To znamená, že mě napadá několik následujících:

  • zvrátit()
  • seřadit ()
  • záznamy()
  • vyplnit()
  • nalézt()
  • byt()

Doporučuji vám je alespoň vyhledat, abyste měli představu, že takové vymoženosti existují.

Závěr

JavaScript je velký jazyk, navzdory malému počtu základních konceptů, které je třeba se naučit. Mnoho funkcí (metod), které máme k dispozici, tvoří většinu této velké velikosti. Protože je však JavaScript pro většinu vývojářů sekundárním jazykem, neponoříme se dostatečně hluboko a přicházíme o mnoho krásných a užitečných funkcí, které nabízí. Vlastně to samé platí pro koncepty funkcionálního programování, ale to je téma na jiný den! 😅

Kdykoli můžete, věnujte nějaký čas zkoumání základního jazyka (a pokud je to možné, slavných knihoven nástrojů, jako je např Lodash). I pár minut strávených tímto úsilím povede k masivnímu zvýšení produktivity a mnohem čistšímu a kompaktnějšímu kódu.