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

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

翻訳者より: あなたのために記事を公開しました 典型的なJavaScriptタスクについて語るマリア・アントニエッタ・ペルナ開発者の応募者に対して面接中に最も頻繁に提供されるものです。この記事は、まず第一に、初心者プログラマーにとって役立つでしょう。

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

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

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

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

重要なのは、面接に向けて徹底的に準備することです。

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

大切なのは事前に準備することです。 アルゴリズムとデータ構造の記憶力をテストし、あまり詳しくない領域を復習します。面接の準備に役立つオンライン プラットフォームは数多くあります。おすすめ おたく, プランプ, インタビュー.io и コード信号.

決断を声に出して言うことを学ぶ価値はあります。 単に黒板に書くだけでなく(またはコンピューターに黙ってコードを入力するだけでなく)、応募者に自分の仕事内容を伝えることをお勧めします。こうすることで、コードに間違いがあっても解決策が概ね正しい場合、成功する可能性が高まります。

問題を解決し始める前に、その問題を理解する必要があります。 場合によっては、タスクを表面的に理解しただけで、間違った方向に進んでしまうこともあります。面接官にいくつか説明のための質問をしてみるのも価値があるかもしれません。

PC ではなく、手でコードを書く練習をする必要があります。 場合によっては、面接中に応募者にマーカーとボードが渡され、プロンプトや自動フォーマットがないことがあります。解決策を探すときは、コードを紙に書き留めるか、ボードに直接書き出すことをお勧めします。すべてを頭の中に留めておくと、重要なことを忘れてしまうかもしれません。

JavaScript のテンプレートタスク

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

回文

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

ステージング

線が与えられると、文字列が回文の場合は true を返し、そうでない場合は false を返す関数を記述する必要があります。この場合、スペースと句読点を考慮する必要があります。

回文('レースカー') === true
回文('table') === 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('')
}

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

2 番目のステップは、ラインを反転することです。これは簡単に実行できます。.split() メソッド (String ライブラリ) を使用して配列に変換する必要があります。次に、.reverse() (配列ライブラリ) を使用して配列を反転します。最後のステップは、.join() (配列ライブラリ) を使用して、反転された配列を文字列に変換することです。

今必要なのは、「逆」文字列を元の文字列と比較し、true または false の結果を返すことだけです。

フィズバズ

最も人気のある面接の質問の 1 つ。

ステージング

1 から n までの数字をコンソールに出力する関数を記述する必要があります。ここで、n は関数がパラメーターとして受け入れる整数であり、次の条件を満たします。

  • 3 の倍数の数値の代わりに fizz を出力します。
  • 5 の倍数の数字の代わりに buzz を出力します。
  • 3 と 5 の両方の倍数の数値の代わりに fizzbuzz を出力します。

フィズバズ(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 の倍数です。

ソリューション

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

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 演算子の順序に注意する価値があります。二重条件 (&&) で始まり、複数の数値が見つからなかったケースで終わります。その結果、すべてのオプションをカバーします。

アナグラム

これは、別の単語のすべての文字が同じ数だけ含まれているが、順序が異なる単語に付けられた名前です。

ステージング

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

アナグラム('finder', 'Friend') —> true
アナグラム('hello', 'bye') —> false

タスクを分析してみましょう

2 つの入力行の各文字と各行の文字数を確認する必要があることに留意することが重要です。

発見者 —> f: 1 友人 —> f: 1
私: 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 と 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 開発者職(特にジュニアレベル)の面接を受けたことがあるなら、おそらくこれらの課題のいくつかに遭遇したことがあるでしょう。しかし、たとえまだ遭遇していなくても、将来的には役に立つかもしれません。少なくとも一般的な開発においては。

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

出所: habr.com

DDoS 保護機能を備えた信頼性の高いサイト用ホスティング、VPS VDS サーバーを購入する 🔥 DDoS攻撃対策付きの信頼性の高いウェブサイトホスティング、VPS/VDSサーバーを購入しましょう | ProHoster