2023 年の最新の高頻度のフロントエンド面接の質問の概要 (回答付き)

async await は ES7 に新しく追加されたもので、async は関数の宣言に使用され、await は非同期メソッドが完了するのを待つために使用されます。async 関数は、Promise オブジェクトを返します。.then メソッドを使用してコールバック関数を追加できます。関数の実行中に await が発生すると、最初に戻ります。非同期操作が完了すると、ステートメントが実行されます。関数本体の後ろ

5.配列の一般的に使用される方法は何ですか? どのメソッドが元の配列を変更し、どのメソッドが変更しないのか

元の配列を変更します。
- Pop (配列の最後の要素を削除し、削除された要素を返す)
- Push (配列の末尾に 1 つ以上の要素を追加し、新しい長さを返します)
- シフト (配列の最初の要素を削除して返す)
- unshift (配列の先頭に 1 つ以上の要素を追加し、新しい長さを返します)
- reverse (配列の要素の順序を逆にします)
- sort (配列の要素をソート)
- スプライス (配列の要素を挿入、削除、または置換するため)
元の配列は変更しません。
- concat --- 2 つ以上の配列を接続し、結果を返します。
- each --- 配列要素の各要素が条件を満たすかどうかを確認します。
- some --- 配列要素の中に指定した条件を満たす要素があるかどうかを確認します。
- filter---配列要素を検出し、基準を満たすすべての要素の配列を返します。
- IndexOf---配列内の要素を検索し、その位置を返します。
- join --- 配列のすべての要素を文字列に入れます。
- toString---配列を文字列に変換し、結果を返します。
- lastIndexOf---文字列内の指定された位置を後ろから前に検索して、指定された文字列値の最後の出現位置を返します。
- map---指定された関数を通じて配列の各要素を処理し、処理された配列を返します。
- スライス --- 配列の一部を選択し、新しい配列を返します。
- valueOf---配列オブジェクトの元の値を返します。

6. プロトタイプチェーンとは何ですか?

各インスタンスオブジェクトには、コンストラクターのプロトタイプオブジェクトを指す proto 属性があります。コンストラクターのプロトタイプオブジェクトもオブジェクトであり、proto 属性もあります。このようにして、レイヤーごとに検索するプロセスによってプロトタイプが形成されます鎖。

7. クロージャとは何ですか? 閉店のメリットとデメリットは何ですか？

概念: 関数の入れ子関数、内部変数は外部変数にアクセスでき、この変数は自由変数と呼ばれます
解決された問題: 変数の保存
問題: メモリリークが発生する
クロージャーアプリケーション: 手ぶれ補正スロットリング

8. es6 の新機能は何ですか?

テンプレート文字列を追加
アロー関数
for-of (配列内の値などのデータの反復処理用)
ES6 は Promise オブジェクトを仕様に組み込み、ネイティブの Promise オブジェクトを提供します。
変数を宣言するために let コマンドと const コマンドが追加されました。
モジュールモジュールを導入するという概念もあります

9. v-for ループでキーをバインドする必要があるのはなぜですか?

各 dom 要素に一意の識別子としてキーを追加すると、diff アルゴリズムがこのノードを正しく識別できるため、ページのレンダリングが高速になります。

10. コンポーネント内のデータをオブジェクトではなく関数として定義する必要があるのはなぜですか?

すべてのコンポーネントは Vue のインスタンスです。コンポーネントは data 属性を共有しており、data の値が同じ参照型の値である場合、一方を変更すると他方にも影響します。

11. ボックスを垂直方向に中央揃えにする一般的な方法は何ですか? 例を 3 つ挙げてください。

息子と父親のポジショニング手法を利用して実現

    <style>
        .container{
            width: 300px;
            height: 300px;
            position: relative;
        }
        .conter{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }
    </style>

Css3 の変換を使用すると、要素の高さと幅が不明な場合に要素の垂直方向の中央揃えを簡単に実現できます。

   <style>
        .container{
            position: relative;
        }
        .conter{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>

フレックス

   <style>
        .container{
         display: flex;
         justify-content: center;
         align-items: center;
        }
        .conter{
            
        }
    </style>

12. js データ型とは何ですか、またその違いは何ですか

基本タイプ: 文字列、数値、ブール値、null、未定義、シンボル、bigInt
参照型: オブジェクト、配列
基本型はスタックに格納されるため、スペースが小さく、頻繁に操作されます。
参照データ型はヒープに格納され、そのアドレスはスタックにあります。通常、アクセスはそのアドレスです。

13. シンボルとは

一意の値を表す新しいプリミティブデータ型 Symbol を導入したのは es6 です。

14. 同一生成元ポリシーとは何ですか

いわゆる同一オリジンポリシーは、異なるオリジン (同じドメイン名、プロトコル、ポート番号) の Web サイト間の通信を制限するブラウザのセキュリティメカニズムです。

15. 約束とは何ですか、そしてその役割は何ですか

Promiseはオブジェクトの変更から非同期操作情報を取得できるオブジェクトです
彼はコールバック地獄の問題、つまり非同期の深い入れ子の問題を解決できる

16. 再帰とは何ですか?また、再帰の長所と短所は何ですか?

再帰: 関数が内部で自分自身を呼び出すことができる場合、関数全体が再帰関数です。単純な理解: 関数は内部で自分自身を呼び出し、この関数は再帰関数です。
利点: 明確な構成、優れた可読性
欠点: 効率が低く、呼び出しステーションがオーバーフローする可能性があります。実際、各関数呼び出しはメモリスタックにスペースを割り当て、各プロセスのスタックの内容は制限されます。呼び出しレベルが多すぎるとスタックの容量を超え、スタックオーバーフローが発生します。

17. let と const の違いは何ですか

let コマンドには変数の昇格がないため、let の前に使用するとエラーが発生します。
ブロック領域に let および const コマンドがある場合、閉じたスコープを形成します。
重複したステートメントは許可されません
const は定数を定義するため変更できませんが、オブジェクトが定義されている場合、オブジェクト内のデータは変更できます。

18. Vueのパフォーマンスの最適化

機能部品
ルーティングの遅延読み込み
v-for はキーをバインドする必要があります。 key は仮想 dom の唯一の兆候です。これは、vue がページを効率的かつ動的にレンダリングするのに役立ちます。ページをレンダリングするときに diff アルゴリズムを使用します。新しい dom と古い dom を比較し、同じレベルの dom のみを比較します。比較します。クロスレベル比較はありません。キーが変更されるとノードが破棄され、子ノードが最初に破棄されます。
計算されたキャッシュデータと監視キープアライブキャッシュコンポーネント
v-if と v-for を同時に使用しないでください。v-show は表示、destroy は表示なしです。作成する場合は v-if が true、破棄する場合は false。
Vue 応答データを設計する場合、完全な再帰計算が行われるため、あまり深く設計することはできません。
コンポーネントの粒度はあまり細かく設計できない合理的な分割階層が深いほどパフォーマンスの消費が大きくなる
手ぶれ補正スロットリング
ui コンポーネントライブラリはオンデマンドでインポートされます

19..mvvm と mvc

m (データレイヤー) v (ビューレイヤー) vm (データビューインタラクションレイヤー) は、多くの dom 操作を 1 ページのみに簡素化し、ノード操作の代わりにデータを使用してビューレイヤーを表示します。
MVC も dom を取得する必要があるため、ページのレンダリングのパフォーマンスが低下し、読み込み速度が遅くなります。
インタビューで語られたプロジェクトの最適化:
Vue 応答データを設計する場合、完全な再帰計算が行われるため、あまり深く設計することはできません。
コンポーネントの粒度はあまり細かく設計できない合理的な分割階層が深いほどパフォーマンスの消費が大きくなる

20. ルーティングモード: ハッシュと履歴

実装された機能:

ブラウザにサーバーにリクエストを送信させずに URL を変更する
URLの変更を検出する
URL アドレスをインターセプトし、ルーティングルールに一致するために必要な情報を解析します。

ハッシュには URL パラメータに基づいたボリューム制限があり、http リクエストには含まれず、バックエンドには影響しません。ハッシュを変更してもページはリロードされません。履歴は URL にパラメータを設定してデータを保存できます。特定のオブジェクト内でのブラウザの履歴モードの白い画面の解決策は、サーバー側のすべての状況をカバーする候補リソースを追加することです。サーバーを使用するには、サーバー上に対応するモードが必要です。サーバーの場合が構成されていない場合は、最初にデフォルトのハッシュを使用できます。

21. ブロック属性と行属性でよく使用されるタグは何ですか? 特徴は何ですか

ブロックタグ: div、h1~h6、ul、li、table、p、br、form。
特徴：1行占有、折り返し表示、幅と高さを設定可能、ブロックと行をネスト可能
行ラベル:span、a、img、textarea、select、option、input。
特徴：行内にのみ表示され、コンテンツは幅と高さを拡大するために引き伸ばされ、幅と高さの設定はできません（img、input、textareaなどを除く）

22. == と === の違い

== は厳密には等しくありません
- 価値が等しい
=== は厳密に等しく、両側のデータ型と値のサイズを比較します。
- 値と参照アドレスが等しい

23. Strictモードの制限事項

変数は使用する前に宣言する必要があります
関数のパラメータに同じ名前の属性を含めることはできません。そうでない場合は、エラーが報告されます。
with ステートメントは使用できません
これがグローバルオブジェクトを指すことを禁止します

24.git

git init はウェアハウスを初期化します
git クローンクローン
git status ファイルのステータスを確認する
git add. ステージング領域にファイルを追加します
git commit -m の説明情報

25.tcp および udp プロトコル

tcp はより安全です http プロトコルは tcp に基づいています
udp は tcp よりも効率的ですが、データが失われやすいです

26. vuex の 5 つの状態

突然変異 (状態内のデータを変更しますが、実行できるのは同期操作のみです。非同期はアクションに記述する必要があります)
状態 (データを入れる)
アクション (非同期操作の実行)
ゲッター (計算されたプロパティ)
Moudel (単一のストアを複数のストアに分割し、同時に単一の状態で保存できます)

転送プロセス

ページは、mapAction を通じてアクションにイベントを非同期的に送信します。アクションは、コミットを通じて対応するパラメーターをミューテーションに同期的に送信し、ミューテーションは状態内の対応する値を変更します。最後に、ゲッターを介して対応する値が実行され、ページの計算されたプロパティで、状態の値がmapGetterを介して動的に取得されます。

27.手ぶれ補正とスロットリングとは何ですか。js は手ぶれ補正とスロットルにどのように対処しますか

まず、手ぶれ補正とは、次のイベントがトリガーされたときに前のイベントの落下を止めることです。
スロットルは、前のイベントの終了後に現在のイベントをトリガーします。
スロットル（タイマー）を設定することで

28. リドローとリフローとは

再描画: 要素の内容とレイアウトは変更されていないが、要素の外観 (背景色) が変更された場合、要素は再描画されます。
リフロー: コンテンツまたはレイアウトの一部が変更された場合、ページを再構築するとリフローが発生します。
リフローは間違いなく再描画を引き起こしますが、再描画が必ずしもリフローを引き起こすとは限りません

29. CSSの優先順位

!importent > インライン > ID > クラス、疑似クラス、属性 > タグ、疑似要素セレクター > 継承とワイルドカード

30.ボックス崩壊を解決する方法

親ボックスの上余白を設定します。
オーバーフロー：非表示
ラベル外のサブボックス
親ボックスのパディング

31.クリアフローティング法

5つの方法があります

親ボックスセットの高さ
オーバーフロー：非表示
擬似要素
ダブル擬似要素
親ボックスの最後に空のボックスを追加し、clear:both を設定します。

32. Split() と join() の違いは?

分割した文字列を配列に変換し、パラメータを特定の文字列で区切ります
結合配列は、変換された文字列を何に接続するかを示す文字列パラメータに変換されます。

33. アレイの重複排除

1. 二重 for ループを使用し、配列メソッド splice メソッドを使用して重複を排除します (es5 が一般的に使用されます)。

2. セット重複排除：配列を用意し、ニューセットを分解し、配列の変数を関数の判定値として格納する関数を用意し、return

Array.from(新しいセット(arr))

3. 配列メソッドindexof

4. 配列メソッドソート Obj[a]-Obj[b]

34. メモリリークの原因

グローバル変数の不適切な使用 (変数が宣言されていない)
クロージャーの不適切な使用
タイマー/ディレイヤーがクリアされていません
クリーンアップされていない DOM 要素参照 (DOM が空になるか削除されてもイベントはクリアされません)

35.ページが初めてロードされたときにどのフック関数がトリガーされますか?

作成前
created データの初期化が完了し、メソッドも呼び出されますが、DOM はレンダリングされません
マウント前
マウントされた DOM と完了待ちのデータ

36. Vuex の 5 つの主要なプロパティは何ですか?

状態 => 基本データ
getters => 基本データ (状態) から派生したデータ。状態の計算されたプロパティに相当します。
mutations => 変更されたデータを送信するメソッド、同期!
events => は、突然変異をラップして非同期にするデコレータのようなものです。
モジュール => モジュラー Vuex
vuex データ転送プロセスを簡単に説明します。

ページは、mapAction を通じてアクションにイベントを非同期的に送信します。アクションは、コミットを通じて対応するパラメーターをミューテーションに同期的に送信し、ミューテーションは状態内の対応する値を変更します。最後に、ゲッターを介して対応する値が実行され、ページの計算されたプロパティで、状態の値がmapGetterを介して動的に取得されます。

37. getとpostの違い

同じ点で、
get リクエストと post リクエストの最下層は TCP/IP プロトコルに基づいており、どちらを使用しても、クライアントとサーバー間の双方向の対話の最も本質的な違いを実現できます
。

規約と仕様:
仕様: GET リクエストはリソースの取得、つまりクエリ操作に使用され、POST リクエストは追加、削除、および変更操作のためのエンティティオブジェクトの転送に使用されることを定義します。
規則: GET リクエストは、パラメータを送信するために URL にパラメータを結合します。 POST リクエストは、送信するためにパラメータをリクエスト本文に書き込みます。

本質的でない違い

キャッシュは異なります。取得はキャッシュになります
パラメータの長さ制限は異なります。get リクエストのパラメータは URL 経由で渡され、URL の長さは制限されており、通常は 2K です。post リクエストのパラメータはリクエスト本文に格納され、サイズ制限はありません。
ロールバックとリフレッシュは異なります。取得リクエストは、ユーザーやプログラムに影響を与えることなく、直接ロールバックしてリフレッシュできます。ポストリクエストが直接ロールバックしてリフレッシュされた場合、データは再度送信されます。
履歴レコードは異なります。get リクエストのパラメータは履歴レコードに保存されますが、post リクエストのパラメータは保存されません。
ブックマークは異なります。get で要求されたアドレスはブックマークできますが、post ではブックマークできません。

38. クロスドメイン

クロスドメインの理由: ブラウザーは、セキュリティ上の理由、同一オリジンポリシーによりリソースを保護します。(プロトコル、ドメイン名、ポート番号)
クロスドメインを解決します。
jsonP ですが、使用できるのは get 原則のみです。要求されたインターフェイスを script タグの src 属性に設定し、関数をバックグラウンドに渡してクロスドメインを実現します。バックグラウンド応答は関数呼び出しです
cors: 最も一般的に使用されます。
リバースプロキシ: ローカルフロントエンドは、クロスドメインなしでローカルバックエンドに送信します (同じオリジン)。ローカルバックエンドは、リクエストを受信した後、他のサーバーに転送します (サーバーとサーバーの間にクロスドメインはありません)。プロキシには、パスに特別なフラグが必要です。

39. 3 種類のストレージの違い

ウィンドウまたはブラウザを閉じても、Cookie セットの有効期限は削除されます
localStorage は大容量のストレージであり、永続的なデータを保存します。ブラウザを閉じた後でも、手動で削除しない限りデータは失われません。
sessionStorage は一時的に保存され、保存されたコンテンツはブラウザを閉じると自動的に消去されます

収納サイズ:

Cookieのデータサイズは4Kを超えることはできません
sessionStorage と localStorage にもストレージサイズ制限がありますが、1 つの Cookie ははるかに大きく、5m 以上に達する場合があります。

40. dom がブラウザの複数のタブ間の通信を実装する方法

websocket.SharedWoeket;
localStorage や cookie などのローカルストレージメソッドも呼び出すことができます。localStorage が別のブラウザーコンテキストで追加、変更、または削除されると、イベントがトリガーされます。イベントをリッスンし、ページ情報通信の値を制御します。
癖に注意してください: Safari は、シークレットモードで localStorage 値を設定すると、quotaExceededError の例外をスローします。

41. vue.cliプロジェクトのsrcディレクトリ内の各フォルダとファイルの使い方を教えてください。

アセットフォルダーは静的リソース用です。
コンポーネントは正方形のコンポーネントです。
router はルーティング関連の構成の定義です
ビューはビューです
app.vue はアプリケーションのメインコンポーネントです
main.js はエントリファイルです

42. $routeと$routerの違い

router は VueRouter のインスタンスであり、グローバルルーターオブジェクトと同等であり、多くの属性とサブオブジェクト (履歴オブジェクトなど) が含まれています。。。頻繁に使用されるジャンプリンクには、ルーターリンクジャンプと同じ this.$router.push を使用できます。

ルートは、現在リダイレクトされているルーティングオブジェクトと同等です。。そこから名前、パス、パラメータ、クエリなどを取得できます。

43. 仮想dom実装原理

JavaScript オブジェクトを使用して実際の DOM ツリーをシミュレートし、実際の DOM を抽象化します。
diff アルゴリズム: 2 つの仮想ツリー間の差異を比較します。
Pach アルゴリズム: 2 つの仮想 DOM オブジェクトの差分を実際の DOM ツリーに適用します。

44. 通常の関数とアロー関数の違い

アロー関数にはプロトタイプがありません、プロトタイプは未定義です
アロー関数 this はグローバルオブジェクトを指し、関数は参照オブジェクトを指します
call、apply、bind メソッドはアロー関数の方向を変更できません。

45. vue の単一アイテムのデータフローを理解する方法

データは常に親コンポーネントから子コンポーネントに渡されます。子コンポーネントには親コンポーネントから渡されたデータを変更する権限はなく、親コンポーネントに対して元のデータの変更を要求することのみが可能です。

46.スロットスロット

スロットスロットは、スロットがコンポーネントテンプレート内であらかじめ位置を占めているものとして理解できます。コンポーネントが再利用されるとき、関連するスロットラベルが使用されると、ラベルの内容が、コンポーネントテンプレート内の対応するスロットラベルの位置を自動的に置き換えます。コンポーネントテンプレート、コンテンツのベアラー配布エクスポートとして
主な機能は、コンポーネントの再利用と拡張、カスタマイズされたコンポーネントの処理の実行です。

47. Vueの共通命令

v-model は主に、双方向のデータバインディングを実現するフォーム要素に使用されます。

v-bind: と省略され、一部の要素のプロパティを動的にバインドします。タイプは文字列、オブジェクト、または配列です。

v-on:click は関数をラベルにバインドします。これは @ と省略できます。たとえば、クリック関数のバインドはメソッド内に記述する必要があります。

v-for 形式: v-for="配列 json 内のフィールド名" ループ配列または json

v-show 表示内容

v-else コマンド: v-if コマンドとともに使用されます。対応する値はありません。v-if の値が false の場合、v-else が表示されます。

v-if 命令: 値は true/false、制御要素をレンダリングする必要があるかどうか

v-else-if は v-if と組み合わせて使用する必要があります

v-else コマンド: v-if コマンドとともに使用されます。対応する値はありません。v-if の値が false の場合、v-else が表示されます。

v-text テキストの解析

v-html は HTML タグを解析します

v-bind:class 3 つのバインディングメソッド 1. オブジェクト型 '{red:isred}' 2. 三項型 'isred?"red":"blue"' 3. 配列型 '[{red:"isred"} ,{blue :"イズブルー"}]'

v-once はページに入るときに 1 回だけレンダリングされ、レンダリングされません。

v-cloak はちらつきを防止します

v-pre はタグ内の要素をその場で出力します

48. Vue におけるキープアライブの役割

< keep-alive > は Vue の組み込みコンポーネントであり、コンポーネントの切り替え中に状態をメモリに保持し、DOM の繰り返しレンダリングを防ぐことができます。
< keep-alive > 動的コンポーネントをラップする場合、非アクティブなコンポーネントのインスタンスは破棄されずにキャッシュされます。

49. Vue の双方向バインディングの原理

vue データの双方向バインディングは、パブリッシャー/サブスクライバーモードと組み合わせたデータハイジャックによって実現されます。その核心は、Object.defineProperty() メソッドを通じて set 関数と get 関数を設定してデータハイジャックを実装し、データ変更時にサブスクライバーにメッセージをパブリッシュし、対応する監視コールバックをトリガーすることです。つまり、データとビューは同期されており、データが変化するとビューもそれに応じて変化し、ビューが変化するとデータもそれに応じて変化します。