私は最近、サンフランシスコの
FreeCodeCampプロジェクトの参加者の
会議に出席する機会がありました。 誰も知らない場合、Free Code CampはJavaScriptとWebプログラミングの学習専用のコミュニティです。 そこで、フロントエンドのデベロッパーポジションのインタビューの準備をしていた1人の人が、JavaScriptの質問をどのように解決すべきかを尋ねてきました。 私は少しグーグルで検索しましたが、リンクを張って「これらの質問とあなたの仕事をしてください」と言うことができる適切な質問のリストを見つけることができませんでした。
いくつかの リスト は私が見つけたいものに
近く 、
いくつか は非常に
シンプルに
見えましたが、不完全であったか、実際のインタビューではほとんど誰も聞かない質問が含まれていました。
最終的に、私は自分のリストを作成することにしました。 仕事を探しているときに私に尋ねた質問と、フロントエンド開発者の職に就く従業員を探しているときに尋ねた質問が含まれています。 一部の企業（Googleなど）は、効率的なアルゴリズムの設計などに特別な注意を払っています。 したがって、同様の会社で働きたい場合は、ここにリストされている質問に加えて、
CodeJamコンテストの問題を解決して
ください 。
ここでこれらの質問への回答を追加および編集し
ます 。 何かを補完または改善したい場合は、プルリクエストに喜んでいます。
質問はいくつかのセクションに分かれています。
だからここに私の質問があります。
理論
インタビュー対象者は、このセクションの質問に触れる概念を明確に理解し、すべてを説明できる必要があります。 ここではプログラミングは不要です。
- O-Big表記とは何ですか？
- DOMとは何ですか？
- イベントループとは何ですか？
- 閉鎖とは何ですか？
- プロトタイプ継承はどのように機能し、従来の継承モデルとどのように違いますか？ （私の意見では、これは特に有用な質問ではありませんが、多くの人が質問したいです。）
- thisキーワードはどのように機能しますか？
- イベントポップアップとは何ですか？このメカニズムはどのように機能しますか？ （私もこの質問は好きではありませんが、インタビューでよく尋ねます。）
- クライアントとサーバー間でデータを交換するいくつかの方法を説明します。 いくつかのネットワークプロトコル（IP、TCP、HTTP / S / 2、UDP、RTC、DNSなど）がどのように機能するかについては詳しく説明しません。
- RESTとは何ですか？なぜこのテクノロジーが人気があるのですか？
- 私のサイトは遅いです。 診断と修正の手順について教えてください。 一般的な最適化アプローチを説明し、それらをいつ使用するかを教えてください。
- どのフレームワークを使用しましたか？ 彼らの長所と短所は何ですか？ なぜプログラマーはフレームワークを使用するのですか？ フレームワークはどのような問題を解決しますか？
プログラミング
これらの質問に対する答えには、JavaScriptでの関数の実装が含まれます。 各質問の後に、ソリューションが正常に合格する必要があるテストが続きます。
▍簡単なタスク
isPrime()関数を実装します。これは、渡された数値が素数であるかどうかを示すtrueまたはfalseを返しtrue 。
isPrime(0) // false isPrime(1) // false isPrime(17) // true isPrime(10000000000000) // false
- 渡された数値の階乗を返す
factorial()関数を実装します。
factorial(0) // 1 factorial(1) // 1 factorial(6) // 720
- n番目のフィボナッチ数を返す
fib()関数を実装します。
fib(0) // 0 fib(1) // 1 fib(10) // 55 fib(20) // 6765
isSorted()関数を実装します。この関数は、渡された数値配列がソートされているかどうかに応じてtrueまたはfalseを返しtrue 。
isSorted([]) // true isSorted([-Infinity, -5, 0, 3, 9]) // true isSorted([3, 9, -3, 10]) // false
filter()関数の独自の実装を作成します。
filter([1, 2, 3, 4], n => n < 3)
reduce()独自の実装を作成します。
reduce([1, 2, 3, 4], (a, b) => a + b, 0) // 10
- 渡された文字列の文字シーケンスを逆にする、
reverse()関数を実装します。 組み込みのreverse()関数を使用しないでください。
reverse('') // '' reverse('abcdef') // 'fedcba'
- 配列の
indexOf()関数の独自の実装を作成します。
indexOf([1, 2, 3], 1) // 0 indexOf([1, 2, 3], 4) // -1
isPalindrome()関数を実装します。この関数は、渡された文字列が回文であるかどうかに応じてtrueまたはfalseを返しtrue （関数は大文字と小文字を区別せず、文字列にスペースが含まれます）。
isPalindrome('') // true isPalindrome('abcdcba') // true isPalindrome('abcd') // false isPalindrome('A man a plan a canal Panama') // true
missing()関数を実装します。この関数は、1から特定の数nまでの一意の数字の並べ替えられていない配列（つまり、数字が繰り返されない）を受け取り、シーケンスにない数字を返します。 不足している番号が1つあるか、まったくない場合があります。
関数がO（N）時間で問題を解決することを保証できますか？ ヒント：使用できる優れた式が1つあります。
missing([]) // undefined missing([1, 4, 3]) // 2 missing([2, 3, 4]) // 1 missing([5, 1, 4, 2]) // 3 missing([1, 2, 3, 4]) // undefined
- i
sBalanced()関数を実装します。この関数は、ストリングを受け取り、ストリング内の中括弧がバランスをとっているかどうかを示すtrueまたはfalseを返しtrue 。
isBalanced('}{') // false isBalanced('{{}') // false isBalanced('{}{}') // true isBalanced('foo { bar { baz } boo }') // true isBalanced('foo { bar { baz }') // false isBalanced('foo { bar } }') // false
dium中程度のクエスト
fib2()関数を実装します。 これは、前のタスクグループのfib()関数に似ていますが、最大50までの数値をサポートしています。ヒント：メモ化を使用します。
fib2(0) // 0 fib2(1) // 1 fib2(10) // 55 fib2(50) // 12586269025
isBalanced2()関数を実装します。 これは、前のタスクグループのisBalanced()関数に似ていますが、3種類のブラケットをサポートしています：中括弧{} 、正方形[] 、および丸() 。 不正なブラケットシーケンスを含む文字列を関数に渡す場合、関数はfalse返す必要がありfalse 。
isBalanced2('(foo { bar (baz) [boo] })') // true isBalanced2('foo { bar { baz }') // false isBalanced2('foo { (bar [baz] } )') // false
uniq()関数を実装します。これは、数値の配列を受け取り、その中に見つかった一意の数値を返します。 関数はO（N）時間でこの問題を解決できますか？
uniq([]) // [] uniq([1, 4, 2, 2, 3, 4, 8]) // [1, 4, 2, 3, 8]
intersection()関数を実装します。この関数は2つの配列を取り、それらの交差を返します。 O（M + N）timeでこの問題を解決する関数を取得できますか？ MとNは配列の長さです？
intersection([1, 5, 4, 2], [8, 91, 4, 1, 3])
- O（N×log（N））timeで数値配列をソートする
sort()関数の実装を作成します。
sort([])
- include
includes()関数を実装します。この関数は、渡された番号が、渡されたソート済み配列で発生するかどうかに応じてtrueまたはfalseを返しtrue 。 関数はO（log（N））時間でこの問題を解決できますか？
includes([1, 3, 8, 10], 8) // true includes([1, 3, 8, 8, 15], 15) // true includes([1, 3, 8, 10, 15], 9) // false
assignDeep()関数を実装します。これはObject.assign()似ていますが、オブジェクトの深い結合を行います。 タスクを複雑にしないために、オブジェクトには数字と他のオブジェクトのみを含めることができるという仮定から進めることができます（配列や文字列などを含めることはできません）。
assignDeep(, )
reduceAsync()関数を実装します。これは、単純なタスクのグループのreduce()関数に似ていますが、promiseオブジェクトを返す関数と連携しますreduceAsync()オブジェクトは、それぞれ次のタスクに進む前に解決する必要があります。
let a = () => Promise.resolve('a') let b = () => Promise.resolve('b') let c = () => new Promise(resolve => setTimeout(() => resolve('c'), 100)) await reduceAsync([a, b, c], (acc, value) => [...acc, value], []) // ['a', 'b', 'c'] await reduceAsync([a, c, b], (acc, value) => [...acc, value], ['d']) // ['d', 'a', 'c', 'b']
reduceAsync()関数で作業するときと同じアプローチを使用して、 seq()関数を実装します。 この関数は、promiseオブジェクトを返し、それらを1つずつ解決する関数の配列を取る必要があります。
let a = () => Promise.resolve('a') let b = () => Promise.resolve('b') let c = () => Promise.resolve('c') await seq([a, b, c])
▍課題
このグループの一部のタスクは、データ構造の作成に関連しています。 機能のすべての微妙な点を覚えておく必要はありません。デバイスを理解するだけで十分ですが、提供するインターフェイスに関する情報はインターネットで見つけることができます。 次に、これらのデータ構造が使用される理由、他のデータ構造と比較した場合の制限事項を知る必要があります。
- 指定された文字列のすべての順列を含む文字列の配列を返す
permute()関数を実装します。
permute('') // [] permute('abc') // ['abc', 'acb', 'bac', 'bca', 'cab', 'cba']
debounce()関数の独自の実装を作成します。
let a = () => console.log('foo') let b = debounce(a, 100) b() b() b()
- JavaScriptの組み込み配列（
[] ）を使用せずにLinkedListクラスを実装します。 LinkedListは、 add()およびhas() 2つのメソッドのみをサポートする必要がありhas() 。
class LinkedList {...} let list = new LinkedList(1, 2, 3) list.add(4) // undefined list.add(5) // undefined list.has(1) // true list.has(4) // true list.has(6) // false
- 組み込みJavaScriptオブジェクト（
{} ）またはmap()関数を使用せずにHashMapクラスを実装します。 文字列を受け取って特定の数値を返すhash()関数が与えられました。 これらの番号はほとんど一意ですが、2つの番号が同じ番号に対応する可能性もあります。
function hash (string) { return string .split('') .reduce((a, b) => ((a << 5) + a) + b.charCodeAt(0), 5381) }
HashMap実装は、 get()およびset() 2つのメソッドのみをサポートする必要があります。
let map = new HashMap map.set('abc', 123) // undefined map.set('foo', 'bar') // undefined map.set('foo', 'baz') // undefined map.get('abc') // 123 map.get('foo') // 'baz' map.get('def') // undefined
BinarySearchTreeクラスを実装します。 add() 、 has() 、 remove() 、およびsize() 4つのメソッドをサポートする必要がありsize() 。
let tree = new BinarySearchTree tree.add(1, 2, 3, 4) tree.add(5) tree.has(2) // true tree.has(5) // true tree.remove(3) // undefined tree.size() // 4
- BinaryTreeクラスを実装します。これは、幅優先検索、対称、順方向、逆方向の深さ検索機能をサポートします。
let tree = new BinaryTree let fn = value => console.log(value) tree.add(1, 2, 3, 4) tree.bfs(fn) // undefined tree.inorder(fn) // undefined tree.preorder(fn) // undefined tree.postorder(fn) // undefined
デバッグ
次の質問に答えるときは、まず、表示されたコードが機能しない理由を理解してください。 エラーの原因を説明してください。 次に、問題を修正するためのいくつかのオプションを提案し、提案されたオプションの1つを実装してコードを書き直します。 その結果、プログラムは正しく動作するはずです。
- このコードはログに
hey arnold hey amyを出力する必要がありますが、 hey arnold出力します。 なんで？
function greet(person) { if (person == { name: 'amy' }) { return 'hey amy' } else { return 'hey arnold' } } greet({ name: 'amy' })
- このコードは、指定された順序で番号
0, 1, 2, 3記録する必要がありますが、記録しません（ある日、このエラーが発生します。インタビューでこの質問をしたい人もいます）。
for (var i = 0; i < 4; i++) { setTimeout(() => console.log(i), 0) }
- このコードは
doggoログに出力する必要がありますが、 undefinedのみを出力します。
let dog = { name: 'doggo', sayName() { console.log(this.name) } } let sayName = dog.sayName sayName()
Dogオブジェクトのbark()メソッドを呼び出そうとすると、エラーがスローされます。 なんで？
function Dog(name) { this.name = name } Dog.bark = function() { console.log(this.name + ' says woof') } let fido = new Dog('fido') fido.bark()
isBig()関数が正確にこの結果を返すのはなぜですか？
function isBig(thing) { if (thing == 0 || thing == 1 || thing == 2) { return false } return true } isBig(1) // false isBig([2]) // false isBig([3]) // true
システム設計
「システム設計」が何であるかわからない場合は、まず
これをお読みください。
1.ユーザーが入力したテキストの自動補完ウィジェットの実装について教えてください。 オートコンプリートデータがサーバーからダウンロードされます。 システムのクライアントとサーバーの部分を考慮してください。
- 次の機能をサポートするシステムのクライアント部分をどのように設計しますか：
- サーバーAPIを使用してデータを取得します。
- 要素が親要素と子要素を持つことができる場合、つまりオートコンプリートヒントが通常のフラットリストではない場合に、結果をツリーに表示します。
- 通常のテキストフラグメントに加えて、さまざまなタイプの要素（フラグ、ラジオボタン、アイコン）をサポートします。
- コンポーネントAPIはどのように見えますか？
- サーバーAPIはどのように見えますか？
- ウィジェットがリアルタイムで動作し、ユーザーがデータを入力するときにプロンプトを表示するには、どのようなパフォーマンスの考慮事項を考慮する必要がありますか？ 境界線の場合はありますか（たとえば、ユーザーが低速のネットワーク接続ですばやく入力した場合）。
- この高性能ソリューションのネットワークサブシステムとサーバー側をどのように設計しますか？ クライアントとサーバーの相互作用をどのように整理しますか？ データはサーバーにどのように保存されますか？ 大量のデータと多数のクライアントをサポートするために、これらすべてをどのように拡張しますか？
2.クライアントパーツとサーバーパーツを説明するTwitterのようなサービスの実装について教えてください（この質問は友人の
Michael Wuから盗まれました）。
- ツイートはサーバーからどのようにダウンロードされ、ユーザーインターフェイスに表示されますか？
- ツイートを更新するとき、フィードはどのように更新されますか？ アプリケーションのクライアント部分は、新しいツイートの出現についてどのように学習しますか？
- ツイートはどのように検索されますか？ 検索は著者ごとにどのように整理されますか？ データベース、アプリケーションのサーバー部分、およびAPIの設計方法を教えてください。
まとめ
これらの質問が、面接に行く人とそれを行う人の両方に役立つことを願っています。 そして、あなたがどちらにも関係していない場合、質問はあなたが良いプログラミング形式で自分を維持するのに役立つと信じています。
ちなみに、練習したい場合はさらにいくつかの場所を見てみましょう：
アルゴリズム設計マニュアル 、
CodeJamコンペティションのタスク、
keon /アルゴリズムリポジトリ。 また、JS開発者に役立つリソースをいくつか
紹介します。JavaScriptAllonge 、
JSを知らない 、
効果的なJavaScriptです。
親愛なる読者！ このリストに追加する必要があると思われる質問がある場合（またはエラーを見つけた場合）、この資料の著者に連絡してください。