day03 面接での質問

面接の質問

1.DOM での一般的な操作は何ですか?
2. BOM についてのあなたの理解を教えてください。どのような一般的な BOM オブジェクトを知っていますか?
3.JavaScriptをローカルに保存する方法は何ですか? 違いと適用シナリオは?
4. 手ぶれ補正とスロットルとは何ですか? 違いは何ですか? どのように達成するか?
5. JSを介して配列を決定する方法
6. スコープチェーンについてのあなたの理解について教えてください

1.DOM での一般的な操作は何ですか?

DOM (Document Object Model) は、Web ドキュメントをブラウザーのツリー構造で表現する API を指します。一般的な DOM 操作には次のものがあります。

要素の取得: タグ名、クラス名、ID、およびその他の属性 ( getElementById、getElementsByClassName、getElementsByTagNameその他のメソッドなど) を通じて DOM 要素を取得します。
要素コンテンツの変更:textContentまたはinnerText属性を使用して要素のテキストコンテンツを変更し、innerHTML属性を使用して要素の HTML コンテンツを設定できます。
要素の属性を変更する: setAttributeset などの要素の属性値やその他の属性を設定するメソッドをsrc使用hrefします。
要素の追加と削除:createElementメソッドを使用して新しい要素ノードを作成し、appendChildを使用して DOM ツリーに追加し、を使用してremoveChild指定した要素ノードを削除します。
スタイルの変更: 属性を使用して、 settingsなどstyleの要素の CSS スタイルを変更できます。backgroundColorfontSize
イベントのリッスン:addEventListenerクリック、マウスの出入り、その他のイベントなどのユーザー操作に応答するメソッドを介して要素にイベントリスナーを追加します。
子要素を走査する:ノードのchildNodesプロパティにアクセスするかメソッドを使用して、querySelectorAll要素の子ノードを走査して取得します。
親要素を検索する:parentNode属性を使用して親ノードを取得し、さらに上に進んで祖先ノードを見つけることができます。
要素のクラス名を変更する:属性と関連メソッド ( 、、classListなど) を使用して要素のクラス名を変更し、スタイルを切り替えます。addremovetoggle
要素の位置とサイズを取得および変更します。やなどの属性を使用して、親要素に対する相対的な要素のオフセットを取得し、要素のスクロールオフセット値offsetLeftを取得し、次のような属性を通じて要素のサイズ情報を取得します。そして。offsetTopscrollLeftscrollTopoffsetWidthoffsetHeight

上記は、DOM 操作における一般的な方法とテクニックです。これらの操作を使用すると、Web ページ内の要素を動的に変更、追加、削除して、豊かなインタラクティブな効果と動的なコンテンツ表示を実現できます。

2. BOM についてのあなたの理解を教えてください。どのような一般的な BOM オブジェクトを知っていますか?

BOM (Browser Object Model) は、ブラウザのウィンドウやブラウザの機能を操作するためにブラウザが提供する JavaScript API です。BOM オブジェクトは、JavaScript で直接アクセスして操作できるブラウザ関連のオブジェクトを指します。

一般的な BOM オブジェクトには次のものがあります。

Window オブジェクト: ブラウザーウィンドウまたはタブを表し、BOM の最上位オブジェクトです。新しいページの読み込み、ウィンドウの開閉などのメソッドや、タイマーやダイアログボックスなどのブラウザ関連機能など、ブラウザウィンドウへの制御とアクセスを提供します。
Navigator オブジェクト: ブラウザ名、バージョン、言語など、ブラウザに関する情報を提供します。このオブジェクトを使用して、ユーザーが使用しているブラウザの種類とバージョンを検出できます。
Location オブジェクト: 現在のページの URL 情報を表します。このオブジェクトを使用すると、ブラウザのアドレスバーの URL を取得または変更したり、別の URL に移動したり、URL のさまざまな部分を解析したりできます。
History オブジェクト: ブラウザの履歴を表します。このオブジェクトを使用すると、前に進んだり、後戻りしたり、特定の履歴レコードにジャンプしたりできます。
画面オブジェクト: 画面の幅、高さ、ピクセル密度など、ユーザーの画面に関する情報を提供します。
Document オブジェクト: Document オブジェクトは BOM オブジェクトではなく DOM オブジェクトに属しますが、通常は BOM の一部とみなされます。これは現在のドキュメントを表し、要素の選択、要素コンテンツの変更、新しい要素の作成などのメソッドを含むページコンテンツへのアクセスと操作を提供します。
Cookie オブジェクト: ブラウザーの Cookie を処理するために使用され、Cookie を設定、取得、削除できます。
XMLHttpRequest オブジェクト: HTTP リクエストの開始、サーバーとのデータ通信、および非同期通信の実現に使用され、AJAX 開発でよく使用されます。

BOM (ブラウザオブジェクトモデル) は、ブラウザ環境でブラウザウィンドウと対話するために使用されるオブジェクトとメソッドのセットを指します。BOM は、ブラウザウィンドウとページコンテンツにアクセスして操作する機能を提供します。一般的な BOM オブジェクトには次のものがあります。

window オブジェクト: ブラウザーウィンドウ全体を表し、BOM の最上位オブジェクトです。新しいウィンドウを開く、ウィンドウを閉じる、タイマーなど、多くのプロパティとメソッドが含まれています。window オブジェクトはグローバルオブジェクトであり、そのプロパティとメソッドを直接使用できます。
document オブジェクト: 現在ロードされている Web ページドキュメントを表し、Web ページコンテンツにアクセスして操作するためのメソッドとプロパティを提供します。たとえば、ドキュメントオブジェクトを通じて、ページ要素の取得、要素コンテンツの変更、新しいノードの作成、その他の操作を行うことができます。
navigator オブジェクト: ブラウザ名、バージョン、ユーザーエージェントなど、ブラウザに関する情報を提供します。ナビゲータオブジェクトを使用すると、互換性コードを作成するためにブラウザの種類、機能、サポートされる機能を決定できます。
location オブジェクト: ブラウザーのアドレスバーの URL にアクセスして操作するためのメソッドとプロパティを提供します。現在のページの URL 情報は location オブジェクトを通じて取得でき、URL を変更してページのジャンプや更新を実現することもできます。
履歴オブジェクト: ブラウザの履歴を管理するために使用されます。進む、戻る、指定したページにジャンプするなどの操作は、履歴オブジェクトを通じて実装できます。
screen オブジェクト: 画面の幅、高さ、色深度など、ユーザーの画面に関する情報を提供します。画面オブジェクトを使用すると、ユーザーの画面の特性に合わせてページのレイアウトや表示を調整できます。

これらは、開発者がブラウザ内でウィンドウ、ドキュメント、アドレスバー、およびブラウザ自体に関する一部の情報を取得および操作して、豊富な対話とカスタマイズされた機能を実現できる共通の BOM オブジェクトです。

3.JavaScriptをローカルに保存する方法は何ですか? 違いと適用シナリオは?

JavaScript は、次のようなさまざまなローカルストレージメソッドを提供します。

Cookie (Cookie): 導入された最も初期のローカルストレージメカニズムであり、ブラウザとサーバー間でデータを転送し、キーと値のペアの形式でクライアントに保存できます。Cookie は容量が小さい (通常は 4KB 以下) という特徴があり、各ドメイン名の Cookie はリクエストとともに自動的にサーバーに送信され、有効期限を設定できます。
Web ストレージ (Web ストレージ): localStorage と sessionStorage で構成され、より大きなストレージスペース (通常は最大 5MB 以上) を提供します。
- localStorage: ブラウザを閉じた後も持続し、同じドメイン名で共有される永続的なローカルストレージを提供します。
- sessionStorage: もローカルストレージメソッドですが、データは現在のセッション (ウィンドウまたはタブ) でのみ有効であり、セッションを閉じるとデータは消去されます。
IndexedDB (インデックス付きデータベース): 大量の構造化データの保存を可能にし、インデックスとトランザクションをサポートする組み込みの非リレーショナルデータベースです。IndexedDB は非同期で動作するため、これを使用するには複雑な非同期コードを記述する必要があります。
WebSQL (Web SQL データベース): 非推奨となり、推奨されなくなりました。これは SQLite データベースに基づくリレーショナルデータベースであり、データ操作に SQL に似たクエリ言語を提供します。

これらのローカルストレージ方法は、アプリケーションシナリオと特性が異なります。

Cookie はクライアントとサーバー間でデータを転送し、ある程度のセキュリティを備えていますが、容量が小さいため、少量のユーザー識別情報やセッション状態を保存するのに適しています。
Web Storage は大容量のストレージ容量を提供し、大量のデータを保存できるため、ユーザー設定やローカルキャッシュデータなどの保存に適しています。
IndexedDB は、大量のデータのオフラインデータ同期、追加、削除、変更、クエリなど、複雑な構造化データの処理に適した強力なデータベースシステムです。
WebSQL は、廃止される前は、いくつかの単純なリレーショナルデータストレージおよびクエリシナリオに適していましたが、現在は推奨されません。

特定のニーズとデータサイズに応じて、適切なローカルストレージ方法を選択すると、ユーザーエクスペリエンスとデータ管理が向上します。

4. 手ぶれ補正とスロットルとは何ですか? 違いは何ですか? どのように達成するか?

デバウンスとスロットルは、イベントトリガーの頻度を制御し、パフォーマンスとユーザーエクスペリエンスを向上させるためによく使用される 2 つの最適化テクノロジです。

デバウンス:
- 手ぶれ補正の原理は、イベントが連続してトリガーされた場合、一定期間内に最後にトリガーされた操作のみを実行することです。
- イベント発生後、一定の遅延時間待機し、遅延時間内に再度イベントが発生すると時間をリセットし、遅延時間待機後に動作を実行します。
- 主に、重複送信を防止する必要があるシナリオやリアルタイム検索などで使用されます。
スロットル：
- スロットリングの原理は、特定の時間間隔内で操作を 1 回だけ実行することです。
- イベントがトリガーされるとすぐに操作が実行され、一定の時間間隔が設定されます。この間隔内にイベントが複数回トリガーされた場合、最初の操作のみが実行され、それ以降のトリガーは無視されます。
- 主に、ローリングロード、ウィンドウ調整、ボタンクリックなど、関数呼び出しの頻度を制限する必要があるシナリオで使用されます。

違い：

安定化とスロットルの主な違いは、操作を実行するタイミングと頻度です。アンチシェイクは、イベントがトリガーされた後、最後の操作が実行されるまで待機することです。スロットリングは、一定の時間間隔内に操作を実行することです。
アンチシェイクは、短期間に頻繁にトリガーされるイベントの処理に適しており、スロットリングは、頻繁にトリガーされるが頻度を制御する必要があるイベントの処理に適しています。

実現方法：

アンチシェイクでは、タイマーを設定することで操作の実行を遅らせ、各トリガーイベントの前に前のタイマーをクリアして、操作が最後のトリガーの後でのみ実行されるようにすることができます。
スロットリングでは、最後の操作のタイムスタンプを記録し、イベントがトリガーされるたびに、最後の操作からの時間が設定された時間間隔を超えているかどうかを判断できます。超えている場合は、操作を実行してタイムスタンプを更新します。

サンプルコード (JavaScript):

// 防抖
function debounce(func, delay) {
    
    
  let timer;
  return function (...args) {
    
    
    clearTimeout(timer);
    timer = setTimeout(() => {
    
    
      func.apply(this, args);
    }, delay);
  };
}

// 节流
function throttle(func, interval) {
    
    
  let lastTime = 0;
  return function (...args) {
    
    
    const currentTime = Date.now();
    if (currentTime - lastTime > interval) {
    
    
      func.apply(this, args);
      lastTime = currentTime;
    }
  };
}

上記は簡略化した実装方法であり、必要に応じて調整および最適化する必要があります。

5. JSを介して配列を決定する方法

JavaScript では、変数が配列であるかどうかを判断するためにいくつかのメソッドを使用できます。一般的に使用されるいくつかの方法を次に示します。

Array.isArray() メソッドを使用します。

Array.isArray(variable);

このメソッドはパラメータを受け取り、パラメータが配列型かどうかを示すブール値を返します。true が返された場合はパラメータが配列であることを意味し、それ以外の場合は配列ではありません。

次のように、instanceof 演算子を使用します。

variable instanceof Array;

instanceof 演算子は、オブジェクトが特定のクラスまたは型に属しているかどうかを確認するために使用されます。この式は、変数が配列の場合は true を返し、それ以外の場合は false を返します。

各ウィンドウまたはフレームには独自のグローバル実行環境があるため、instanceof 演算子を使用すると、特に複数のウィンドウまたはフレーム間でデータを共有する場合に問題が発生する可能性があることに注意してください。

Object.prototype.toString.call() メソッドを使用します。

Object.prototype.toString.call(variable) === '[object Array]';

このアプローチでは、内部プロパティの文字列表現toString()を返すメソッドを利用します。[[class]]配列の場合、[object Array]文字列は配列の型を表します。

この方法は比較的一般的で、オブジェクトの種類を表すなど、他の種類のオブジェクトを判断するのに適しています[object Object]。
もちろん、変数が配列であるかどうかを判断する他の方法もあります。

Array.prototype.isArray() メソッドを使用したポリフィル:

if (!Array.isArray) {
    
    
  Array.isArray = function(variable) {
    
    
    return Object.prototype.toString.call(variable) === '[object Array]';
  };
}

一部の古いバージョンの JavaScript 環境をサポートする必要がある場合は、このポリフィルを使用してメソッドの互換性を提供できますArray.isArray()。

ES6 Array.from() メソッドを Array.isArray() と組み合わせて使用します。

Array.isArray(Array.from(variable));

Array.from()配列のようなオブジェクトまたは反復可能なオブジェクトを実際の配列に変換するために使用されるメソッド。変数をArray.from()メソッドに渡してArray.isArray()メソッドで判定することで、変数が正常に配列に変換できたかどうかを判定できます。

もちろん、変数が配列であるかどうかを判断する方法は他にもあります。

Array.from() メソッドを使用した型検出:

Array.from(variable) instanceof Array;

Array.from()変数をメソッドに渡し、instanceof型チェックに演算子を使用することで、変数が配列であるかどうかを判断します。

配列の特性を利用して判断します。

variable && typeof variable === 'object' && variable.constructor === Array;

このメソッドは、変数が存在するかどうか、型がオブジェクトであるかどうか、およびコンストラクターが配列であるかどうかを判断することによって、変数が配列であるかどうかを判断します。

場合によっては、上記の方法には制限や不正確さがある可能性があることに注意してください。たとえば、クロスウィンドウまたはクロスフレーム環境では、instanceof演算子を使用して判断すると失敗する可能性があります。したがって、方法を選択するときは、特定のアプリケーションシナリオとニーズを考慮する必要があります。

要約すると、上記は変数が配列であるかどうかを判断する一般的な方法です。実際の状況に基づいて適切な判断方法を選択してください。

6. スコープチェーンについてのあなたの理解について教えてください

スコープチェーンの詳細については、さらに詳細な説明と説明を以下に示します。

スコープチェーンの形成:
- JavaScript では、関数が作成されるたびに、新しい実行コンテキストが作成され、実行コンテキストスタックに保存されます。
- 各実行コンテキストオブジェクトには、その実行コンテキストで定義された変数、関数、パラメーターを格納する「変数オブジェクト」と呼ばれる内部オブジェクトがあります。
- 関数が呼び出されると、関数のパラメーター、関数内で宣言された変数、および外部環境への参照を含む新しい変数オブジェクトが作成されます。
- この外部環境への参照はスコープチェーンの重要な部分であり、親関数の変数オブジェクトを指します。
スコープチェーンのアクセス順序:
- 変数にアクセスするとき、JavaScript エンジンはまず現在の実行コンテキストの変数オブジェクト内で変数を探します。
- 変数が見つからない場合、JavaScript エンジンは変数が見つかるかグローバルスコープに到達するまでスコープチェーンを検索します。
- それでも変数が最上位のグローバルスコープで見つからない場合、変数は未定義であると判断され、ReferenceError がスローされます。
クロージャとスコープチェーン:
- クロージャとは、関数が定義され実行された後でもその字句スコープを記憶し、アクセスできることを意味します。
- クロージャは、関数が内部関数を定義し、その内部関数がスコープチェーンを通じて外部関数の変数オブジェクトを参照するときに形成されます。
- クロージャ内のスコープチェーンは、外側の関数の変数オブジェクトへの参照を維持するため、内側の関数の実行中に外側の関数の変数にアクセスできるようになります。
スコープチェーンとメモリ管理:
- スコープチェーン内の変数オブジェクトは関数の実行後に破棄され、占有されていたメモリが解放されることがあります。
- したがって、コードを記述するときは、メモリリークを避けるために、不必要なクロージャや循環参照を避けるように注意してください。

要約すると、スコープチェーンは JavaScript で変数を検索するために使用されるメカニズムであり、スコープチェーンに沿って検索することにより、必要な変数が対応する変数オブジェクト内で見つかります。これは関数のネストとスコープのネストの結果であり、関数の定義時に決定され、変数のアクセシビリティとカプセル化が保証されます。スコープチェーンを理解することは、保守可能で効率的な JavaScript コードを作成するために重要です。