フロントエンド面接の質問 10.23 2

セットとマップの使い方

Set と Map は両方とも ES6 で導入されたデータ構造で、一意の値とキーと値のペアを保存するために使用されます。 Set は一意の値の順序付きコレクションであり、Map はキーと値のペアの順序付きコレクションです。

マップを横断する方法と、横断するために for を使用できる理由

マップオブジェクトは、for...of ループを使用して走査できます。 for...of ループは、Map オブジェクトのキーと値のペアを反復処理し、各キーと値のペアを配列として返します。キーと値は、代入を分割することで取得できます。これは、Map オブジェクトが内部的に反復子 (Iterator) を実装しており、for...of ループが反復子を通じて Map 内のキーと値のペアを横断できるためです。

for of を使用して通常のオブジェクトを走査することはできますか? for of を使用して通常のオブジェクトを走査する方法 (反復子を記述できますか)

for...of ループを使用してプレーンオブジェクトを走査することはできません。 for...of ループはイテレータに基づいて実装されており、通常のオブジェクトには組み込みのイテレータはありません。 Object.keys()、Object.values()、Object.entries() などのメソッドを使用して、通常のオブジェクトの反復可能なプロパティを取得し、for...of ループを使用してそれらを走査できます。

約束の理解

Promise は、非同期操作を処理するために使用されるオブジェクトです。これは、非同期操作の最終的な完了または失敗を表し、その結果を取得できます。 Promise には、保留中 (進行中)、履行済み (完了)、および拒否済み (失敗) の 3 つの状態があります。

Promise オブジェクトは new キーワードを使用して作成でき、パラメータとしてエグゼキュータ関数を受け取ることができます。 executor 関数は、resolve と拒否の 2 つのパラメーターを受け取ります。これらは、Promise のステータスをそれぞれ保留中から履行または拒否に変更するために使用されます。

Promise の then() メソッドを呼び出すことで、非同期操作が成功した場合のコールバック関数を登録でき、catch() メソッドを呼び出すことで、非同期操作が失敗した場合のコールバック関数を登録できます。

Promise の then メソッドのパラメータはどのようにして取得され、catch メソッドのパラメータはどのように取得されるのでしょうか?

Promise の then() メソッドと catch() メソッドのパラメーターは、前のステップで Promise オブジェクトのsolve() メソッドとreject() メソッドを通じて渡されます。 then() メソッドは成功コールバック関数をパラメータとして受け取り、この関数のパラメータは前の Promise オブジェクトのsolve() メソッドによって渡された値であり、catch() メソッドは失敗コールバック関数をパラメータとして受け取ります。この関数のパラメータは、前の Promise オブジェクトのsolve()メソッドによって渡された値、またはオブジェクトのreject()メソッドによって渡された値です。

aysnc と await について理解する、await の値は何かなど (具体的な回答) await 1 の結果は何ですか

async と await は、非同期操作を処理するために ES8 で導入された糖衣構文です。 async関数はPromiseオブジェクトを返す関数で、Promiseオブジェクトの結果を待つにはawaitを使用します。 await キーワードの後に Promise オブジェクトを続けることができます。オブジェクトが満たされるとその結果が返され、オブジェクトが拒否されると例外がスローされます。

待機される値は、Promise オブジェクト、thenable オブジェクト、プリミティブ型 (数値、文字列など)、または通常のオブジェクトです。 Promise オブジェクトではない場合、await はそれを満たされた Promise オブジェクトに変換し、その値を返します。

await 1 の結果は 1 です。これは、await が元の型の値を満たされた Promise オブジェクトに変換し、その値を返すためです。

画面ウィンドウの変化を監視する方法

画面ウィンドウの変更を監視するには、ウィンドウオブジェクトのサイズ変更イベントを使用します。 addEventListener() メソッドを通じてサイズ変更イベントをリッスンし、コールバック関数でウィンドウサイズ変更のロジックを処理できます。

window.addEventListener('resize', () => {
// 处理窗口大小变化的逻辑
});

サイズ変更イベントはウィンドウサイズが変更されるとトリガーされ、ウィンドウの新しいサイズ情報はイベントオブジェクトを通じて取得できます。

MVVMの原理

MVVM (Model-View-ViewModel) は、ユーザーインターフェイス (View) をビジネスロジック (Model) から分離し、ViewModel を通じて対話するために使用されるソフトウェアアーキテクチャパターンです。 MVVM モードでは、ViewModel はモデルのデータをビューに同期し、ビューのユーザー入力を処理し、モデルのデータを更新します。

ViewModel は、View および Model と対話する中間層であり、双方向バインディングメカニズムを通じて View の変更をタイムリーに Model に反映し、Model のデータ変更を View に同時に同期します。

vue の仮想 dom と現実の dom はどのようにバインドされていますか?

Vue の仮想 DOM と実際の DOM は、Vue の応答システムを通じてバインドされています。 Vue は仮想 DOM を使用して実際の DOM の構造と属性を記述します。データが変更された場合、Vue は新旧の仮想 DOM の差分を比較し、変更が必要な部分のみを更新することで、DOM 上の操作を軽減します。実際の DOM とパフォーマンスの向上。

データが変更されると、Vue は仮想 DOM を再レンダリングし、diff アルゴリズムを通じて更新する必要がある差異を見つけます。次に、Vue はその差分を実際の DOM に適用し、実際の DOM と仮想 DOM の同期を保ちます。

ルーティングの原理は何ですか?

ルーティングの原理は、ブラウザの History API と hashchange イベントに基づいて実装されます。 History API を使用すると、ページを更新せずにブラウザのアドレスバーの URL を動的に変更したり、進むボタンや戻るボタンを使用して移動したりできます。

2 つのルートの違いと使用シナリオは何ですか?

Vue には、ハッシュモードとヒストリーモードという 2 つのルーティングモードがあります。

使用シナリオ: ハッシュモードは、HTML5 History API をサポートしていないブラウザ環境での使用に適しており、履歴モードは、HTML5 History API をサポートする最新のブラウザ環境での使用に適しています。

ハッシュモード: URL には # 記号が含まれます (例:http://example.com/#/home)。ハッシュモードでは、ルーティング情報は URL のハッシュ部分に保存され、サーバーには送信されません。ブラウザは、hashchange イベントをリッスンすることでルーティングの変更に応答します。
履歴モード: URL には # 記号は含まれません (例:http://example.com/home)。履歴モードでは、ルーティング情報はブラウザの履歴に保存され、ブラウザの「進む」ボタンと「戻る」ボタンを使用して移動できます。履歴モードをサポートするには、ページが更新されたときにルーティングが正しく応答できるように、対応する構成をサーバー上で行う必要があります。

httpキャッシュについてご存知ですか？

HTTP キャッシュは、要求および応答メッセージのキャッシュ制御フィールドを最大限に活用して、帯域幅の使用量を削減し、サーバーとクライアントの効率を向上させることで、キャッシュされたデータの保存と再利用を実現します。 HTTPキャッシュには主に以下の2種類があります。

強力なキャッシュ: リクエストされたリソースが有効期間内の場合、ネットワークはトリガーされず、ブラウザはキャッシュからリソースを直接読み取ります。このとき、HTTP 200 ステータスコードが返されます。強制キャッシュは、Expires と Cache-Control という 2 つの HTTP ヘッダーによって実装されます。
ネゴシエーションキャッシュ: ネゴシエーションキャッシュは、強力なキャッシュが失敗した後、プロトコルによって提供される特定のメカニズムを使用します。これにより、ブラウザとサーバーは特定のメカニズムを通じて、キャッシュを使用するかどうかを判断できます。キャッシュ。これは主に Last-Modified と ETag を通じて実装されます。

httpの各種プロトコル

HTTP プロトコルには、HTTP/1.0、HTTP/1.1、HTTP/2 などのいくつかのバージョンが含まれます。

HTTP/1.0: HTTP/1.0 バージョンは 1996 年 5 月にリリースされました。ヘッダー、マルチメディアオブジェクトなど、HTTP/0.9 に基づいた多くの重要な機能が追加されました。
HTTP/1.1: HTTP/1.1 バージョンは 1997 年 1 月にリリースされました。HTTP/1.0 に基づいて永続的な接続や帯域幅の節約、遅延の短縮などの概念が追加されました。、データ転送速度が向上します。
HTTP/2: HTTP/2 バージョンは 2015 年にリリースされました。主な目標は、リクエストとレスポンスの完全な再利用をサポートし、遅延を短縮することで、ページの読み込み速度を向上させることです。

http csp戦略

コンテンツセキュリティポリシー (CSP) は、Web サイトのセキュリティを提供するための重要なツールであり、クロスサイトスクリプティング (XSS) やデータインジェクション攻撃など、特定の種類の攻撃を軽減または排除するために使用できます。 CSP の基本的な考え方はホワイトリストシステムです。開発者は、どの外部リソースをロードして実行できるかをブラウザに明確に指示します。ポリシーを設定するだけで済み、それらをインターセプトする方法はブラウザ自体によって実装されます。 CSP ポリシーは、HTTP ヘッダーの Content-Security-Policy を通じて、または HTML <meta> タグを通じて設定できます。

次の関数を満たす Human クラスを実装します: const human = new Human()
human.say('hello').sleep (2 ).say('world').done();
done 実行後、順次 hello が出力され、2 秒後に world が出力されます。あ>

class Human {
  constructor() {
    this.queue = Promise.resolve();
  }
  
  say(word) {
    this.queue = this.queue.then(() => {
      console.log(word);
      return Promise.resolve();
    });
    return this;
  }
  
  sleep(time) {
    this.queue = this.queue.then(() => {
      return new Promise(resolve => setTimeout(resolve, time * 1000));
    });
    return this;
  }

  done() {
    return this.queue;
  }
}

//测试代码
const human = new Human();
human.say('hello').sleep(2).say('world').done();

このコードでは、非同期問題を解決するために JavaScript の Promise メカニズムが使用されており、say メソッドと sleep メソッドの呼び出し順序はチェーン呼び出しによって保証されています。say メソッドはすぐに実行されて文字列を出力し、sleep メソッドは指定された時間後に続行されます。 . 後続のアクションを実行します。最後に、done メソッドは最後の Promise オブジェクトを返し、すべての操作が完了したことを確認します。

フロントエンド面接の質問 10.23 2

おすすめ