Proiectul 1 din JavaScript Algos și certificarea DS.

Aceasta este versiunea blog a ghidului meu. Dacă preferați video aici este linkul video YouTube.

Provocarea

proiect-1-intro-captură de ecran

Scrieți o funcție numită palindrome care ia un șir, str. Dacă str este un palindrom, întoarce-te true, altfel reveniți false.

ad-banner

Ce este un palindrom?

Un palindrom este un cuvânt care citește la fel înainte și înapoi. Câteva exemple sunt

  • Ochi
  • Mașină de curse
  • Un om, un plan, un canal – Panama!

Fie că citiți aceste stânga-la-dreapta sau dreapta-la-stânga, veți obține aceeași secvență de caractere. Vom ignora punctuația, cum ar fi virgulele, punctele, semnele de întrebare, punctele de exclamare și literele mari.

Pasul 0 – Pasul departe de cod

Îmi place să păstrez această minte în timpul oricărui interviu sau problemă pe care trebuie să o rezolv la locul de muncă. Să vă grăbiți mai întâi în cod este de obicei o strategie de pierdere, deoarece acum trebuie să luați în considerare sintaxa în timp ce încercați să vă rezolvați problema.

Codul ar trebui să vină ultimul

Nu-ți lăsa nervii să te învingă. În loc să spargă frenetic o soluție și să vă ridice tensiunea, respirați adânc și încercați să o scrieți pe o tablă albă sau într-un notebook.

Odată ce ați gândit o soluție, codul este ușor. Toată munca grea se întâmplă în mintea și notele tale, nu pe tastatură.

Pasul 1 – Egalizați toate carcasele

Un palindrom este valabil indiferent dacă carcasa acestuia citește sau nu la fel înainte sau înapoi. Deci „Racecar” este valabil chiar dacă este scris tehnic „racecaR” înapoi.

Pentru a ne proteja împotriva oricăror probleme de carcasă, voi adăuga un comentariu spunând că vom micșora totul.

Iată codul meu de până acum (observați că nu am scris încă niciun cod real).

function palindrome(str) {
  // 1) Lowercase the input
}



palindrome("eye");

Pasul 2 – Desprindeți caractere non-alfanumerice

La fel ca scenariul de carcasă, un palindrom este valid chiar dacă punctuația și spațiile nu sunt consistente înainte și înapoi.

De exemplu “Un om, un plan, un canal – Panama!” este valabil pentru că îl examinăm fără niciun semn sau spațiu. Dacă faci asta și scrii totul cu minuscule, acesta devine acesta.

"A Man, A Plan, A Canal – Panama!"

// lowercase everything
// strip out non-alphanumeric characters

"amanaplanacanalpanama"

Care citește la fel înainte și înapoi.

Ce înseamnă alfanumeric?

Înseamnă „litere și cifre”, deci orice de la az și 0-9 este un caracter alfanumeric. Pentru a examina în mod corespunzător datele de intrare trebuie să meargă caractere non-alfanumerice (spații, punctuație etc.).

Iată pseudocodul nostru actualizat.

function palindrome(str) {
  // 1) Lowercase the input
  // 2) Strip out non-alphanumeric characters
}



palindrome("eye");

Pasul 3 – Comparați șirul cu reversul său

Odată ce șirul nostru este curățat corect, îl putem răsfoi și putem vedea dacă citește la fel.

Mă gândesc la o comparație în acest sens

return string === reversedString

Folosesc triplu egal (===) pentru comparație în JavaScript. Dacă cele două șiruri sunt identice, este un palindrom și ne întoarcem true! Dacă nu, ne întoarcem false.

Iată pseudocodul nostru actualizat.

function palindrome(str) {
  // 1) Lowercase the input
  // 2) Strip out non-alphanumeric characters
  // 3) return string === reversedString
}



palindrome("eye");

Executarea Pasului 1 – Minuscule

Acesta este cel mai simplu pas. Dacă nu sunteți sigur cum să scrieți cu minuscule ceva în JavaScript, o căutare rapidă pe Google ar trebui să conducă la toLowerCase metodă.

Aceasta este o metodă disponibilă pe toate șirurile, așa că o putem folosi pentru a redacta minuscula intrarea noastră înainte de a face altceva.

Voi stoca versiunea cu litere mici într-o variabilă numită alphanumericOnly pentru că vom elimina în cele din urmă și caractere alfanumerice.

function palindrome(str) {
  // 1) Lowercase the input
  const alphanumericOnly = str.toLowerCase();
  
  // 2) Strip out non-alphanumeric characters
  // 3) return string === reversedString
}



palindrome("eye");

Executarea Pasului 2 – Numai alfanumeric

Va trebui să ne scufundăm puțin mai adânc aici, deoarece acesta este cel mai greu pas. Cum anume vom purifica un șir de caractere nealfanumerice?

Metoda .match

La fel ca toLowerCase toate șirurile acceptă o metodă numită match. Este nevoie de un parametru care să indice ce caracter (e) doriți să căutați într-un șir dat.

Să ne folosim numele ca exemplu.

myName="yazeed";

myName.match('e');
// ["e", index: 3, input: "yazeed", groups: undefined]

După cum puteți vedea .match returnează o matrice cu câteva informații. Partea care ne pasă este primul element, 'e'. Acesta este meciul pe care l-am găsit în șir 'yazeed'.

Dar numele meu are două e! Cum ne potrivim cu celălalt?

Expresii regulate (Regex)

.match primul parametru al metodei poate fi în schimb a expresie uzuala.

Expresie regulată – O secvență de caractere care definesc un model de căutare. Cunoscut și sub denumirea de „Regex”.

În loc de ghilimele pentru un șir, puneți parametrul între bare oblice.

myName="yazeed";

myName.match(/e/);
// ["e", index: 3, input: "yazeed", groups: undefined]

Obținem același rezultat, deci cui îi pasă? Ei bine, verificați acest lucru, regex ne permite să adăugăm steaguri.

Flag Regex – Un indicator care îi spune lui Regex să facă ceva special.

myName="yazeed";

myName.match(/e/g);
// ^^ Notice the little g now ^^
// ["e", "e"]

Am primit înapoi toate e-urile! Dacă încercați un a sau un z, veți obține o serie de doar o potrivire. Are sens.

myName.match(/a/g);
// ["a"]

myName.match(/z/g);
// ["z"]

Găsirea tuturor caracterelor alfanumerice

Așadar, regexul nu se potrivește doar cu modelele, ci se poate potrivi mulți de același tip de tipar! Sună perfect pentru următorul pas al algoritmului nostru.

Dacă folosiți Google un pic, acesta poate fi regexul pe care îl găsiți pentru potrivirea tuturor caracterelor alfanumerice.

/[a-z0-9]/g

Te uiți la definiția lui alfanumeric. Această regex poate fi împărțită în 3 părți.

  1. Un set de caractere [] – potriviți orice caracter între aceste paranteze. seturi de caractere
  2. a-z – potriviți toate literele mici az
  3. 0-9 – potriviți toate numerele 0-9

Rularea lui myName returnează o serie de fiecare literă.

myName="yazeed";

myName.match(/[a-z0-9]/g);
// ["y", "a", "z", "e", "e", "d"]

Să încercăm cu unul dintre cazurile de testare ale proiectului. Ce zici de acest nebun pe care îl așteaptă să fie un palindrom?

crazyInput="0_0 (: /- :) 0-0";

crazyInput.match(/[a-z0-9]/g);
// ["0", "0", "0", "0"]

Uau fără personajele nebunești sunt doar patru zerouri. Da, este un palindrom! Voi actualiza codul nostru.

function palindrome(str) {
  const alphanumericOnly = str
        // 1) Lowercase the input
        .toLowerCase()
        // 2) Strip out non-alphanumeric characters
        .match(/[a-z0-9]/g);
  
  // 3) return string === reversedString
}



palindrome("eye");

Executarea pasului 3 – Comparați șirul cu inversul său

Sa nu uiti asta .match returnează un matrice de chibrituri. Cum putem folosi această matrice pentru a compara șirul nostru curățat cu sinele său inversat?

Matrice.inversă

reverse metoda, fidelă numelui său, inversează elementele unei matrice.

[1, 2, 3].reverse();
// [3, 2, 1]

Arată destul de util! După potrivirea tuturor caracterelor alfanumerice, putem răsturna acea matrice și a vedea dacă totul se aliniază.

Dar compararea matricelor nu este la fel de simplă ca și compararea șirurilor, deci cum putem transforma matricea de potriviri înapoi într-un șir?

Array.join

join metoda îmbină elementele matricei într-un șir, opțional luând un separator.

Separatorul este primul parametru, nu trebuie să îl furnizați. Practic, vă va „strânge” matricea.

[1, 2, 3].join();
// "1,2,3"

Dacă îl furnizați, separatorul merge între fiecare element.

[1, 2, 3].join('my separator');
// "1my separator2my separator3"

[1, 2, 3].join(',');
// "1,2,3"

[1, 2, 3].join(', ');
// "1, 2, 3"

[1, 2, 3].join('sandwich');
// "1sandwich2sandwich3"

Să vedem cum s-ar potrivi acest lucru în algoritmul nostru.

'Ra_Ce_Ca_r   -_-'
    .toLowerCase()
    .match(/[a-z0-9]/g)
    .join('');

// "racecar"

Vedeți cum funcționează tot ceea ce pur și simplu recreează șirul original fără punctuație sau carcasă mixtă?

Ce se întâmplă dacă o inversăm?

'Ra_Ce_Ca_r   -_-'
    .toLowerCase()
    .match(/[a-z0-9]/g)
    // flip it around
    .reverse()
    .join('');

// "racecar"

E un palindrom! Numele meu nu ar fi un palindrom.

'yazeed'
    .toLowerCase()
    .match(/[a-z0-9]/g)
    // flip it around
    .reverse()
    .join('');

// "deezay"

Se pare că avem soluția noastră. Să vedem codul final.

Codul final

function palindrome(str) {
    const alphanumericOnly = str
        // 1) Lowercase the input
        .toLowerCase()
        // 2) Strip out non-alphanumeric characters
        .match(/[a-z0-9]/g);
        
    // 3) return string === reversedString
    return alphanumericOnly.join('') ===
        alphanumericOnly.reverse().join('');
}



palindrome("eye");

Introduceți acest lucru și rulați testele și suntem buni!

toate testele au trecut

rezumat

  1. Intrare cu litere mici prin str.toLowerCase();
  2. Potriviți toate caracterele alfanumerice folosind o expresie regulată prin str.match(/[a-z0-9]/g).
  3. Utilizare Array.reverse și Array.join pe meciurile alfanumerice pentru a compara originalul cu sinele său inversat. Dacă sunt identici, ne întoarcem true, altfel ne întoarcem false!

Mulțumesc pentru lectură

Dacă doriți un videoclip cu și mai multe detalii, Iată din nou versiunea YouTube!

Pentru mai mult conținut de genul acesta, verificați https://yazeedb.com. Și vă rog să-mi spuneți ce altceva ați dori să vedeți! DM-urile mele sunt deschise pe Twitter.

Pana data viitoare!