Top 11 (și mai multe!) Funcții JavaScript care trebuie cunoscute

Cod inteligent! Fii un dezvoltator JavaScript mai rapid, mai productiv și mai fericit prin stăpânirea acestor funcții cele mai importante și recurente ale limbii.

Indiferent dacă este vorba de backend sau frontend (sau chiar nave spațiale), JavaScript este peste tot. Este, de asemenea, un limbaj destul de flexibil (ceea ce înseamnă că are modele de programare funcționale, precum și clase vechi), iar asemănarea sa cu alte limbaje „C-like” face o tranziție ușoară pentru dezvoltatori din alte limbi.

Dacă doriți să crește nivelul jocului tău JS, vă sugerez să învățați, să exersați și, în cele din urmă, să stăpâniți următoarele funcții de bază disponibile în limbă. Nu toate acestea sunt strict „necesare” pentru rezolvarea problemelor, dar ele pot face o mulțime de sarcini grele pentru dvs. în unele cazuri, în timp ce în altele, acestea pot reduce cantitatea de cod pe care trebuie să o scrieți.

Cuprins

Hartă()

Ar fi o erezie să scrii un articol despre funcțiile JavaScript importante și să nu menționezi map()! 😆😆 Împreună cu filter() și reduce(), map() formează un fel de sfântă trinitate. Acestea sunt funcții pe care le vei folosi din nou și din nou în cariera ta, așa că merită mai mult decât să le arunci o privire. Să le abordăm unul câte unul, începând cu map().

map() este printre acele funcții care dau cele mai multe probleme oamenilor care învață JavaScript. De ce? Nu pentru că ar fi ceva în mod inerent complex, ci pentru că modul în care funcționează această funcție este o idee preluată din ceea ce se numește Programare funcțională. Și din moment ce nu suntem expuși la programarea funcțională – școlile noastre și industria fiind pline de limbaje orientate pe obiecte – funcționarea pare ciudată sau chiar greșită pentru creierul nostru părtinitor.

JavaScript este mult mai funcțional decât orientat pe obiecte, deși versiunile sale moderne fac tot posibilul pentru a ascunde acest fapt. Dar asta e o cutie întreagă de viermi pe care o pot deschide poate într-o altă zi. 🤣 Bine, deci, map() . . .

map() este o funcție foarte simplă; se atașează la o matrice și ne ajută să convertim fiecare articol în altceva, rezultând o nouă matrice. Modul exact de conversie a unui articol este furnizat ca o altă funcție, care, prin convenție, este anonimă.

Cam despre asta e! Sintaxa poate dura ceva pentru a ne obișnui, dar în esență asta facem într-o funcție map(). De ce am putea dori să folosim map()? Depinde de ceea ce încercăm să realizăm. De exemplu, să presupunem că am înregistrat temperatura pentru fiecare zi din ultima săptămână și am stocat-o ca o matrice simplă. Cu toate acestea, acum ni se spune că instrumentele nu au fost foarte precise și au raportat o temperatură cu 1,5 grade mai mică decât ar fi trebuit.

Putem face această corecție folosind funcția map() astfel:

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 ]

Un alt exemplu, foarte practic, vine din lumea React, unde crearea listelor de elemente DOM din matrice este un model comun; deci, ceva de genul acesta este comun:

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

Aici, avem o componentă funcțională React care primește o listă de produse ca elemente de recuzită. Din această listă (matrice), apoi construiește o listă de „div-uri” HTML, transformând în esență fiecare obiect produs în HTML. Obiectul produselor originale rămâne neatins.

Puteți argumenta că map() nu este altceva decât o buclă glorificată pentru și ați avea perfectă dreptate. Dar observă că, de îndată ce faci acest argument, mintea ta instruită orientată pe obiect este cea care vorbește, în timp ce aceste funcții și rațiunea lor provin din programarea funcțională, unde uniformitatea, compactitatea și eleganța sunt foarte venerate. 🙂

filtru()

filter() este o funcție extrem de utilă pe care te vei trezi să o aplici din nou și din nou în multe situații. După cum sugerează și numele, această funcție filtrează o matrice pe baza regulilor/logicii pe care le furnizați și returnează o nouă matrice care conține elemente care îndeplinesc acele reguli.

Să reutilizam exemplul nostru de vreme. Să presupunem că avem o matrice care conține temperaturile maxime pentru fiecare zi a săptămânii trecute; acum, vrem să aflăm câte dintre acele zile au fost mai reci. Da, „mai rece” este un termen subiectiv, așa că să presupunem că căutăm zile în care temperatura a fost sub 20. Putem face acest lucru folosind funcția filter() astfel:

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

Rețineți că funcția anonimă pe care o transmitem filter() trebuie să returneze o valoare booleană: true sau false. Acesta este modul în care filter() va ști dacă să includă sau nu acel element în matricea filtrată. Sunteți liber să scrieți orice cantitate de logică complexă în această funcție anonimă; puteți efectua apeluri API și citi intrările utilizatorilor și așa mai departe, atâta timp cât vă asigurați că, în final, returnați o valoare booleană.

Atenție: aceasta este o notă secundară pe care mă simt obligat să o ofer pe baza experienței mele ca dezvoltator JavaScript. Fie că este din cauza neglijenței sau a unor fundamente greșite, mulți programatori creează erori subtile în programele lor când folosesc filter(). Să rescriem codul anterior pentru a conține bug-ul:

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

Observați ceva? Mare treabă dacă ai făcut-o! Condiția if spre final verifică colderDays, care este de fapt o matrice! Veți fi surprins de câte ori oamenii fac această greșeală în timp ce se întrec pentru a respecta termenele limită sau codifica cu un spirit scăzut (din orice motiv). Problema cu această condiție este că JavaScript este un limbaj ciudat și inconsecvent în multe feluri, iar „adevărul” lucrurilor este unul dintre ele. In timp ce [] == true returnează false, făcându-vă să credeți că codul de mai sus nu este rupt, realitatea este că într-o condiție if, [] se evaluează la adevărat! Cu alte cuvinte, codul pe care l-am scris nu va spune niciodată că nu au fost zile mai reci săptămâna trecută.

8 moduri de a crește moralul angajaților și de a crește productivitatea

Remedierea este foarte simplă, așa cum este dat în codul anterior codului de mai sus. Verificăm colderDays.length, care este garantat să ne ofere un număr întreg (zero sau mai mare) și astfel funcționează constant în comparații logice. Rețineți că filter() va returna întotdeauna, întotdeauna, întotdeauna o matrice, goală sau nevid, astfel încât să ne putem baza pe asta și să scriem cu încredere comparațiile noastre logice.

A fost un ocol mai lung decât plănuiam, dar bug-uri ca acesta merită evidențiate în zece mii de cuvinte, cu majuscule dacă este nevoie. Sper să nu fii mușcat de asta și să economisești sute de ore de efort de depanare! 🙂

reduce()

Dintre toate funcțiile din acest articol, precum și din biblioteca standard JavaScript, reduce() este printre primii pentru coroanele „confuzului și ciudat”. Deși această funcție este extrem de importantă și are ca rezultat cod elegant în multe situații, este evitată de majoritatea dezvoltatorilor JavaScript și preferă să scrie cod mai pronunțat.

Motivul este că – și voi fi sincer aici! — reduce() este greu de înțeles, atât în sensul conceptului, cât și al execuției. Când îi citești descrierea, ai recitit-o de mai multe ori și totuși, te îndoiești dacă ai citit-o greșit; iar când îl vezi în acțiune și încerci să vizualizezi cum funcționează, creierul tău se răsucește în o mie de noduri! 🤭

Acum, nu te speria. Funcția reduce() nu este deloc aproape de complexitate și intimidare, să zicem, B+ Copaci și algoritmii acestora. Doar că acest tip de logică se întâlnește rar în timpul programului obișnuit.

Așadar, după ce v-am speriat lumina zilei și apoi ți-am spus imediat să nu-ți faci griji, aș dori în sfârșit să-ți arăt ce este această funcție și de ce exact am putea avea nevoie de ea.

După cum sugerează și numele, reduce() este folosit pentru, ei bine, pentru a reduce ceva. Lucrul pe care îl reduce este o matrice și lucrul la care reduce matricea dată este o singură valoare (număr, șir, funcție, obiect, orice). Iată o modalitate mai simplă de a o pune — reduce() transformă o matrice într-o singură valoare. Rețineți că valoarea returnată de la reduce() nu este o matrice, ceea ce este cazul cu map() și filter(). Să fi înțeles atât de mult este deja jumătate din luptă. 🙂

Acum, este cam evident că, dacă vom transforma (reducem) o matrice, trebuie să furnizăm logica necesară; și pe baza experienței dvs. ca dezvoltator JS, cel mai mult ați ghicit deja că facem asta folosind o funcție. Această funcție este ceea ce numim funcție de reducere, care formează primul argument pentru reduce(). Al doilea argument este o valoare de pornire, cum ar fi un număr, un șir etc. (Voi explica peste ceva timp ce naiba este această „valoare de pornire”).

Pe baza înțelegerii noastre de până acum, putem spune că un apel la reduce() arată astfel: array.reduce(reducerFunction, startingValue). Acum să abordăm miezul întregului lucru: funcția de reducere. După cum sa stabilit deja, funcția de reducere este cea care îi spune reduce() cum să convertească matricea într-o singură valoare. Este nevoie de două argumente: o variabilă pentru a acționa ca un acumulator (nu vă faceți griji, voi explica și acest bit) și o variabilă pentru a stoca valoarea curentă.

Știu, știu . . . asta a fost multă terminologie pentru o singură funcție care nici măcar nu este obligatorie în JavaScript. 😝😝 Și de aceea oamenii fug de reduce(). Dar dacă îl înveți pas cu pas, nu numai că îl vei înțelege, dar și îl vei aprecia pe măsură ce devii un dezvoltator mai bun.

Bine, deci, revenim la subiectul de față. „Valoarea de pornire” transmisă reduce() este . . . Ei bine, valoarea de pornire pentru calculul pe care doriți să-l utilizați. De exemplu, dacă veți face înmulțirea în funcția de reducere, o valoare de pornire de 1 are sens; în plus, puteți începe cu 0 și așa mai departe.

Acum să ne uităm la semnătura funcției de reducere. O funcție de reducere transmisă la reduce() are următoarea formă: reducerFunction(accumulator, currentValue). „Acumulator” este doar un nume de lux pentru variabila care colectează și deține rezultatul calculului; este exact ca și cum ați folosi o variabilă numită total pentru a suma toate elementele dintr-o matrice folosind ceva de genul total += arr[i]. Exact așa se aplică funcția de reducere din reduce(): acumulatorul este setat inițial la valoarea de pornire pe care o furnizați, apoi sunt vizitate unul câte unul elementele din matrice, calculul este efectuat și rezultatul este stocat în acumulatorul și așa mai departe. . .

Deci, care este această „valoare curentă” într-o funcție de reducere? Este aceeași idee pe care ți-ai imagina mental dacă ți-aș cere să traversezi o matrice: ai lua o variabilă pentru a începe de la indicele zero și ai muta-o înainte cu un pas la un moment dat. În timp ce faci asta, dacă ți-aș cere să te oprești brusc, te-ai găsi pe unul dintre elementele matricei, nu? Aceasta este ceea ce înțelegem prin valoarea curentă: este valoarea variabilei folosită pentru a reprezenta elementul de matrice care este în prezent luat în considerare (gândiți-vă la bucla peste o matrice dacă asta ajută).

Cu toate acestea spuse, este timpul să vedem un exemplu simplu și să vedem cum tot acest jargon se reunește într-un apel reduce() real. Să presupunem că avem o matrice care conține primele n numere naturale (1, 2, 3… n) și ne interesează să găsim factorialul lui n. Știm că pentru a găsi n! pur și simplu trebuie să înmulțim totul, ceea ce ne duce la această implementare:

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

Se întâmplă multe în aceste trei linii de cod, așa că haideți să le despachetăm una câte una în contextul discuției (foarte lungi) pe care am avut-o până acum. După cum este evident, numerele este matricea care conține toate numerele pe care vrem să le înmulțim. Apoi, aruncați o privire la apelul numbers.reduce(), care spune că valoarea de pornire pentru acc ar trebui să fie 1 (pentru că nu influențează și nu distruge nicio înmulțire). Apoi, verificați corpul funcției reductorului, `(acc, item) => acc * item, care spune pur și simplu că valoarea returnată pentru fiecare iterație peste matrice ar trebui să fie acel element înmulțit cu ceea ce este deja în acumulator. Iterația și stocarea efectivă a înmulțirii în mod explicit în acumulator este ceea ce se întâmplă în culise și este unul dintre cele mai mari motive pentru care reduce() este o astfel de piatră de poticnire pentru dezvoltatorii JavaScript.

Puteți retrage bani din contul de economii Chime?

De ce să folosiți reduce()?

Este o întrebare foarte grozavă și, să fiu sincer, nu am un răspuns sigur. Orice face reduce() poate fi făcut prin bucle, forEach(), etc. Cu toate acestea, aceste tehnici au ca rezultat mult mai mult cod, ceea ce face greu de citit, mai ales dacă vă grăbiți. Apoi mai este preocuparea pentru imuabilitate: cu reduce() și funcții similare, poți fi sigur că datele tale originale nu au fost modificate; acest lucru în sine elimină clase întregi de erori, în special în aplicațiile distribuite.

În cele din urmă, reduce() este mult mai flexibil, în sensul că acumulatorul poate fi un obiect, o matrice sau chiar o funcție dacă este necesar; Același lucru este valabil și pentru valoarea de pornire și alte părți ale apelului de funcție – aproape orice poate intra și aproape orice poate ieși, deci există o flexibilitate extremă în proiectarea codului reutilizabil.

Dacă tot nu ești convins, e perfect și asta; comunitatea JavaScript în sine este puternic împărțită în ceea ce privește „compactitatea”, „eleganța” și „puterea” reduce(), așa că este în regulă dacă nu îl folosiți. 🙂 Dar asigură-te că te uiți la unele exemple îngrijite înainte de a decide să reducă bin().

niste()

Să presupunem că aveți o serie de obiecte, fiecare obiect reprezentând o persoană. Vrei să știi dacă în matrice există persoane care au peste 35 de ani. Rețineți că nu este nevoie să numărați câte astfel de persoane sunt, cu atât mai puțin să găsiți o listă a acestora. Ceea ce spunem aici este echivalentul cu „unul sau mai multe” sau „cel puțin unul”.

Cum faci acest lucru?

Da, ați putea crea o variabilă de tip flag și ați putea trece peste matrice pentru a rezolva această problemă astfel:

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!")
}

Problema? Codul este prea asemănător C sau Java, după părerea mea. „Verbose” este un alt cuvânt care îmi vine în minte. JS experimentat s-ar putea gândi la „urât”, „oribil”, etc. 😝 Și pe bună dreptate, aș argumenta. O modalitate de a îmbunătăți această bucată de cod este să folosiți ceva de genul map(), dar chiar și atunci soluția este un pic neplăcută.

Se pare că avem o funcție destul de îngrijită numită some() deja disponibilă în limbajul de bază. Această funcție funcționează matrice și acceptă o funcție personalizată de „filtrare”, returnând o valoare booleană adevărată sau falsă. În esență, face ceea ce am încercat să facem în ultimele minute, doar foarte succint și elegant. Iată cum îl putem folosi:

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!")
}

Aceeași intrare, același rezultat ca înainte; dar observați reducerea masivă a codului! Observați, de asemenea, cât de drastic se reduce sarcina cognitivă, deoarece nu mai trebuie să analizăm codul linie cu linie ca și cum am fi noi înșine interpretul! Acum codul citește aproape ca un limbaj natural.

fiecare()

La fel ca some(), avem o altă funcție utilă numită every(). După cum puteți ghici până acum, și aceasta returnează o valoare booleană în funcție de dacă toate elementele din matrice trec testul dat. Desigur, testul de trecut este furnizat ca o funcție anonimă de cele mai multe ori. Vă voi scuti de durerea cum ar putea arăta o versiune naivă a codului, așa că iată cum este folosit 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")
}

După cum este evident, codul verifică toate obiectele din matrice pentru o proprietate validă de id. Definiția termenului „valid” depinde de contextul problemei, dar după cum puteți vedea, pentru acest cod, am considerat numere întregi nenegative. Încă o dată, vedem cât de simplu și elegant este codul de citit, care este singurul scop al acestei funcții (și similare).

include ()

Cum verificați existența sub-șirurilor și a elementelor de matrice? Ei bine, dacă sunteți ca mine, ajungeți rapid la indexOf() și apoi căutați documentele pentru a vă face să cunoașteți posibilele valori de returnare. Este un inconvenient considerabil, iar valorile returnate sunt greu de reținut (rapid — ce înseamnă un proces care returnează 2 la sistemul de operare?).

Dar există o alternativă frumoasă pe care o putem folosi: includes(). Utilizarea este la fel de simplă ca și numele, iar codul rezultat este extrem de încântător. Rețineți că potrivirea se face de includes() este sensibil la majuscule, dar cred că la asta ne așteptăm oricum cu toții intuitivi. Și acum, este timpul pentru niște coduri!

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

Cu toate acestea, nu vă așteptați prea mult de la această metodă umilă:

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

Nu poate privi în interiorul obiectelor, deoarece pur și simplu nu este definit pentru obiecte. Dar, hei, știm că funcționează pe matrice, așa că poate putem face niște trucuri aici. . . 🤔.

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

Deci, ce se întâmplă când rulați acest cod? Nu explodează, dar și rezultatul este dezamăgitor: fals. 😫😫 De fapt, acest lucru are de-a face cu obiectele, indicatorii și cu modul în care JavaScript vede și gestionează memoria, care este o lume proprie. Dacă doriți să vă scufundați mai adânc, nu ezitați să faceți pasul (poate începe Aici), dar mă opresc chiar aici.

Putem face ca codul de mai sus să se comporte dacă îl rescriem după cum urmează, dar în acest moment devine mai mult sau mai puțin o glumă, după părerea mea:

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

Totuși, arată că putem face includes() funcționează pe obiecte, așa că bănuiesc că nu este un dezastru total. 😄

felie()

Să presupunem că avem un șir și vă cer să returnați o parte a acestuia care începe cu „r” și se termină cu „z” (caracterele reale nu sunt importante). Cum l-ai aborda? Poate că ați crea un șir nou și îl utilizați pentru a stoca toate caracterele necesare și a le returna. Sau dacă sunteți ca majoritatea programatorilor, mi-ați oferi în schimb doi indici de matrice: unul indicând începutul subșirului, celălalt marcând sfârșitul.

[FIXED] Răspunsul dumneavoastră la invitație nu poate fi trimis

Ambele abordări sunt bune, dar există un concept numit feliere care oferă o soluție bună în astfel de situații. Din fericire, nu există nicio teorie abstrusă de urmat; feliere înseamnă exact cum sună – crearea unui șir/matrice mai mic din cel dat, la fel cum creăm felii de fructe. Să vedem ce vreau să spun, cu ajutorul unui exemplu simplu:

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

Când slice(), oferim doi indici pentru JavaScript – unul în care vrem să începem tăierea și celălalt unde vrem să se oprească. Problema cu slice() este că indexul final nu este inclus în rezultatul final, motiv pentru care vedem că cuvântul „așteptare” lipsește din noul titlu din codul de mai sus.

Concepte precum tăierea sunt mai proeminente în alte limbi, în special în Python. Dacă îi întrebați pe acești dezvoltatori, ei vor spune că nu își pot imagina viața fără această funcționalitate și, pe bună dreptate, atunci când limbajul oferă o sintaxă foarte îngrijită pentru tăiere.

Tăierea este îngrijită și extrem de convenabilă și nu există niciun motiv să nu o folosiți. De asemenea, nu este un zahar de sintaxă plin de o penalizare de performanță, deoarece creează copii superficiale ale matricei/șirului original. Pentru dezvoltatorii JavaScript, le-am recomandat să se familiarizeze cu slice() și să-l adauge la arsenalul tău!

lipitură()

Metoda splice() sună ca un văr al slice() și, în anumite privințe, putem argumenta că este. Ambele creează noi matrice/șiruri din cele originale, cu o diferență mică, dar importantă – splice() elimină, modifică sau adaugă elemente, dar modifică tabloul original. Această „distrugere” a matricei originale poate crea probleme uriașe dacă nu ești atent sau nu înțelegi copiile profunde și referințele. Mă întreb ce i-a împiedicat pe dezvoltatori să folosească aceeași abordare ca pentru slice() și să lase matricea originală neatinsă, dar cred că putem fi mai îngăduitori față de o limbă creat în doar zece zile.

În ciuda plângerilor mele, să aruncăm o privire la modul în care funcționează splice(). Voi arăta un exemplu în care eliminăm câteva elemente dintr-o matrice, deoarece aceasta este cea mai comună utilizare pe care o veți găsi pentru această metodă. De asemenea, mă voi abține să ofer exemple de adăugare și inserare, deoarece acestea pot fi căutate cu ușurință și sunt, de asemenea, simple.

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

Apelul la splice() de mai sus spune: începeți de la indexul 2 (al treilea loc, adică) al matricei și eliminați un element. În matricea dată, „brânză” este al treilea element, așa că este eliminat din matrice și matricea de articole este scurtată, așa cum era de așteptat. Apropo, elementele eliminate sunt returnate de splice() în formă sau într-o matrice, așa că dacă am fi vrut, am fi putut captura „brânză” într-o variabilă.

Din experiența mea, indexOf() și splice() au o sinergie mare – găsim indexul unui articol și apoi îl eliminăm din matricea dată. Cu toate acestea, rețineți că nu este întotdeauna cea mai eficientă metodă și adesea folosirea tastelor unui obiect (echivalentul unei hărți hash) este mult mai rapidă.

schimb()

shift() este o metodă convenabilă de sortare și este folosită pentru a elimina primul element al unui tablou. Observați că același lucru se poate face cu splice(), dar shift() este puțin mai ușor de reținut și intuitiv când tot ce trebuie să faceți este să tăiați primul element.

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

unshift()

La fel cum shift() elimină primul element dintr-o matrice, unshift() adaugă un nou element la începutul matricei. Utilizarea sa este la fel de simplă și compactă:

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

Acestea fiind spuse, nu mă pot abține și îi avertizez pe cei noi în joc: spre deosebire de metodele populare push() și pop(), shift() și unshift() sunt extrem de ineficiente (din cauza modului în care funcționează algoritmii de bază). Deci, dacă operați pe matrice mari (de exemplu, peste 2000 de elemente), prea multe dintre aceste apeluri de funcție vă pot opri aplicația.

completati()

Uneori trebuie să schimbați mai multe elemente la o singură valoare sau chiar să „resetati” întreaga matrice, ca să spunem așa. În aceste situații, fill() vă salvează de bucle și erori de tip off-by-one. Poate fi folosit pentru a înlocui o parte sau toată matricea cu valoarea dată. Să vedem câteva exemple:

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]

Alte funcții demne de menționat

Deși lista de mai sus este ceea ce majoritatea dezvoltatorilor de JavaScript ajung să întâlnească și să folosească în cariera lor, nu este deloc completă. Există atât de multe funcții (metode) minore, dar utile (metode) în JavaScript încât nu va fi posibil să le acoperiți pe toate într-un singur articol. Acestea fiind spuse, câteva care îmi vin în minte sunt următoarele:

verso()
fel()
intrări()
completati()
găsi()
apartament()

Vă încurajez să le căutați cel puțin, astfel încât să aveți o idee că există astfel de facilități.

Concluzie

JavaScript este un limbaj mare, în ciuda numărului mic de concepte de bază de învățat. Numeroasele funcții (metode) disponibile pentru noi alcătuiesc cea mai mare parte a acestei dimensiuni mari. Cu toate acestea, deoarece JavaScript este un limbaj secundar pentru majoritatea dezvoltatorilor, nu ne aprofundăm suficient, ratând multe funcții frumoase și utile pe care le oferă. De fapt, același lucru este valabil și pentru conceptele de programare funcțională, dar acesta este un subiect pentru altă zi! 😅

Ori de câte ori puteți, petreceți ceva timp explorând limbajul de bază (și, dacă este posibil, biblioteci de utilitate celebre, cum ar fi Lodash). Chiar și câteva minute petrecute în acest efort vor avea ca rezultat câștiguri masive de productivitate și un cod mult mai curat și mai compact.