JavaScript フロントエンドの面接で最もよく聞かれる 10 の質問

この種のインタビューに同意しない人がたくさんいることは知っています。実際、好むと好まざるにかかわらず、それを受け入れなければなりません。特に、独学で初めての仕事に応募する場合はそうです。

自分自身を証明する方法は他にもたくさんあると思います。たとえば、Github/プロジェクトのアドレスは理想的な証明方法かもしれませんが、すべてを当てにしないでください。

良いニュースは、限られた時間内で答えることができなかった難しい質問がいくつかあったことです (イベント ループやヤン フイ トライアングルなど)。また、他の面接候補者の何人かも、それらにも答えることができなかったことを認めました。そうすると、議論はあまり面白くなくなります。

悪いニュースは、一部のインタビューではその後のフィードバックがないことです。 3社とは二度と連絡が取れなかった。このクリックは自信を失い、失礼です。すると「面接がうまくいかなかったのでは？」「私のタイプが気に入らないのでは？」と心理的な葛藤が生じるかもしれません。したがって、あなたが面接官である場合は、面接官に明確な答えを返してください。たとえ自動返信であっても、何もしないよりはマシです。

1. n行目のYang Hui三角形を返す関数を設計します。 (インタビュー全体でこの問題しかありません)

注* ヤン・ホイの三角形はパスカルの三角形とも呼ばれます

1

1

1

1

1 3 3 1

...

2 . 文字列内で最も繰り返される単語を返す関数を設計します。

3. 再帰を使用して、長さ n のフィボナッチ数列を出力します。

注* フィボナッチ数列は 0 と 1 で始まり、前の 2 つの数値 0、1、1、2、3、5、8、13、21、34、55、89、144、233 を加算します

4.bind、apply、callの使い方と違いを説明します。

5. イベント委任とは何か、そしてそれがなぜ役立つのかを説明します。

6. イベントループとは何ですか?

7. JavaScript でホイスティング (宣言ホイスティング) はどのように機能しますか?

8. アプリまたは Web サイトを設計するときのプロセスについて説明します。

9. JavaScript またはブラウザーに最も追加したい機能は何ですか?その理由は何ですか?

10. 関数型プログラミングと命令型プログラミングの違いは何ですか?あなたはどれが好きですか？

フロントエンドの面接でよくある 5 つの質問

質問 1: スコープ

次のコードを考えてみましょう:

(function() {
   var a = b = 5;
})();

console.log(b);

コンソールには何が出力されますか?

答え

上記のコードは 5 を出力します。

この問題のコツは、変数宣言が 2 つありますが、変数宣言はキーワード var を使用して宣言されていることです。関数のローカル変数であることを示します。対照的に、b はグローバル変数になります。

この質問のもう 1 つのトリックは、strict モード ('use strict';) を使用しないことです。厳密モードが有効な場合、コードは ReferenceError: b が定義されていません を発生させます。厳密モードでは、グローバル変数宣言を実装するために明示的な指定が必要であることに注意してください。たとえば、次のように書く必要があります:

(function() {
   'use strict';
   var a = window.b = 5;
})();

console.log(b);

質問 2: 「ネイティブ」メソッドを作成する

文字列オブジェクトのrepeatify関数を定義します。整数 n が渡されると、文字列を n 回繰り返した結果が返されます。例:

console.log('hello'.repeatify(3));

は hellohellohello を出力する必要があります。


答え

可能な実装は次のとおりです:

String.prototype.repeatify = String.prototype.repeatify || function(times) {
   var str = '';
   for (var i = 0; i < times; i++) {
      str += this;
   }
   return str;
};

現在の質問では、JavaScript の継承とプロトタイプに関する開発者の知識がテストされます。これにより、開発者が組み込みオブジェクトを拡張する方法を (拡張すべきではない場合でも) 知っていることも検証されます。

ここでもう 1 つ重要な点は、既に定義されている機能をオーバーライドしない方法を知っておく必要があるということです。関数定義が以前に存在しなかったことをテストします:

String.prototype.repeatify = String.prototype.repeatify || function(times) {/* code here */};

この手法は、優れた JavaScript 関数に互換性がある場合に特に役立ちます。

質問 3: ステートメントのホイスティング

このコードを実行すると、何が出力されますか?

function test() {
   console.log(a);
   console.log(foo());
   var a = 1;
   function foo() {
      return 2;
   }
}

test();

答え

このコードの結果は未定義で2です。

その理由は、変数と関数の宣言が前方に移動（関数の先頭に移動）されますが、変数には値が代入されていないためです。したがって、変数を出力するとき、変数は関数内に存在します (宣言されています) が、まだ未定義のままです。つまり、上記のコードは次と同等です:

function test() {
   var a;
   function foo() {
      return 2;
   }
 
   console.log(a);
   console.log(foo());
    
   a = 1;
}
 
test();

🎜質問 4: これは JavaScript ではどのように機能しますか🎜

下面的代码会输出什么结果？给出你的答案。 

var fullname = 'John Doe';
var obj = {
   fullname: 'Colin Ihrig',
   prop: {
      fullname: 'Aurelio De Rosa',
      getFullname: function() {
         return this.fullname;
      }
   }
};

console.log(obj.prop.getFullname());
 
var test = obj.prop.getFullname;
 
console.log(test());

回答 

答案是Aurelio De Rosa和John Doe。原因是，在一个函数中，this的行为，取决于JavaScript函数的调用方式和定义方式，而不仅仅是看它如何被定义的。 

在第一个 console.log()调用中，getFullname() 被调用作为obj.prop对象的函数。所以，上下文指的是后者，函数返回该对象的fullname。与此相反，当getFullname()被分配到test变量时，上下文指的是全局对象（window）。这是因为test是被隐式设置为全局对象的属性。出于这个原因，该函数返回window的fullname，即定义在第一行的那个值。 

问题5：call() 和 apply()

现在让你解决前一个问题，使最后的console.log() 打印 Aurelio De Rosa。 

回答 

该问题可以通过强制使用 call() 或者 apply() 改变函数上下文。在下面我将使用call()，但在这种情况下，apply()会输出相同的结果： 

console.log(test.call(obj.prop))