技術共有

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

フロントエンド JS のインタビューでよくある質問は、基本的な構文、データ構造とアルゴリズム、DOM 操作、非同期プログラミング、モジュール化、フレームワーク/ライブラリの使用法など、多くの側面をカバーしています。以下は、フロントエンド JS の面接でよく聞かれる質問とその簡単な分析です。

1. 基本的な文法

• データ型とストレージの違い :JavaScript にはどのようなデータ型がありますか?メモリへの保存方法の違いは何ですか? (プリミティブデータ型と参照データ型の違いなど)
• 変数宣言：var、let、const違いは何ですか?その範囲とライフサイクルは何ですか?
• オペレーター：i++そして++i違いは何ですか?breakそしてcontinueループ内で使用するとどのように異なりますか?

2. データ構造とアルゴリズム

• 配列演算 : 配列によく使用されるメソッドは何ですか? （のようにpush、pop、shift、unshift、splice、slice、join、sort待って）
• ディープコピーとシャローコピー :ディープコピーとシャローコピーとは何ですか?それらを実装するにはどうすればよいでしょうか? (使用する場合JSON.parse(JSON.stringify(obj))、スプレッド演算子、再帰などのメソッド）
• ソートアルゴリズム: ソートアルゴリズム (バブルソート、クイックソートなど) を理解して実装します。

3. DOM 操作

• 一般的な DOM 操作: DOM 要素の選択、追加、削除、変更、確認などの操作を実行するにはどうすればよいですか?
• innerHTML と innerText: 両者の違いと適用可能なシナリオは何ですか?
• イベント処理 :JavaScriptのイベントモデルとは何ですか?イベントプロキシを実装するにはどうすればよいですか?

4. 非同期プログラミング

• 約束 ：プロミスって何ですか？その 3 つの状態とは何ですか?使い方Promise.allそしてPromise.race？
• 非同期/待機 : async/await を使用して非同期操作を処理する方法は?プロミスとどう関係あるの？
• コールバック関数とイベントループ: JavaScript イベント ループのメカニズムとコールバック関数がどのように機能するかを理解していますか?

5. モジュール性

• ES6モジュラー: ES6 のモジュール構文を理解する (import/export）、その利点は何ですか？
• CommonJS と AMD/CMD: CommonJS、AMD、CMD モジュール仕様の違いと適用可能なシナリオを理解して比較します。

6. フレームワーク/ライブラリの使用方法

• リアクト/Vue/Angular: これらのフロントエンド フレームワーク/ライブラリの特性、利点、適用可能なシナリオを理解して比較します。
• ライフサイクル: React や Vue などのフレームワークのコンポーネントのライフサイクルは何ですか?
• ステータス管理: React で Redux や Vuex などの状態管理ツールを使用するにはどうすればよいですか?

7. その他の高周波の問題

• プロトタイプとプロトタイプ チェーン: JavaScript のプロトタイプとプロトタイプ チェーンのメカニズムとその機能を理解します。
• このキーワード: JavaScript を理解するthisさまざまなシナリオでのポインティング ルールとパフォーマンス。
• 閉鎖: クロージャの概念、機能、使用シナリオを理解します。
• ガベージコレクションの仕組み：JavaScriptにおけるガベージコレクションの仕組み（マークスイープ方式、参照カウント方式など）を理解する。

質問例と分析

質問例：JavaScriptにおけるプロトタイプチェーンの仕組みを説明してください。

解析する：

• プロトタイプ チェーンは、JavaScript で継承を実装するためのメカニズムです。
• すべてのオブジェクトには__proto__プロパティ (ES6 で推奨)Object.getPrototypeOf()メソッド)、このプロパティはそのコンストラクターのprototype属性。
• オブジェクトのプロパティまたはメソッドにアクセスするときに、そのプロパティまたはメソッドがオブジェクト自体に存在しない場合は、そのプロパティまたはメソッドが見つかるか、プロトタイプ チェーンの先頭に到達するまで、そのプロトタイプ チェーンに沿って検索されます (Object.prototype）。
• プロトタイプチェーンのトップはnull、これ以上探すべきプロトタイプ オブジェクトがないことを示します。
• プロトタイプ チェーンを通じて、オブジェクト間のプロパティの共有とメソッドの継承を実現できます。

1. JavaScript のデータ型は何ですか?それらの違いは何ですか?

答え：
JavaScript には、基本データ型 (プリミティブ型) と参照データ型 (参照型) を含む 8 つのデータ型があります。

• 基本的なデータ型：
  • 未定義: 未定義。変数が宣言されているが代入されていない場合の値。
  • ヌル: Null 値。空のオ​​ブジェクト参照を示します。
  • ブール: true と false の 2 つの値のみを持つブール型。
  • 番号: 整数と浮動小数点数を含む数値型。
  • 弦: テキスト データを表すために使用される文字列型。
  • シンボル: 一意の識別子の作成に使用される一意の値タイプ。
  • ビッグイント: 大きな整数型。任意精度の整数を表すために使用されます。
• 参照データ型：
  • 物体: オブジェクト型。配列 (Array)、関数 (Function)、日付 (Date) などを含む、JavaScript のすべての複雑なデータ型の基本クラスです。

プリミティブ データ型と参照データ型の主な違いは、その保存方法と割り当て方法です。基本データ型の値はスタック メモリに格納され、値は代入中に直接コピーされますが、参照データ型の値はヒープ メモリに格納され、スタック メモリは値への参照 (つまりアドレス) を格納します。割り当て時にコピーされるヒープメモリ内が参照されます。

2. JavaScript のスコープとクロージャについて話しますか?

答え：

• 範囲 : コード ブロック内の変数や関数などの識別子の有効な範囲を指します。 JavaScript には主に、グローバル スコープとローカル スコープ (関数スコープ、ブロックレベル スコープなどを含む) の 2 つのスコープがあります。グローバル スコープの変数はスクリプト全体で表示されますが、ローカル スコープの変数は、それが定義されているコード ブロック内でのみアクセスできます。

• 閉鎖 : 関数がその字句スコープ外で実行された場合でも、関数がその字句スコープを記憶し、アクセスできることを意味します。クロージャの主な用途は、プライベート変数のカプセル化、モジュールの作成などです。クロージャを使用すると、関数は関数の外部の変数にアクセスして操作できるようになり、これらの変数は関数の外部であっても簡単に汚染されたり変更されたりすることはありません。

3. JavaScript での非同期プログラミングと Promise について説明しますか?

答え：

• 非同期プログラミング : コードの実行順序は書き込み順序に基づいておらず、特定の条件 (ネットワーク リクエスト、ファイルの読み書きなど) の完了に基づいて決定されることを意味します。 JavaScript はシングルスレッドですが、イベント ループとコールバック関数を通じて非同期プログラミングを実装します。

• 約束 : は ES6 で導入された新しいオブジェクトで、非同期操作を処理するために使用されます。 Promise オブジェクトは、今は完了しないかもしれないが、将来完了する (または失敗する) 操作とその結果値を表します。 Promise には、保留中 (進行中)、履行済み (成功)、および拒否済み (失敗) の 3 つの状態があります。 Promise を使用すると、非同期コードを同期的な方法で作成できるため、コードがより簡潔になり、理解しやすく、保守しやすくなります。

4. JavaScript でのイベント バブリングとイベント キャプチャについて話しますか?

答え：

• イベントバブリング : イベントがターゲット要素から始まり、DOM ツリーの最上位 (つまり、ドキュメント オブジェクト) まで伝播することを意味します。イベントのバブリング プロセス中、任意のレベルの DOM 要素がイベントをキャプチャして処理できます。

• イベントキャプチャ : イベント バブリングとは対照的に、イベント キャプチャは DOM ツリーの最上位から開始され、ターゲット要素まで伝播します。イベント キャプチャ プロセス中、任意のレベルの DOM 要素がイベントをキャプチャして処理できます。

JavaScript では、addEventListener メソッドの 3 番目のパラメーターを通じてイベント処理メソッドを設定できます。つまり、イベント バブリングまたはイベント キャプチャを使用します。 3 番目のパラメータが true の場合は、イベント キャプチャを使用することを意味し、false または省略された場合は、イベント バブリングを使用することを意味します。

5. ES6+ にはどのような新機能が導入されていますか?

答え：
ES6 (ECMAScript 2015) 以降のバージョンには、次のような多くの新機能が導入されていますが、これらに限定されません。

• let と const: ブロックレベルのスコープのローカル変数と定数を宣言するために使用されます。
• アロー関数: 関数を記述するより簡潔な方法を提供し、独自の this や引数などをバインドしません。
• テンプレート文字列: 埋め込み式を許可し、複数行の文字列をサポートします。
• 代入の分割: 配列またはオブジェクトからデータを抽出し、宣言された変数に割り当てることができます。
• デフォルトのパラメータ値、残りのパラメータ、スプレッド演算子: 関数パラメータ処理機能が強化されました。
• Promise と async/await: 非同期操作を処理するために使用され、非同期コードがより簡潔で理解しやすくなります。
• クラスの構文: 従来のオブジェクト指向プログラミングに近いクラスに構文糖衣を提供します。
• モジュール: ES6 モジュール構文をサポートし、JavaScript でモジュール式プログラミングを実装します。