知っておくべきJavaScript面接の重要な質問

数多くの JavaScript 面接を乗り越えてきた私は、私のスキルと核となる概念の理解をテストする重要な質問のリストをまとめました。シリーズの最初の部分では、基本的なことから面接の重要なトピックまで、私が個人的に直面した 40 の質問を紹介します。

これらの質問は単なる理論的なものではありません。実践的な知識と問題解決能力を実証することが求められます。フロントエンドまたはフルスタックの役割の準備をしている場合でも、これらの質問はスキルを磨くのに役立ちます。

チャロシュルカルテハイ!

1. javaScipt は動的型言語ですか、それとも変数型言語ですか?

答え: JavaScript は動的に型指定される言語です。つまり、変数の型はコンパイル時に設定されるのではなく、実行時で変更できます。

2. http リクエストをバックエンドに送信するにはどうすればよいですか?

答え: Fetch API、Axios、XMLHttpRequest

3.実行コンテキストとは?

答え: JavaScript では、実行コンテキストはコードが実行される環境であり、どの変数、オブジェクト、関数が使用できるかを決定します。関数が実行されるたびに、その関数専用の新しい実行コンテキストが作成され、独自の変数とスコープが保持されます。

各実行コンテキストには 2 つの主なフェーズがあります:

1. メモリ作成フェーズ: JavaScript は最初にコードをスキャンし、変数と関数にメモリを割り当てます。
2. 実行フェーズ: コードは行ごとに実行されます。

4.語彙環境とは何ですか?

答え: JavaScript の字句環境は、現在のスコープで定義された変数と関数、およびすべての外側スコープへの参照を保存するデータ構造です。これは、語彙スコープとしても知られています。

5. null と未定義の違いは何ですか?

答え: null: 変数がオブジェクトを指さず、特定の値がないことを示す代入値。

未定義: 変数は宣言されているが値が割り当てられていないことを意味し、変数自体に値が欠落していることを示します。

null の型はオブジェクトです。
未定義のタイプは未定義です。

6. JavaScript はメモリをどのように処理しますか?

回答: JavaScript は主に自動ガベージ コレクションを通じてメモリを管理します。つまり、コードの実行中に自動的にメモリの割り当てと解放が行われます。

7.イベントループについて説明しますか?

答え: JavaScript はシングルスレッド言語です。つまり、単一の呼び出しスタック内で一度に 1 つのタスクしか実行できません。ただし、このシングルスレッドの性質にもかかわらず、JavaScript はイベント ループのおかげで非同期のノンブロッキング操作を実行できます。

イベント ループは、非同期操作を処理する JavaScript の基本的なメカニズムです。 HTTP リクエストや DOM イベントなどのタスクが開始されると、ブラウザ API に渡されます。

イベント ループはコール スタックとタスクを継続的に監視します
行列。コールスタックが空の場合、イベントループは最初に
をチェックします。 保留中のタスクをマイクロタスクキューに入れて実行します。

マイクロタスク キューが空になると、イベント ループはマクロタスク キューをチェックし、そこからタスクを実行のためにコール スタックに移動します。このプロセスにより、優先度の高いタスク (マイクロタスク) が優先度の低いタスク (マクロタスク) よりも前に実行されます。

8.ホイスティングと時間的デッドゾーン?

回答: ホイスティングは、変数や関数を宣言する前に使用できるようにする JavaScript の機能です。これは、変数や関数をコード内で定義する前に使用できることを意味します。ホイスティングは JavaScript エンジンによって実行され、変数と関数の宣言が 「スコープ」 の先頭に移動されます。

JavaScript では、コードを実行する前に、JavaScript エンジンがホイスティングと呼ばれるメモリ準備フェーズを実行します。このフェーズ中に、エンジンは変数と関数にメモリを割り当てます。

関数宣言は完全にホイストされており、実際の宣言行の前であっても、スコープ内のどこからでも呼び出すことができます。

var で宣言された変数はホイストされ、undefine で初期化されます。つまり、宣言前に var 変数にアクセスできますが、その値は未定義になります。

一方: let と const で宣言された変数もホイストされますが、初期化されないままになります。コード内で宣言する前にこれらにアクセスすると、ReferenceError が発生します。

時間的デッドゾーン:

ブロックの開始から let または const 変数の実際の宣言までのこの期間は、Temporal Dead Zone (TDZ) と呼ばれます。 TDZ は、ブロックの先頭から変数が宣言され初期化される行まで存在します。

時間的デッド ゾーンは、let 宣言と const 宣言に関連する JS の概念です。 let または const 宣言を持つ変数はスコープの先頭にホイストされますが、コード内ですぐに使用できるわけではありません。これは、変数を宣言する前でも変数を使用できますが、値が割り当てられるまで変数の値は未定義であることを意味します。

9.スコープとスコープチェーン?

答え: スコープは、コードのさまざまな部分での変数のアクセス可能性を制御します。変数にアクセスできる場所と
を決定します。 それができない場所。

スコープには 3 種類あります:

グローバル スコープ: グローバル スコープで宣言された変数は
にすることができます。 コード内のどこからでもアクセスできます。
ローカルスコープ: 関数内で宣言された変数は
のみです その関数内でアクセス可能です。
ブロックスコープ: ブロック内で宣言された変数 (curly
内など) 中括弧 {}) はそのブロック内でのみアクセスできます。

スコープチェーン:

スコープチェーンとは参照のチェーンを意味します。 JavaScript は諦めません。変数の探索メカニズムがあります。変数を検索し続けます。まず、ローカル スコープをチェックインして、変数にアクセスできるかどうかを確認します。そうでない場合は、外側のスコープ内を調べます。グローバル スコープまたはグローバル実行コンテキストに到達するまで続行されます。このチェーン中の変数の継続的な探索は、スコープ チェーンと呼ばれます。実行コンテキストは常に内部スコープから外部スコープへ検索しますが、外部スコープから内部スコープへ移動することはできません。

10.プロトタイプの継承?

回答: 親クラスのプロパティを共有および利用するために、親オブジェクトのプロトタイプを子オブジェクトにリンクします。これは、プロパティとメソッドをプロトタイプを通じてあるオブジェクトから別のオブジェクトに転送できることを意味します。

たとえば、.join や .length などのメソッドはプロトタイプ継承の一部です。これらのプロパティは JavaScript のメイン Object クラスから取得され、オブジェクト内で使用できるためです。

JavaScript ではすべてがオブジェクトであるため、オブジェクトはプロパティを共有できます。これは、配列ではオブジェクトのメソッドを使用でき、文字列でも同様のことができることを意味します。

let faang = {
    name: "google",
    salary: function(){
        console.log("100K Salary")
    }
}

let engineer = {
    employeeId: 1278,
    role: function(){
        console.log("Frontend Developer")
    }
}

古い方法:

engineer.__proto__ = faang;

新しい方法:

let engineer = Object.create(faang, {
    role: function(){
        console.log("Backend Developer")
    }
})

Object.setPrototypeOf(engineer, faang);

// let res = Object.getPrototypeOf(faang);

11. JavaScript で Promise を説明しますか?

答え: Promise は、JavaScript で非同期操作を処理する方法です。これらを使用すると、メインスレッドをブロックせずに、非同期で実行できるコードを作成できます。 Promise は Promise コンストラクターを使用して作成され、then メソッドを使用して連結できます。

JavaScript の Promise は、将来解決または拒否できるプレースホルダーとして機能します。

Promise には、保留中、履行済み、拒否という 3 つの状態があります。 Promise が保留中である場合、それは非同期操作がまだ進行中であることを意味します。 Promise が履行されると、非同期操作が正常に完了したことを意味します。 Promise が拒否された場合、非同期操作が失敗したことを意味します。

約束の処理

Promise は、非同期操作の結果を処理するメソッドを提供します。

.then(): 満たされた状態を処理し、解決された
を取得するために使用されます。 値。
.catch(): 拒否された状態を処理し、エラーをキャッチするために使用されます
実行中に発生したものです。
.finally(): このメソッドは、Promise が
の場合にコールバックを実行します。 解決済み、つまり、約束が果たされるか
されるかに関係なく実行されます。 拒否されました。

12.非同期待機について説明します?

回答: Async/await は、より同期的な方法で非同期コードを作成できるようにする JavaScript の構文機能です。 async キーワードと await キーワードを使用して非同期関数を定義します

JavaScript の非同期関数は Promise を返します。 await キーワードは、待機中の Promise が解決されるまで、非同期関数の実行を一時停止します。 await の後、非同期関数の残りがマイクロタスク キューに入れられます。これにより、非同期コードがより読みやすく管理しやすくなります。

let faang = {
    name: "google",
    salary: function(){
        console.log("100K Salary")
    }
}

13.このキーワードについて説明してください?

答え: 「this」キーワードは、現在関数を実行しているオブジェクトを指します。その値は、関数が呼び出されるコンテキストによって異なります。グローバル コンテキスト (ブラウザーなど) では、これはウィンドウ オブジェクト

を指します。

14.クロージャと語彙範囲について説明しますか?

答え: クロージャは、外部関数の実行が終了した後でも、外部スコープから変数にアクセスできる関数です。

JavaScript でのクロージャの例を次に示します:

let engineer = {
    employeeId: 1278,
    role: function(){
        console.log("Frontend Developer")
    }
}

この例では、outerFunction 関数は変数 externalVariable と、outerVariable にアクセスできる関数 innerFunction を定義します。 innerFunction は、outerFunction 関数を返します。これにより、後でこの関数を呼び出すことができます。

クロージャの DOM 関連の例の 1 つは、addEventListener メソッドです。 addEventListener メソッドを使用すると、DOM 内の要素にイベント リスナーをアタッチできます。イベント リスナー関数は、要素が DOM から削除された後でも、要素のプロパティとメソッドにアクセスできます。

クロージャで addEventListener メソッドを使用する例を次に示します。

engineer.__proto__ = faang;

この例では、handleClick 関数が addEventListener メソッド内で定義されています。 handleClick 関数は、ボタン要素が DOM から削除された後でも、ボタン要素にアクセスできます。

字句範囲:

JavaScript における字句スコープは、変数の宣言に基づいて変数のスコープを決定する概念です。これは、変数のスコープが
のコード ブロックによって決定されることを意味します。 これは、それが使用されているコードのブロックによってではなく、宣言されます。

15. JavaScript はシングルスレッドですか、それともマルチスレッドですか?

答え: JavaScript はシングルスレッド言語です。つまり、1 つの呼び出しスタックと 1 つのメモリ ヒープがあります。コードを順番に実行し、1 つのコードを完了してから次のコードに進みます。この構造により、JavaScript はメインスレッドをブロックせずに非同期操作を処理できます。

非同期動作により、setTimeout、AJAX、Promise などの機能を使用できるようになります。これらの関数は JavaScript 自体ではなくブラウザーによって管理されます。これにより、これらの操作が完了するまでメイン スレッドが他のコードを自由に実行できるようになります。

16. JavaScript エンジンの仕組みを説明してください?

答え: JavaScript エンジンは、JavaScript コードを実行するプログラムです。これらは、JavaScript をホストする Web ブラウザーやその他の環境にあります。最も人気のある JavaScript エンジンは、Google の V8、SpiderMonkey、および JavaScriptCore です。これらのエンジンは C で書かれており、JavaScript コードの実行に使用されます。

17. var、let、const の違いは?

答え:

-var: キーワード「var」で定義された変数のスコープは、その変数が定義されている「関数」に限定されます。関数の外で定義されている場合、変数のスコープはグローバルです。 var のデフォルト値は未定義です。

• let: キーワード「let」または「const」で定義された変数のスコープは、中かっこ ({}) で定義された「ブロック」に制限されます。 let のデフォルト値は初期化されていません。
• const: キーワード「const」で定義された変数のスコープは、中括弧で定義されたブロックに制限されます。ただし、変数がキーワード const で定義されている場合、再代入することはできません。 const のデフォルト値は初期化されていません。

18. JavaScript のさまざまなデータ型?

答え: JavaScript には主に 2 つのタイプのデータ型があります: プリミティブ データ型とオブジェクト (参照) データ型です。

プリミティブ データ型は、JavaScript の基本的なデータ型です。これらには、数値、文字列、ブール値、null、および未定義が含まれます。シンボルは、一意の識別子を表すプリミティブ データ型でもあります。

オブジェクト データ型は、他のデータ型を含むデータ型です。これらは、オブジェクト リテラルまたはコンストラクター関数を使用して作成されます。オブジェクト、配列、関数はオブジェクト データ型の例です。

19.コールバックについて話し合いますか?

回答: コールバック関数は、他の関数に引数として渡され、特定のイベントが発生したときに呼び出される関数です。これらは、HTTP リクエストの作成やファイルからの読み取りなどの非同期操作を処理するために JavaScript で一般的に使用されます。

20.コールバック地獄について話し合いますか?

回答: コールバック地獄は、関数が相互にネストされ、コードが読みにくく、理解しにくくなる JavaScript の問題です。これにより、コールバックが複数回呼び出されたり、まったく呼び出されなくなったりして、予期しない動作が発生する可能性があります。

これはコールバック地獄の例です:

let faang = {
    name: "google",
    salary: function(){
        console.log("100K Salary")
    }
}

21. JavaScriptでオブジェクトを作成するには?

答え: オブジェクトは JavaScript の基本的なデータ型です。これらは、オブジェクト リテラルまたはコンストラクター関数を使用して作成できます。

オブジェクト リテラルは中括弧 {} で囲まれており、キーと値のペアを持つオブジェクトを作成するために使用されます。以下はオブジェクト リテラルの例です:

let engineer = {
    employeeId: 1278,
    role: function(){
        console.log("Frontend Developer")
    }
}

コンストラクター関数は、カスタム プロパティとメソッドを持つオブジェクトを作成するために使用されます。

engineer.__proto__ = faang;

Object.create() メソッドを使用するなど、オブジェクトを作成する他の方法もありますが、JavaScript でオブジェクトを作成する最も一般的な方法は、オブジェクト リテラルとコンストラクター関数です。

22. JavaScript でオブジェクトのクローンを作成するには?

答え:

1. Object.assign() の使用:

let engineer = Object.create(faang, {
    role: function(){
        console.log("Backend Developer")
    }
})

Object.setPrototypeOf(engineer, faang);

// let res = Object.getPrototypeOf(faang);

1. スプレッド演算子の使用:

async function fetchData() {
  try {
    const response = await fetch('https://api.freeapi.app/v1/jokes/random');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchData()
  .then(() => console.log('Data fetched'))
  .catch(error => console.error(error));

23. JavaScript の休符演算子とスプレッド演算子とは何ですか?

答え: レスト演算子とスプレッド演算子は、より簡潔で読みやすい方法で配列とオブジェクトを操作できるようにする JavaScript の 2 つの重要な機能です。

残り演算子を使用すると、配列またはオブジェクトを引数として受け取り、それを関数呼び出しで使用できます。

スプレッド演算子を使用すると、配列またはオブジェクトを個々の要素に展開できます。

function outerFunction() {
  const outerVariable = 'I am an outer variable';

  function innerFunction() {
    console.log(outerVariable); // Output: I am an outer variable
  }

  return innerFunction;
}

const closure = outerFunction();
closure(); // Output: I am an outer variable

この例では、sum 関数は、rest 演算子を使用して数値の配列を引数として受け取ります。
スプレッド演算子は、配列を個々の要素に展開するために使用され、その後、reduce 関数に渡されます。

24． JavaScriptの高階関数とは何ですか?

答え: 高階関数とは、他の関数を引数として受け取るか、結果として関数を返す関数です。これらは、より柔軟で再利用可能なコードを作成できる JavaScript の強力なツールです。

const button = document.getElementById('myButton');

function handleClick() {
  console.log('Button clicked');
}

button.addEventListener('click', handleClick);

25. ES6 のいくつかの機能に JavaScript で名前を付けます。

答え: ES6 の主な機能の一部を次に示します:

• アロー関数: アロー関数は、関数を記述するためのより簡潔な構文を提供します。これらは => を使用して定義されます。演算子。
• テンプレート リテラル: テンプレート リテラルを使用すると、文字列内に式を埋め込むことができます。これらはバッククォート (`) で囲まれており、複数行の文字列の作成に使用できます。
• 代入の構造化: 代入の構造化を使用すると、配列またはオブジェクトから値を抽出して変数に割り当てることができます。これは = 演算子を使用して行われます。
• スプレッド演算子: スプレッド演算子を使用すると、配列またはオブジェクトを個々の要素に展開できます。複数の引数を関数に渡すために使用されます。
• クラス: クラスは、プロパティとメソッドを使用してオブジェクトを定義する方法を提供します。これらは class キーワードを使用して定義されます。
• モジュール: モジュールを使用すると、コードを個別のファイルに分割し、それらの間で機能をインポート/エクスポートできます。これらは、import キーワードとexport キーワードを使用して定義されます。
• Promises: Promise は、JavaScript で非同期操作を処理する方法を提供します。これらは、非同期操作の最終的な完了または失敗を表すために使用されます。
• ジェネレーター: ジェネレーターを使用すると、一時停止および再開できる関数を定義できます。これらは function キーワードを使用して定義されます。
• マップとセット: マップとセットは、キーと値のペアを保存できるデータ構造です。これらは、Map コンストラクターと Set コンストラクターを使用して定義されます。

これらの質問が重要な理由

これらの質問は、私がインタビュー中に遭遇した中心的な概念を反映しています。これらは、現実世界のシナリオで JavaScript の理解をテストするように設計されています。

JavaScript の面接の準備をしていますか?これらの質問をもう一度考えて、答えを練習してください。より詳細な学習体験が必要な場合は、quicknxt.com の私のコースをチェックして、実践的な知識を獲得し、コーディング スキルを向上させてください。これからも一緒に学びましょう!

以上が知っておくべきJavaScript面接の重要な質問の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。