5 つの典型的な JavaScript インタビュー タスク: 分析と解決策

翻訳者より: あなたのために記事を公開しました 一般的な JavaScript タスクについて語る Maria Antonietta Perna 氏, ほとんどの場合、面接中に開発者応募者に提案されます。 この記事は、まず第一に、初心者プログラマーにとって役立ちます。

テクノロジー企業の面接は長い間話題になってきた。 これは驚くべきことではありません。面接に合格すると、良い仕事に就く機会が得られます。 しかし、多くの場合、複雑な問題を解決する必要があるため、これはそれほど単純ではありません。

さらに、ほとんどの場合、これらのタスクのほとんどは応募者が実行する作業とは関連していませんが、それでも解決する必要があります。 場合によっては、Google やその他の情報源に確認せずに、ボード上でそれを実行しなければならない場合があります。 はい、状況は徐々に変化しており、一部の企業はそのような面接を放棄していますが、多くの雇用主は依然としてこの伝統を守っています。 この記事では、求職者のタスクとしてよく使用される典型的な JavaScript タスクの分析に専念します。

リマインダー： 「Habr」のすべての読者が対象 - 「Habr」プロモーション コードを使用してスキルボックス コースに登録すると 10 ルーブルの割引。

スキルボックスは次のことを推奨します。 実践コース 「モバイルデベロッパーPRO」.

重要なのは、面接の準備をしっかりと行うことです。

はい、タスクの説明を始める前に、面接準備の一般的なヒントをいくつか見てみましょう。

主なことは事前の準備です。 アルゴリズムとデータ構造をどれだけ覚えているかをテストし、あまり詳しくない分野の知識を向上させます。 面接の準備に役立つオンライン プラットフォームは数多くあります。 私たちはアドバイスします おたく, プランプ, インタビュー.io и コード信号.

決定を声に出して言うことを学ぶ価値があります。 単に板書する（または黙ってコンピュータにコードを入力する）だけでなく、自分が何をしているのかを応募者に伝えることをお勧めします。 こうすることで、コードに間違いがあっても、解決策は通常は正しい場合に、成功の可能性を高めることができます。

問題を解決し始める前に、問題を理解する必要があります。 場合によっては、タスクを表面的に理解してから、間違った道を進む可能性があります。 面接官に明確な質問をいくつかする価値があるかもしれません。

PC ではなく、手でコードを書く練習をする必要があります。 面接中に応募者にマーカーとホワイトボードが与えられますが、ヒントや自動フォーマットはありません。 解決策を探すときは、コードを紙に書くか、ボードに直接書き留める価値があります。 すべてを頭の中に留めていると、重要なことを忘れてしまう可能性があります。

JavaScript のテンプレート タスク

これらのタスクの中には、おそらくすでによく知られているものもあります。 面接で似たような問題を解決しなければならなかった、または JavaScript を学習しながら面接の練習をしたことがあるでしょう。 さて、今度はプロセスを詳しく説明しながら、もう一度問題を解決してみましょう。

回文

回文とは、通常の方向でも、逆の方向でもまったく同じように読まれる単語、文、または一連の文字です。 たとえば、「Anna」は回文ですが、「table」と「John」は回文ではありません。

ステージング

文字列を指定すると、 文字列が回文の場合は true を返し、そうでない場合は false を返す関数を作成する必要があります。 この場合、スペースと句読点を考慮する必要があります。

回文('レースカー') === true
回文('テーブル') === false

タスクを分析しましょう

ここでの主なアイデアは、文字列を逆にすることです。 「逆」文字列が元の文字列と完全に同一である場合、回文を受信したことになり、関数は true を返すはずです。 そうでない場合は偽です。

ソリューション

これが回文を解くコードです。

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('')
}

最初のステップは、入力文字列内の文字を小文字に変換することです。 これは、プログラムが大文字小文字などを比較するのではなく、文字自体を比較することを保証します。

XNUMX 番目のステップは、ラインを反転することです。 これは難しいことではありません。.split() メソッド (String ライブラリ) を使用して配列に変換する必要があります。 次に、.reverse() (配列ライブラリ) を使用して配列を反転します。 最後のステップは、.join() (配列ライブラリ) を使用して逆配列を文字列に変換することです。

あとは、「逆」文字列を元の文字列と比較して、結果の true または false を返すだけです。

フィズバズ

面接で最も人気のあるタスクの XNUMX つ。

ステージング

次の条件で、1 から n までの数値をコンソールに出力する関数を作成する必要があります。n は関数がパラメーターとして受け取る整数です。

• 3 の倍数の代わりに fizz を出力します。
• 5 の倍数の数値の代わりにバズを出力します。
• fizzbuzz は、3 と 5 の倍数の数値の代わりに出力します。

例

フィズバズ(5)

結果

/ / 1
/ / 2
// シュワシュワ
/ / 4
//バズ

タスクを分析しましょう

ここで重要なのは、JavaScript を使用して倍数を見つける方法です。 これは、剰余演算子または剰余 - % を使用して実装できます。これにより、0 つの数値を除算したときに剰余を表示できます。 余りが XNUMX の場合、最初の数値が XNUMX 番目の数値の倍数であることを意味します。

12% 5 // 2 -> 12 は 5 の倍数ではありません
12% 3 // 0 -> 12 は 3 の倍数です

したがって、12 を 5 で割ると 2 になり、余りは 2 になります。12 を 3 で割ると、4 になり、余りは 0 になります。最初のケースでは、12 は 5 の倍数ではありませんが、12 番目のケースでは、3 は XNUMX の倍数ではありません。 , XNUMXはXNUMXの倍数です。

ソリューション

最適な解決策は次のコードになります。

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

この関数は、条件ステートメントを使用して必要なチェックを実行し、ユーザーが必要とする結果を生成します。 この問題では、if...else ステートメントの順序に注意する必要があります。二重条件 (&&) で始まり、複数の数値が見つからなかった場合で終わります。 その結果、すべてのオプションをカバーします。

アナグラム

これは、別の単語のすべての文字が同じ番号で、異なる順序で含まれている単語の名前です。

ステージング

XNUMX つの文字列がアナグラムであるかどうかをチェックする関数を作成する必要があります。大文字と小文字は関係ありません。 文字のみがカウントされます。 スペースや句読点は考慮されません。

アナグラム('ファインダー', '友達') —> true
アナグラム('こんにちは', 'さようなら') —> false

タスクを分析しましょう

ここで考慮すべき重要なことは、XNUMX つの入力行の各文字と各行のそれらの番号を確認する必要があるということです。

ファインダー —> f: 1 フレンド —> f: 1
i:1 r:1
n:1 i:1
d:1 e:1
e:1 n:1
r:1 d:1

アナグラム データを保存するには、JavaScript オブジェクト リテラルなどの構造を選択する必要があります。 この場合のキーは文字の文字であり、値は現在の行内でのその文字の繰り返し回数です。

他にも次のような条件があります。

• 比較するときに大文字と小文字が考慮されていないことを確認する必要があります。 両方の文字列を小文字または大文字に変換するだけです。
• 文字以外の文字はすべて比較から除外します。 一緒に働くのに最適 正規表現.

ソリューション

// 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
}

使用に注意してください Object.keys（） 上のスニペットで。 このメソッドは、オブジェクト内に出現するのと同じ順序で名前またはキーを含む配列を返します。 この場合、配列は次のようになります。

['f'、'i'、'n'、'd'、'e'、'r']

このようにして、一括ループを実行せずにオブジェクトのプロパティを取得します。 問題がある場合は、このメソッドを .length プロパティとともに使用して、両方の文字列の文字数が同じかどうかを確認できます。これはアナグラムの重要な機能です。

母音を検索する

面接でもよく出てくる、とても単純な仕事です。

ステージング

文字列を引数として受け取り、その文字列に含まれる母音の数を返す関数を作成する必要があります。
母音は「a」、「e」、「i」、「o」、「u」です。

例：

findVowels('hello') // —> 2
findVowels('why') // —> 0

ソリューション

最も単純なオプションは次のとおりです。

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
}

.includes() メソッドの使用に注意することが重要です。 文字列と配列の両方で使用できます。 これは、配列に特定の値が含まれているかどうかを判断するために使用する必要があります。 このメソッドは、配列に指定された値が含まれている場合は true を返し、含まれていない場合は false を返します。

この問題にはもっと短い解決策があります。

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

これは .match() メソッドを使用しており、効率的な検索を実装できます。 メソッド引数としての正規表現が指定された文字列内で見つかった場合、戻り値は一致する文字の配列です。 一致するものがない場合、.match() は null を返します。

フィボナッチ

さまざまなレベルの面接で見られる古典的なタスクです。 フィボナッチ数列は一連の数値であり、後続の各数値は前の 0 つの数値の合計であることを思い出してください。 したがって、最初の 1 個の数字は次のようになります: 1、2、3、5、8、13、21、34、XNUMX、XNUMX。

ステージング

特定の順序で n 番目のレコードを返す関数を作成する必要があります。n は関数に引数として渡される数値です。

フィボナッチ(3) // —> 2

このタスクでは、引数で指定された回数だけループを実行し、適切な位置の値を返します。 この問題を提起する方法では、ループを使用する必要があります。 代わりに再帰を使用すると、面接官が喜んで、いくつかの追加ポイントを与える可能性があります。

ソリューション

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]
}

シーケンス内の各エントリは前の 0 つの数値の合計であるため、結果配列には最初の 1 つの数値が含まれます。 最初は、次の数値を取得するために取得できる XNUMX つの数値は存在しないため、ループはそれらを自動的に生成できません。 ただし、ご存知のとおり、最初の XNUMX つの数値は常に XNUMX と XNUMX です。したがって、結果の配列を手動で初期化できます。

再帰に関しては、すべてがより単純であると同時により複雑になります。

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

fibonacci() を呼び出し続け、引数としてますます小さい数値を渡します。 渡された引数が 0 または 1 の場合に停止します。

出力

フロントエンドまたは JavaScript 開発者の仕事の面接を受けたことがある場合 (特にそれがジュニア レベルの場合)、おそらく、これらのタスクのいずれかにすでに遭遇したことがあるでしょう。 しかし、まだそれらに出会っていない場合でも、将来的には、少なくとも一般的な開発には役立つかもしれません。

スキルボックスは次のことを推奨します。

• オンラインコースの申し込み 「Pythonデータアナリスト」.
• オンラインコース 「職業フロントエンド開発者」.
• 実践一年コース 「0からPROまでのPHP開発者」.

出所： habr.com