必見の JavaScript 面接質問 10 選のまとめ (おすすめ)

1.これは

1. 誰が誰に電話をかけますか?

例：

  関数foo(){
        console.log("これ",これ);
      }
      新しい foo();

2. ウィンドウをグローバルにポイントする

例：

 関数foo(){
        console.log("これ",これ);
 }
 関数 foo();

3. コンストラクタのthisはコンストラクタインスタンスを指します

4.call/apply/bindはthisポインタの変更を強制する

5. 矢印関数のthisは常に親コンテキストを指す

2. イベントモデル: イベント委任、プロキシ?最初にイベントをバブルさせてからキャプチャする方法

イベント委任: イベントプロキシとも呼ばれます。イベント委任では、イベントバブリングを使用して、すべての子要素イベントを親要素にバインドします。子要素がイベントのバブルを妨げる場合、委任は実現できません。

3つのパラメータ：イベント名、イベントメソッド、キャプチャするかバブルするか

最初にバブル、後でキャプチャ

2 つの addEventListeners を要素にバインドし、一方の 3 番目のパラメータを false (つまり、バブリング) に設定し、もう一方の 3 番目のパラメータを true (つまり、キャプチャ) に設定します。コードの順序を調整し、false に設定されたリスニングイベントを true に設定されたリスニングイベントの前に配置します。

3. オブジェクトとオブジェクト指向

オブジェクトは、異なるデータ型の複数の属性を格納できる複合データ型です。

オブジェクト指向はプログラミング概念（すべてがオブジェクトである）であり、プロセス指向（クラス：クラス継承（サブクラスは親クラスのメソッドとプロパティを継承する）、カプセル化（コアは低結合と高凝集）、ポリモーフィズム（オーバーロードと書き換え））に対応します。js はオブジェクト指向言語です。

* js 自体はオブジェクト指向プログラミングに基づいて構築されています (例: JS には、Array、Object、Function、String などの多くの組み込みクラスがあります。Promise は ES6 で追加された新しい組み込みクラスであり、新しい Promise に基づいてインスタンスを作成して異種プログラミングを管理できます)。

※一般的に、私たちが普段使っているVUE/REACT/JQUERYもオブジェクト指向に基づいて構築されています。それらはすべてクラスであり、通常の開発では操作のためにインスタンスが作成されます。

4. for···in と for···of の違い

1. オブジェクトのプロパティをループする場合は for...in を使用し、配列を走査する場合は for...of を使用することをお勧めします。

2. for...in はキーをループし、for...of は値をループします。

3. for...of は通常のオブジェクトをループすることができないため、Object.keys() を使用する必要がある

5. 配列内の重複を見つける

要素の最初と最後の出現のインデックスが同じかどうかを確認し、要素が新しい配列に存在しないかどうかを判断します。両方の条件が満たされている場合は、新しい配列に追加します。

ES6セット

ES6のsetを使うのが重複を削除する最も簡単な方法です

var arr = [1,1,'true','true',true,true,15,15,false,false,未定義,
未定義、null、null、NaN、NaN、'NaN'、0、0、'a'、'a'、{}、{}];
 
関数 arr_unique1(arr){
[...新しいSet(arr)]を返します。
//または //Array.from(new Set(arr)); を返します。
}
arr_unique1(arr); // (13)[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]

マップデータ構造を使用して重複を削除する

関数 arr_unique2(arr) {
  map = new Map();
  let array = new Array(); // 配列は結果を返すために使用されます for (let i = 0; i < arr.length; i++) {
    if(map .has(arr[i])) { // キー値がある場合 map .set(arr[i], true);
    } それ以外 {
      map .set(arr[i], false); // キー値が存在しない場合は array .push(arr[i]);
    }
  }
  配列を返します。
}

 console.log(arr_unique2(arr)); //(13) [1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, 未定義]

再帰的重複排除の使用

関数 arr_unique3(arr) {
     var 配列 = arr;
     var len = 配列の長さ;
     array.sort(function(a,b){ // ソート後に重複を削除する方が簡単です return a - b;
    })
    
 関数 loop(インデックス){
        if(インデックス >= 1){
            if(配列[インデックス] === 配列[インデックス-1]){
                配列.splice(インデックス,1);
            }
            loop(index - 1); // 再帰ループ、その後配列の重複排除}
    }
    ループ(長さ-1);
    配列を返します。
}
 
console.log(arr_unique3(arr)); //(14) [1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, 未定義]

forEach + インデックス

フィルター+インデックス

forEach + 含む

6. 配列の平坦化

配列の平坦化とは、多次元配列を 1 次元配列に変換することです。

1. 配列の各項目を走査します。

2. 項目が配列かどうかを判断します。

3. 項目が配列でない場合は、新しい配列に直接配置します。

4. 配列の場合は 1 に戻り、反復処理を続けます。

5. 配列の走査が完了したら、新しい配列を返します。

7. iframe の利点と欠点は何ですか?

アドバンテージ：

①iframeは埋め込まれたウェブページをそのまま表示できます。

②複数のウェブページがiframeを参照している場合、iframeの内容を変更するだけで、呼び出される各ページのコンテンツを変更できるので、便利で迅速です。

③Webページのスタイル、ヘッダー、バージョンが同じ場合は、1ページとして記述し、iframeでネストすることでコードの再利用性を高めることができます。

④アイコンや広告などのサードパーティコンテンツの読み込みが遅い問題は、iframe によって解決できます。

欠点:

① 管理が難しいページが多数生成されます。

②iframe 構造はわかりにくい場合があります。フレームの数が多いと、上下左右のスクロールバーが表示され、訪問者の注意をそらし、ユーザーエクスペリエンスが低下します。

③コードが複雑で、一部の検索エンジンではインデックスできません。これは非常に重大です。現在の検索エンジンのクローラーは iframe 内のコンテンツをうまく処理できないため、iframe を使用すると検索エンジンの最適化に悪影響を及ぼします。

④機器の互換性が悪い。

⑤iframe フレームページはサーバーの http リクエストを増加させるため、大規模な Web サイトにはお勧めできません。

8. 関数カリー化

複数の引数を受け入れる関数を、単一の引数 (元の関数の最初の引数) を受け入れ、残りの引数を受け入れて結果を返す新しい関数に変換する手法。

呼び出す関数にパラメータの一部だけを渡し、残りのパラメータを処理する新しい関数を返すことです（クロージャ）

9. ガベージコレクションの仕組み

ブラウザの Javascript には自動ガベージコレクションメカニズム (GC: Garbage Collecation) があり、コード実行中に使用されるメモリの管理は実行環境が担当します。原則としては、ガベージコレクターは、使用されなくなった変数を定期的に (定期的に) 見つけて、そのメモリを解放します。ただし、このプロセスは非常にコストがかかり、GC が他の操作に応答しなくなるため、リアルタイムではありません。そのため、ガベージコレクターは、一定の時間間隔で定期的にこのプロセスを実行します。

10.ウィンドウのonloadイベントとdomcontentloaded

ウィンドウの読み込み:

onload イベントは、リソースとその依存リソースの読み込みが完了したときに発生します。

ドキュメント.onDOMContentLoaded:

DOMContentLoaded イベントは、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに、最初の HTML ドキュメントが完全に読み込まれて解析されたときに発生します。

違い：

①onloadイベントはDOMイベント、onDOMContentLoadedはHTML5イベントです。

②onload イベントはスタイルシート、画像、サブフレームによってブロックされますが、onDOMContentLoaded はブロックされません。

③読み込まれたスクリプトコンテンツに即時の DOM 操作が含まれていない場合は、onload イベントよりも先に実行される onDOMContentLoaded イベントを使用する方が適切です。

要約する

これで、JavaScript 面接で必ず読むべき 10 の質問に関するこの記事は終了です。JavaScript 面接でもっと関連性の高い質問については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: