5 compiti tipici di un'intervista JavaScript: analisi e soluzioni

5 compiti tipici di un'intervista JavaScript: analisi e soluzioni

Dal traduttore: ha pubblicato un articolo per te Maria Antonietta Perna, che parla delle attività JavaScript comuni, spesso offerto ai candidati sviluppatori durante i colloqui. L'articolo sarà utile, prima di tutto, ai programmatori alle prime armi.

Le interviste alle aziende tecnologiche sono da tempo oggetto di discussione in città. Ciò non dovrebbe sorprendere: superare con successo un colloquio ti dà l'opportunità di ottenere un buon lavoro. Ma questo non è così semplice, poiché spesso è necessario risolvere problemi complessi.

Inoltre, molto spesso, la maggior parte di questi compiti non sono legati al lavoro che il richiedente svolgerà, ma devono comunque essere risolti. A volte devi farlo alla lavagna, senza verificare con Google o qualsiasi altra fonte. Sì, la situazione sta gradualmente cambiando e alcune aziende abbandonano tali colloqui, ma molti datori di lavoro aderiscono ancora a questa tradizione. Questo articolo è dedicato all'analisi delle tipiche attività JavaScript che vengono spesso utilizzate come attività per chi cerca lavoro.

Ti ricordiamo: per tutti i lettori di "Habr" - uno sconto di 10 rubli al momento dell'iscrizione a qualsiasi corso Skillbox utilizzando il codice promozionale "Habr".

Skillbox consiglia: Corso pratico "Sviluppatore mobile PRO".

La cosa principale è prepararsi a fondo per il colloquio.

Sì, prima di iniziare a esaminare i compiti, diamo un'occhiata ad alcuni suggerimenti generali per la preparazione al colloquio.

La cosa principale è prepararsi in anticipo. Metti alla prova la tua capacità di ricordare algoritmi e strutture dati e migliora le tue conoscenze in aree con cui non hai molta familiarità. Esistono molte piattaforme online che possono aiutarti a prepararti per i colloqui. Consigliamo Geeksfor Geeks, Passeggino, Intervistando.io и Codice Segnale.

Vale la pena imparare a pronunciare la decisione ad alta voce. È consigliabile raccontare ai candidati quello che si fa e non limitarsi a scrivere alla lavagna (o digitare il codice sul computer, anche in silenzio). In questo modo, se commetti un errore nel codice, ma la soluzione è generalmente corretta, puoi aumentare le tue possibilità di successo.

È necessario comprendere il problema prima di iniziare a risolverlo. In alcuni casi, potresti comprendere un compito superficialmente e poi imboccare la strada sbagliata. Potrebbe valere la pena porre alcune domande chiarificatrici all'intervistatore.

Devi esercitarti a scrivere il codice a mano, non su un PC. Succede che durante i colloqui al richiedente venga fornito un pennarello e una lavagna, dove non ci sono suggerimenti o formattazione automatica. Quando cerchi una soluzione, vale la pena scrivere il codice su un pezzo di carta o direttamente sulla lavagna. Se tieni tutto nella tua testa, potresti dimenticare qualcosa di importante.

Attività modello in JavaScript

Alcuni di questi compiti probabilmente ti sono già familiari. Hai avuto interviste in cui dovevi risolvere qualcosa di simile o ti sei esercitato su di esse mentre imparavi JavaScript. Bene, ora è il momento di risolverli di nuovo e con una spiegazione dettagliata del processo.

Palindromo

Un palindromo è una parola, una frase o una sequenza di caratteri che viene letta esattamente allo stesso modo sia nella direzione abituale che nella direzione opposta. Ad esempio, “Anna” è un palindromo, ma “tavolo” e “Giovanni” non lo sono.

produzione

Data una stringa; devi scrivere una funzione che ti permetta di restituire true se la stringa è palindroma e false in caso contrario. In questo caso è necessario tenere conto degli spazi e dei segni di punteggiatura.

palindromo('auto da corsa') === vero
palindromo('tabella') === falso

Analizziamo il compito

L'idea principale qui è invertire la corda. Se la stringa “inversa” è completamente identica a quella originale, allora abbiamo ricevuto un palindromo e la funzione dovrebbe restituire vero. In caso contrario, falso.

Soluzione

Ecco il codice che risolve il palindromo.

const palindrome = str => {
  // turn the string to lowercase
  str = str.toLowerCase()
  // reverse input string and return the result of the
  // comparisong
  return str === str.split('').reverse().join('')
}

Il primo passo è convertire i caratteri nella stringa di input in minuscolo. Questa è una garanzia che il programma confronterà i personaggi stessi e non maiuscole e minuscole o altro.

Il secondo passo è invertire la linea. Questo non è difficile da fare: è necessario convertirlo in un array utilizzando il metodo .split() (libreria String). Quindi invertiamo l'array utilizzando .reverse() (libreria di array). L'ultimo passaggio consiste nel convertire l'array inverso in una stringa utilizzando .join() (libreria di array).

Ora tutto quello che devi fare è confrontare la stringa “inversa” con la stringa originale, restituendo il risultato vero o falso.

Fizz Buzz

Uno dei compiti più popolari nelle interviste.

produzione

Devi scrivere una funzione che stampi sulla console i numeri da 1 a n, dove n è un numero intero che la funzione prende come parametro, con le seguenti condizioni:

  • output fizz invece di multipli di 3;
  • emette ronzio invece di numeri multipli di 5;
  • fizzbuzz invece dei numeri che sono multipli sia di 3 che di 5.

esempio

Fizzbuzz(5)

risultato

// 1
// 2
// frizzante
// 4
//ronzio

Analizziamo il compito

La cosa principale qui è un modo per trovare multipli usando JavaScript. Può essere implementato utilizzando l'operatore modulo o il resto -%, che consente di mostrare il resto quando si dividono due numeri. Se il resto è 0 significa che il primo numero è multiplo del secondo.

12% 5 // 2 -> 12 non è un multiplo di 5
12% 3 // 0 -> 12 è multiplo di 3

Quindi, se dividi 12 per 5, ottieni 2 con resto di 2. Se dividi 12 per 3, ottieni 4 con resto di 0. Nel primo caso 12 non è multiplo di 5, nel secondo , 12 è un multiplo di 3.

Soluzione

La soluzione ottimale sarebbe il seguente codice:

const fizzBuzz = num => {
  for(let i = 1; i <= num; i++) {
    // check if the number is a multiple of 3 and 5
    if(i % 3 === 0 && i % 5 === 0) {
      console.log('fizzbuzz')
    } // check if the number is a multiple of 3
      else if(i % 3 === 0) {
      console.log('fizz')
    } // check if the number is a multiple of 5
      else if(i % 5 === 0) {
      console.log('buzz')
    } else {
      console.log(i)
    }
  }
}

La funzione esegue i controlli necessari utilizzando istruzioni condizionali e produce il risultato richiesto dall'utente. Nel problema vale la pena prestare attenzione all'ordine delle istruzioni if...else: iniziare con una doppia condizione (&&) e terminare con il caso in cui non è possibile trovare più numeri. Di conseguenza, copriamo tutte le opzioni.

Anagramma

Questo è il nome di una parola che contiene tutte le lettere di un'altra parola nello stesso numero, ma in un ordine diverso.

produzione

Dobbiamo scrivere una funzione che controlli se due stringhe sono anagrammi e il caso non ha importanza. Vengono contati solo i caratteri; gli spazi o i segni di punteggiatura non vengono presi in considerazione.

anagram('finder', 'Amico') —> true
anagramma('ciao', 'ciao') —> false

Analizziamo il compito

La cosa importante da considerare qui è che devi controllare ogni lettera nelle due righe di input e il loro numero in ciascuna riga.

cercatore —> f: 1 amico —> f: 1
io: 1 r: 1
n: 1 io: 1
d: 1 e: 1
e: 1 n: 1
r: 1 d: 1

Per memorizzare i dati dell'anagramma, dovresti scegliere una struttura come un oggetto letterale JavaScript. La chiave in questo caso è il carattere della lettera, il valore è il numero delle sue ripetizioni nella riga corrente.

Ci sono altre condizioni:

  • È necessario assicurarsi che il caso delle lettere non venga preso in considerazione durante il confronto. Convertiamo semplicemente entrambe le stringhe in minuscolo o maiuscolo.
  • Escludiamo tutti i non-personaggi dal confronto. Meglio lavorare con espressioni regolari.

Soluzione

// helper function that builds the
// object to store the data
const buildCharObject = str => {
  const charObj = {}
  for(let char of str.replace(/[^w]/g).toLowerCase()) {
    // if the object has already a key value pair
    // equal to the value being looped over,
    // increase the value by 1, otherwise add
    // the letter being looped over as key and 1 as its value
    charObj[char] = charObj[char] + 1 || 1
  }
  return charObj
}
 
// main function
const anagram = (strA, strB) => {
  // build the object that holds strA data
  const aCharObject = buildCharObject(strA)
  // build the object that holds strB data
  const bCharObject = buildCharObject(strB)
 
  // compare number of keys in the two objects
  // (anagrams must have the same number of letters)
  if(Object.keys(aCharObject).length !== Object.keys(bCharObject).length) {
    return false
  }
  // if both objects have the same number of keys
  // we can be sure that at least both strings
  // have the same number of characters
  // now we can compare the two objects to see if both
  // have the same letters in the same amount
  for(let char in aCharObject) {
    if(aCharObject[char] !== bCharObject[char]) {
      return false
    }
  }
  // if both the above checks succeed,
  // you have an anagram: return true
  return true
}

Attenzione all'uso Object.keys () nello snippet qui sopra. Questo metodo restituisce un array contenente nomi o chiavi nello stesso ordine in cui appaiono nell'oggetto. In questo caso l'array sarà così:

['f', 'i', 'n', 'd', 'e', ​​​​'r']

In questo modo otteniamo le proprietà dell'oggetto senza dover eseguire un ciclo di massa. In un problema, puoi utilizzare questo metodo con la proprietà .length per verificare se entrambe le stringhe hanno lo stesso numero di caratteri: questa è una caratteristica importante degli anagrammi.

Cerca le vocali

Un compito abbastanza semplice che emerge spesso nelle interviste.

produzione

È necessario scrivere una funzione che prenda una stringa come argomento e restituisca il numero di vocali contenute nella stringa.
Le vocali sono “a”, “e”, “i”, “o”, “u”.

Esempio:

findVowels('ciao') // —> 2
findVowels('perché') // —> 0

Soluzione

Ecco l'opzione più semplice:

const findVowels = str => {
  let count = 0
  const vowels = ['a', 'e', 'i', 'o', 'u']
  for(let char of str.toLowerCase()) {
    if(vowels.includes(char)) {
      count++
    }
  }
  return count
}

È importante prestare attenzione all'uso del metodo .includes(). È disponibile sia per stringhe che per array. Dovrebbe essere utilizzato per determinare se un array contiene un determinato valore. Questo metodo restituisce true se l'array contiene il valore specificato e false in caso contrario.

Esiste una soluzione più breve al problema:

const findVowels = str => {
  const matched = str.match(/[aeiou]/gi)
  return matched ? matches.length : 0
}

Utilizza il metodo .match(), che consente di implementare una ricerca efficiente. Se all'interno della stringa specificata viene trovata un'espressione regolare come argomento del metodo, il valore restituito è un array di caratteri corrispondenti. Bene, se non ci sono corrispondenze, .match() restituisce null.

Fibonacci

Un compito classico che si ritrova nelle interviste a vari livelli. Vale la pena ricordare che la sequenza di Fibonacci è una serie di numeri in cui ciascuno successivo è la somma dei due precedenti. Quindi, i primi dieci numeri appaiono così: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34.

produzione

È necessario scrivere una funzione che restituisca l'n-esimo record in una determinata sequenza, dove n è il numero passato come argomento alla funzione.

fibonacci(3) // —> 2

Questa attività implica percorrere un ciclo il numero di volte specificato nell'argomento, restituendo il valore nella posizione appropriata. Questo modo di porre il problema richiede l'uso di loop. Se invece usi la ricorsione, potrebbe far piacere all'intervistatore e darti qualche punto extra.

Soluzione

const fibonacci = num => {
  // store the Fibonacci sequence you're going
  // to generate inside an array and
  // initialize the array with the first two
  // numbers of the sequence
  const result = [0, 1]
 
  for(let i = 2; i <= num; i++) {
    // push the sum of the two numbers
    // preceding the position of i in the result array
    // at the end of the result array
    const prevNum1 = result[i - 1]
    const prevNum2 = result[i - 2]
    result.push(prevNum1 + prevNum2)
  }
  // return the last value in the result array
  return result[num]
}

Nella matrice dei risultati, i primi due numeri sono contenuti nella serie perché ogni voce nella sequenza è la somma dei due numeri precedenti. All'inizio non ci sono due numeri che possono essere presi per ottenere il numero successivo, quindi il ciclo non può generarli automaticamente. Ma, come sappiamo, i primi due numeri sono sempre 0 e 1. Pertanto, è possibile inizializzare manualmente l'array dei risultati.

Per quanto riguarda la ricorsione, tutto è più semplice e complicato allo stesso tempo:

const fibonacci = num => {
  // if num is either 0 or 1 return num
  if(num < 2) {
    return num
  }
  // recursion here
  return fibonacci(num - 1) + fibonacci(num - 2)
}

Continuiamo a chiamare fibonacci(), passando numeri sempre più piccoli come argomenti. Ci fermiamo quando l'argomento passato è 0 o 1.

conclusione

Molto probabilmente, hai già affrontato una di queste attività se sei stato intervistato per un lavoro di sviluppatore frontend o JavaScript (soprattutto se è a livello junior). Ma se non li hai ancora incontrati, potrebbero tornarti utili in futuro, almeno per lo sviluppo generale.

Skillbox consiglia:

Fonte: habr.com

Aggiungi un commento