フロントエンドの面接の質問 (JavaScript)

JavaScript の基本的なデータ型を紹介します。

基本データ型: Number String 、  Boolean Null unknown

オブジェクトt は、JavaScriptのすべてのオブジェクトの親オブジェクトです

データカプセル化オブジェクト:オブジェクト、配列、ブール値、数値、文字列

その他のオブジェクト:関数、引数、数学、日付、エラー、正規表現

その他のデータ型:シンボル

参照データ型: Object(Array,Date,RegExp,Function)

jsの組み込みオブジェクトとは何ですか?

js で一般的に使用されるオブジェクトは次のとおりです。引数 関数 パラメータ コレクション 配列 配列     ブール 値     ブール値 オブジェクト データ 日付時刻  エラー 例外オブジェクト 関数     関数 コンストラクタ     Math 数学オブジェクト   Number数値オブジェクト オブジェクト  基本オブジェクトRegExp 正規表現オブジェクト   String 文字列オブジェクト

js がオブジェクトを作成する方法は何通りありますか?

ファクトリ ウェイ、コンストラクター ウェイ、プロトタイプ モード、ハイブリッド コンストラクター プロトタイプ モード、ダイナミック プロトタイプ ウェイ

関数を作成する方法は何通りありますか?

関数宣言 function fun(){ }

関数式 let fun =function(){ }

関数オブジェクトの種類 let fun = new function("パラメータ", "関数本体")

配列を json オブジェクトに変換し、それを元に戻すにはどうすればよいですか?

JavaScript の typeof はどのようなデータ型を返しますか

オブジェクト番号関数ブール値アンダー検索文字列

jsの読み込みを遅らせる方法は何通りありますか?

defer属性、async属性、動的にdomメソッドを作成する、jqueryのgetScriptメソッドを使用する、setTimeoutの遅延メソッドを使用する、jsを最後に読み込む、の6種類です。

HTML 5 では、<script> タグの async 属性が定義されています。この属性を追加すると、スクリプトと HTML が一緒に (非同期で) 読み込まれ、コードがスムーズに実行されます。

ブラウザーが非同期スクリプトを検出すると、ページのレンダリングはブロックされず、直接ダウンロードして実行されます。ただし、これの問題は、さまざまなスクリプトの実行順序を制御できないことですが、スクリプトは残りのページの表示を妨げないことです。

async 属性は外部スクリプト ファイルにのみ適用されます。

本文を閉じる前と閉じた後に、ページの下部に Script タグを配置する場合の違いは何ですか?

ブラウザはそれらをどのように解析するのでしょうか? ボディのクロージャーの前に配置されると、他のリソースの読み込みがブロックされます。ボディのクロージャの後に配置されると、ボディ内の要素のロードには影響しません。

split() join() の違い

前者は配列に切り出す形で、後者は配列を文字列に変換する形です。

join() メソッド: 配列内のすべての要素を文字列に入れるために使用されます。

要素は指定された区切り文字で区切られます。

split() メソッド: 文字列を文字列の配列に分割するために使用されます。

配列メソッド Pop() Push() unshift() SHIFT()

Push()の最後に追加Pop()最後に削除Unshift()先頭にshift()を追加して先頭を削除

クロージャーとは何ですか?

js クロージャは関数内にネストされた関数であり、サブ関数は外部関数の変数を参照し、サブ関数がリターンで呼び出された場合、変数は常にメモリ内に残ります。

ノードを追加、削除、移動、コピー、作成、検索するにはどうすればよいですか?

1) 新しいノードを作成する

createDocumentFragment() //DOM フラグメントを作成する

createElement() //特定の要素を作成する

createTextNode() //テキストノードを作成する

2) 追加、削除、置換、挿入

appendChild() //追加removeChild() //削除replaceChild() //置き換えinsertBefore() //挿入

3) 探す

getElementsByTagName() //タグ名によるgetElementsByName() //要素の Name 属性の値によるgetElementById() //要素の ID、一意性による

Javascript はどのように継承を実装するのでしょうか?

プロトタイプ チェーンの継承、借用コンストラクターの継承、構成の継承、寄生の継承、寄生の構成の継承

Cookie のデメリットについてお話しいただけますか?

欠点: 1. 「Cookie」の数と長さに制限があります。各ドメインには最大 20 個の Cookie のみを含めることができ、各 Cookie の長さは 4KB を超えることはできません。4KB を超えると切り取られます。

2. セキュリティの問題。Cookie が傍受されると、その人はすべてのセッション情報を取得できます。暗号化も役に立ちません。傍受者は Cookie の意味を知る必要がなく、Cookie をそのまま転送する限り目的を達成できます。

3. 一部の状態はクライアント側で保存できません。たとえば、フォームの繰り返しの送信を防ぐには、サーバー側にカウンターを保持する必要があります。このカウンタをクライアント側に保存しても、何も行われません。

JavaScriptのthisポインタ、クロージャ、スコープ

this: 呼び出しコンテキストを指します

クロージャ: 内部スコープは外部スコープの変数にアクセスできます。

スコープ: 関数を定義するとローカル スコープが開き、JS 実行環境全体がグローバル スコープになります。

 new 演算子は具体的に何をするのですか?
1. 空のオブジェクトを作成すると、this 変数はそのオブジェクトを参照し、関数のプロトタイプも継承します。
 2. this が参照するオブジェクトにプロパティとメソッドが追加されます。
 3. 新しく作成されたオブジェクトは this によって参照され、最終的に暗黙的に this を返します。
アンチシェイクとスロットリング
アンチシェイク
    スクロールイベントでは、複雑な計算を行ったり、ボタンの二次的なクリック操作を実現したりする必要があります。ジッター防止機能によって実現できます

 スロットリング
    手ぶれ補正とスロットリングの本質は異なります。アンチジッターは複数の実行を最後の実行に変えることであり、スロットリングは複数の実行を一定の間隔で実行に変えることです

js の同一オリジンポリシー Same-origin
: 同じプロトコル、同じドメイン名、同じポート
 異なるオリジン : プロトコル、ドメイン名、ポートのいずれかが異なる限り、異なるソースがクロスドメインの同一オリジンポリシーを生成します
 Main機能: 異なるオリジンのサーバー間の相互アクセスを制限し、Web ページへのブラウザー アクセスのセキュリティを向上します。

イベントプロキシとは何ですか?
つまり、本来バインドする必要があるイベントを親要素に委任し、親要素にイベント監視の役割を持たせることです。
イベント プロキシの原理は、DOM 要素のイベント バブリングです。イベント プロキシを使用する利点は、パフォーマンスを向上させ、
メモリ使用量を大幅に節約し、イベント登録を削減できることです。
新しいサブオブジェクトが追加されたときに、再度バインドする必要がなくなることがわかります。

 forEach と配列内のマップの違いは何ですか?
forEachとmapの同じ点
配列内の各項目をループする点も同じ

forEach メソッドと map メソッドは、匿名関数が実行されるたびに 3 つのパラメータをサポートします。パラメータは、 item (現在の各項目)
、index (インデックス値)、および arr (元の配列) です。
匿名関数のこれは、ウィンドウと走査のみ可能です。配列は元の配列を変更しません 


 mapメソッド との違い
1.mapメソッドは新しい配列を返し、配列内の要素は元の配列の関数を呼び出して処理した値になります 2.mapメソッドは
空の配列を検出せず、 map メソッドは元の配列を変更しません。
3. ブラウザのサポート: chrome、Safari1.5 以降、opera のすべてのサポート、IE9 以降、arr が空の配列の場合、
map メソッドは空の配列を返します。

 forEachメソッド
1. forEach メソッドは、配列の各要素を呼び出し、その要素をコールバック関数に渡すために使用されます。
2. forEach は、空の配列に対してコールバック関数を呼び出しません。arr が空の配列かどうかに関係なく、
forEach は未定義を返します。このメソッドは、配列内の各項目をコールバックのパラメータとして 1 回だけ実行します。

 JS のガベージ コレクション メカニズムとは何ですか。一般的に使用されるものはどれですか。また、その対処方法は何ですか?
JS のガベージ コレクション メカニズムは、メモリ リークを防ぐことを目的としています。メモリ リークの意味は、メモリの一部が不要になったときに、ガベージ コレクション メカニズムがそのメモリ部分にまだ存在することです。このメカニズムは、未使用の変数を断続的に見つけ
、不定期に解放し、それらが指すメモリを削除します。

JS でのガベージ コレクションの最も一般的な方法は、動作原理を
 マークしてクリアすることです。つまり、変数が環境に入るときに、この変数を「環境に入る」としてマークします。
変数が環境から離れると、
「環境から離れる」とマークされます。「環境から離れる」とマークされている場合はメモリを再利用する

 ワークフロー:
ガベージ コレクターは、実行時にメモリに格納されているすべての変数にマークを付け、環境内の変数
と環境内の変数によって参照される変数を削除して、削除する変数としてマークします。
ガベージ コレクターはメモリのクリーンアップを完了し、データを破棄します。これらのマークされた値を取得し、それらが占有しているメモリ空間を再利用します

js のいくつかのトラバーサル ループ メソッド
forEach() : パラメータはコールバック関数であり、配列内のすべての項目をトラバースします。コールバック関数は 3 つのパラメータ、つまり value、index、self を受け入れます。forEach には戻り値がありませ    
 ん。 forEach と同様に、同時にコールバック関数は新しい配列を形成するデータを返します。マップは、     forEach と同じ    
 Every()を返します。また、コールバック関数はブール値を返します。これらはすべて true であり、every は true
 some( ) : forEach と同じであり、コールバック関数は true が存在する限りブール値を返し、いくつかの関数によって true が返されます。

iframeの長所と短所?

利点: 1. アイコンや広告などのサードパーティコンテンツの読み込みが遅いという読み込みの問題を解決します。

2. セキュリティサンドボックス

3. スクリプトを並行してロードする

欠点: 1. iframe はメイン ページの Onload イベントをブロックします。

2. コンテンツが空でも読み込みに時間がかかる

3. セマンティクスがない

 文字列関数:
                .charAt(index);//charAt() メソッドは、指定された位置の文字を返すことができます。
                .charCodeAt(index);//このメソッドは、指定された位置にある文字の Unicode エンコードを返すことができます。戻り値は 0 ~ 65535 の整数です。
                String.fromCharCode();//このメソッドは、指定された UTF-16 コード単位のシーケンスによって作成された文字列を返します
                .indexOf();
                .lastIndexOf();
                .concat();
                .split();//文字列を分割しますArray Split("")
                .slice();
                .substring();
                .substr();//新しいバージョンでは部分文字列が破棄され、推奨されます .replace
  
                (searchValue,replaceStr|function);//返された最初の文字がテキストに置き換えられます 新しい文字列
                .replaceAll(searchValue,replaceStr|function);//テキスト置換はすべての文字に一致します。
                .toLowerCase();//すべての英語の文字を小文字に変換します
                .toUpperCase();//すべての英語文字列を大文字に変換します.repeat
                ();//指定した文字数をコピーします
                .trim();//前後のスペースを削除します
    配列関数:
                indexOf(); 検索項目は配列内で最初に出現する位置は -1 を返しません
                Push(); 配列の末尾に 1 つ以上の項目を追加します
                Pop(); 配列の最後の項目を削除し、削除された項目を返します
                shift(); 削除データの最初の項目を取得し、削除された項目を返します
                unshift(); 配列の先頭に 1 つ以上の項目を挿入します
                sort(); 配列内の要素を並べ替えます
                lice(); 配列のフラグメントを取得し、配列を変更せずに返します元の配列
                splice(); 配列項目をインターセプト、削除、変更し、受け取った配列を返します 結果に影響します 元の配列を変更します concat(); 配列をマージします join(); 配列内の各項目をセパレータで接続
                し
                ます文字列を形成する
                reverse(); 配列を反転する
                map(); 配列内の各項目を走査し、新しい配列を返す
                filter(); 配列をフィルタリングする
                forEach(); 配列を走査する

call、apply、bind 差分
call(this が指すオブジェクト、パラメータ 1、パラメータ 2、パラメータ 3、...)
apply(this が指すオブジェクト、[パラメータ 1、パラメータ 2、パラメータ 3、...])
bind( this が指すオブジェクト、パラメータ 1、パラメータ 2、パラメータ 3、...) は
同じです。call
、apply、および binding はすべて関数プロトタイプのメソッドであり、
それらはすべて、関数が呼び出されます。
最初のパラメータは関数内で this が指すオブジェクトです。
違い:
呼び出しは関数のパラメータとして 2 番目のパラメータから開始され、パラメータはシングルパスで渡され、配列として渡すことはできません。パラメータ;
apply は関数のパラメータとして 2 番目のパラメータから開始され、2 番目のパラメータは関数の
すべてのパラメータを含む配列です。bind は
 関数のパラメータとして 2 番目のパラメータから開始され、パラメータは次のとおりです。単一のパスで渡され、パラメータの配列で渡すことはできません。
バインドされた関数内で this が指す関数を返します。

アロー関数を使用する際の注意点は何ですか?
(1) アロー関数の場合、これはウィンドウを指すのではなく、親を指します (ポインティングは変数です) (
2) 引数オブジェクトは使用できません
(3) コンストラクターとして使用することはできません。つまり、新しいコマンド使用できません。そうでない場合はエラーがスローされます。
(4) yield コマンドが使用できないため、アロー関数をジェネレーター関数として使用できません

オブジェクトの浅いコピーと深いコピーとは何ですか、その違いは何ですか、またオブジェクトの深いコピーを実装する方法は何ですか

浅いコピーは、オブジェクトへの参照のアドレスをコピーします。

ディープ コピーは、値が基本データ型になるまでオブジェクトを再帰的に走査し、その後コピーします。

古いオブジェクトと新しいオブジェクトの値を浅くコピーすると、相互に影響を及ぼします。ディープコピーは相互に影響を与えません

実装プロセス: deepcopy 関数を定義し、パラメーターを受け取り、

typeof を使用してパラメータがオブジェクトかどうかを判断します

次に、Array.isArray を使用して配列であるかどうかを判断し、配列である場合は空の配列が生成され、そうでない場合は空のオブジェクトが生成されます。

パラメータに対して for in ループを実行して、各項目がオブジェクトであるかどうかを判断します。オブジェクトである場合は、それ自体を呼び出して新しいオブジェクトに割り当てます。そうでない場合は、前に値を割り当てて、新しいオブジェクトを返します。

json..parse(Json.stringify(obj)) もオブジェクトと配列のディープコピーを実行できますが、関数をコピーすることはできません

おすすめ

転載: blog.csdn.net/H_hl2021/article/details/121751152