就職活動3次試験 - JSの面接の質問を浅いものから深いものまで

序文

明日は面接、夕方からjsの整理です。勝つことを願っています！！！

CSS面接は動かせる：就活2次編～CSSの難所に1記事で挑戦できる～

---

仮説

1.jsシングルスレッド

本質的な違い: プロセスはオペレーティング システムのリソース割り当ての基本単位であるのに対し、スレッドはプロセッサ タスクのスケジューリングと実行の基本単位です。

包含関係: プロセスには少なくとも 1 つのスレッドがあり、スレッドはプロセスの一部であるため、スレッドは軽量プロセスまたは軽量プロセスとも呼ばれます。

JS がシングルスレッドである理由は主に JS の目的に関係しており、JS は主にブラウザとユーザー間の対話を実現し、DOM を操作します。

JS がマルチスレッドになるように設計されている場合、あるスレッドが DOM 要素を変更し、別のスレッドが DOM 要素を削除したい場合、ブラウザは何をすべきかわかりません。複雑な状況を避けるために、JS は単一スレッドです。ネジ付き。

2.jsのデータ型

js には、数値、文字列、未定義、シンボル、ブール値、Null、オブジェクトの7 つのデータ型があります。

このうち、Symbol は ES6 で導入された新しい基本データ型で、一意の値を表すために使用されます。

3 つのプリミティブ型 (数値、文字列、ブール値) の値は、特定の条件下で、プリミティブ型の「ラッパー オブジェクト」であるオブジェクトに自動的に変換されます。

3.jsのメモリリーク

理解: 無駄なメモリが占​​有されたままで、解放したり返却したりすることができません。ひどい場合には、無駄なメモリが増加し、システム全体がフリーズしたりクラッシュしたりすることがあります。

原因:
予期しないグローバル変数、
DOM 要素が空になっても参照がまだ存在する、
クロージャー、
忘れられたタイマー。

最適化:
グローバル変数は使用前に宣言されます。
クロージャの過度の使用を避け、
タイマーとイベント リスナーのクリアに注意してください。

4.jsマクロタスクとマイクロタスク（イベントループ機構）

同期タスクとは、メインスレッドで実行するためにキューに入れられたタスクを指し、前のタスクが完了した場合にのみ次のタスクを実行できます。

非同期タスクとは、メインスレッドには入らず「タスクキュー」に入るタスクのことで、メインスレッドのタスクが実行される場合にのみ、「タスクキュー」内のタスクがメインスレッドに入って実行されます。

非同期タスクはマクロタスクとマイクロタスクに分けられます。同じスコープのマイクロタスク キューはマクロタスク キューよりも先に実行され、マイクロタスク キューにタスクがある限り、マクロタスク キューはマイクロタスク キューが完了するまで待機してから実行されます。

一般的なマクロ タスク: settimeout setInterval スクリプト (最も外側のスクリプト タグ)。

一般的なマイクロタスク: Promise (非同期待機)。

5.js スコープとスコープ チェーン

スコープ:
ES6 より前では、js にはグローバル スコープと関数スコープのみがありました。ES6 以降、js にはブロックレベルのスコープがあります。変数や関数が使用できる範囲をスコープといいます

グローバルスコープ:

在任何地方都能访问到的对象

ローカルスコープ:

又称函数作用域，仅供函数内部访问

変数のスコープ:

分为全局变量和局部变量。其中，全局变量使在全局作用下的变量，局部变量是在局部作用域下的变量。

関数内で宣言されていないが割り当てられている変数がグローバル変数でもある場合、特別なメモリが必要になることに注意してください。

グローバル変数はメモリに保存され、ブラウザを閉じたときにのみ破棄されるため、より多くのメモリ リソースが使用されますが、ローカル変数はプログラムの実行後に破棄されるため、内部リソースが節約されます。したがって、ローカル変数を使用することを好みます。

スコープチェーン：内部関数が外部関数の変数にアクセスし、どの値を取るかを連鎖的に探索する方式を採用しており、この構造をスコープチェーンと呼びます。

詳細については、「JS のスコープとスコープ チェーンを理解するための 1 つの記事」を参照してください。

6.jsクロージャ

関数が関数の親以上のスコープ変数にアクセスする場合、関数はクロージャです。

        //闭包指有权访问另一个函数作用域中变量的函数
        //fun这个函数作用域，访问了fn中的局部变量num，则产生闭包
        function fn() {
    
    
            var num = 10;
            function fun() {
    
    
                console.log(num);
            }
            fun();
        };
        fn(); 

クロージャの機能: 関数の内部変数にアクセスし、それらをメモリに保持します。

クロージャーが満たす条件:
スコープへのアクセス、関数のネスト、およびスコープ内で呼び出されること。

クロージャの特性:
クロージャ関数によってアクセスされる親関数および上位関数のローカル変数 (例のローカル変数 i など) は常にメモリ内に存在し、JS のガベージ コレクション メカニズムによってリサイクルされません。
クロージャ関数は、他の関数内の変数へのアクセスを実装します。(関数内の変数には外部からアクセスできません。クロージャはこの回避策によってアクセスを実現します。)

欠点: メモリリーク。

7. ES6 の新機能

let、const join、構造化代入、テンプレート文字列、アロー関数、展開演算子、

クラス class では、ES5 のような継承の実装にプロトタイプ チェーンは使用されなくなりましたが、クラスの概念が導入されました。

Promise は、地獄のコールバックを解決し、従来のコールバックよりも柔軟な新しい非同期ソリューションです。async と await を Promise と組み合わせて使用​​することもできます (コードの読みやすさを向上させるため)。

シンボルはプリミティブ型です。シンボルは、オプションの名前パラメータを受け取るシンボル関数を呼び出すことによって生成され、関数によって返されるシンボルは一意です。

プロキシ プロキシは、プロキシ (Proxy) を使用してオブジェクトの操作を監視し、対応する処理を実行できます。

Set は配列に似たデータ コレクションであり、順序付けされておらず、挿入と削除が高速で、要素の繰り返しがなく、検索速度が高速です。

Map はオブジェクトに似たデータ構造です。オブジェクトとの違いは、そのキーは任意の型にできるのに対し、オブジェクトは文字列型と記号型のみを使用できることと、Map のストレージの関連付けがより強力であることです。

8. プロトタイプとプロトタイプチェーン

プロトタイプ:
プロトタイプは、オブジェクト インスタンスのいくつかのパブリック プロパティとメソッドを定義するオブジェクト テンプレートです。

プロトタイプチェーン:

8.ディープコピー

浅いコピー: コピーのみ
深いコピー: 深いコピーは複数のレイヤーをコピーし、各レベルのデータがコピーされます

9. js アンチシェイクとスロットリング

アンチシェイク: イベントがトリガーされるとタイマーが実行され、タイマーが期限切れになった後、タイマーは正常にトリガーされます。これにより、イベントが頻繁に発生することがなくなります。

特徴: 頻繁にトリガーしますが、実行されるのは 1 回だけです。

スロットル: イベントのトリガー頻度を減らし、一部のイベントを選択的に実行します。時々トリガーされます。

10. js のこれは次のことを指します

1. スクリプト内のこれはウィンドウを指します。

2. アロー関数の this は、上位環境と下位環境の this を指します。

3. オブジェクト プロパティの this は、オブジェクトの外部のコンテキストの this を指します。オブジェクト メソッド (通常の関数) の this は、現在のオブジェクトを指します (メソッドを実行する人に関係なく、this は誰を指します)。

11. これが指す呼び出し、適用、バインドを変更します。

call: fn.call が呼び出されると、fn の this ポイントが thisArg に渡される最初のパラメータに変更され、次のパラメータが fn に渡され、関数 fn が直ちに実行されます。

apply: この点を変更し、すぐに fn を実行します。違いは、パラメータの受け渡しの形式が異なることです。apply は 2 つのパラメータを受け取ります。最初のパラメータは指す this オブジェクトで、2 番目のパラメータは配列です。配列内の要素は展開され、次の形式で fn に渡されます。 fnのパラメータ。

bind: fn.bind の機能は this のポイントを変更するだけであり、fn をすぐに実行するのではなく、this のポイントを変更した後に fn を返します。実行するには、bind(thisArg, arg1, arg2, arg3, ...)() を呼び出す必要があります。bind のパラメータの受け渡しは call の場合と同じです。

12. イベントストリーム

イベント フローとは、ページからイベントを受信する順序を指します。イベント フロー モデルは、バブリング イベント フローとキャプチャ イベント フローの 2 つの部分に分かれています。

キャプチャ: キャプチャ フェーズは、ターゲット要素を見つけるプロセスを指します。この検索プロセスは、最大のドキュメント オブジェクトから HTML、次に本文、ターゲット要素に至るまで続きます。

ターゲットステージ;

バブリング：対象要素のイベントの実行終了後、対象要素から親要素へ遷移します。。。本文、HTML、ドキュメントまでのプロセスがバブリング段階です。

イベントのバブリングを停止します:
e.stopPropagation();

vueでの.stopと.preventが実現可能

13. DOM と BOM

DOM: Web ページのドキュメント オブジェクト タイプ、メソッドおよびインターフェイス、
BOM: ブラウザ オブジェクト タイプ、ブラウザ操作を処理するためのメソッドおよびインターフェイス。

14. let、const、var の違い

var: 変数のプロモーションがあり、最初に宣言してから使用できます。変数は複数回宣言でき、後続の宣言で以前の宣言が上書きされます。Var はグローバル変数にすることもできます。Let と const は両方ともローカルです。 let: 変数プロモーションはありません
。 let が変数を宣言する前に、変数は
const: const を使用して読み取り専用変数を宣言できません。宣言後は値を変更できません (参照型のアドレスは変更できませんが、値は変更できます); 複合タイプは属性を変更できます。

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

外観が異なります。
通常の関数は名前を持つことができますが、アロー関数は匿名関数でなければ
なりません。通常の関数はコンストラクタで使用できますが、アロー関数は使用できません
。定義されたオブジェクトを指します。
アロー関数にはプロトタイプとスーパーがありません。 。

16. コールバック関数とコールバック関数の問題

この関数をパラメータとして別の関数に渡し、この関数が必要なときにこの関数を run() にコールバックします。

コールバック関数は、パラメータとして他のコードに渡される実行可能なコード セグメントであり、その機能は、必要なときにこの (コールバック関数) コードを便利に呼び出すことです。(パラメータとして別の関数に渡されます。パラメータとしてのこの関数はコールバック関数です)

理解: 関数はパラメータとして別の関数に渡すことができます。

特徴: すぐには実行されず、クロージャとなります。

問題: this は最も近い関数の呼び出し元を指しており、コールバック関数の this に名前がないという問題はアロー関数で解決できます。

コールバック関数を使用する理由: JavaScript はイベント駆動型言語です。これは、JavaScript は応答を待っているため現在の実行を停止せず、他のイベントをリッスンしながら実行を継続することを意味します。

17. クロスドメインブラウザ

クロスドメインをブロックする理由: 同一オリジン ポリシー (ネットワーク セキュリティの問題を解決するため)。

クロスドメインの解決: jsonp、クロスドメイン リソース共有、リクエスト ヘッダー。

18. 新しい役割

まず空のオブジェクトを作成し、次に this がそのオブジェクトを指すようにすると、this はオブジェクトのプロトタイプを継承します。

プロパティとメソッドもこのオブジェクトに追加されます。

19. ジェイソン

Json はデータ交換フォーマットです。

JSON文字列をJSONオブジェクトに変換する

let obj = JSON.parse(str);

JSON 对象转换为 JSON 字符串

let obj = JSON.stringify(str);

20. HTTP の一般的なステータス コード

200: 正常;
4xx: 400、リクエスト構文エラーなどのクライアント エラーを示します。403 は通常、クロスドメインです。404 は通常、リソースが見つかりません。5xx:
サーバー エラー、リクエストの実行中にエラーが発生しました。

21.約束

es6 では、ヘル コールバック問題を解決するために導入されています。これはチェーンで呼び出すことができ、非常に柔軟です。

ペディング、解決 (成功)、および拒否 (失敗) の 3 つの状態があります。

Promise.finally()finally メソッドは、Promise の状態に関係なく、Promise 内の関数を実行するために使用されます。

Promise.all() と promise.race()：

Promise.all() の役割は、非同期タスクのグループを受け取り、タスクを並列に実行し、すべてのタスクが実行された後にコールバックを実行することです。Promise.all() は Promise 配列のセットを渡し
、すべての Promise 状態が成功した場合にのみ返されます。成功、失敗がある限り、失敗した Promise ステータスが返されます。

Promise.race() の機能は、非同期タスク群を受け取り、それらのタスクを並列実行することであり、最初に完了したタスクのみが保持され、他のタスクは実行されますが、実行結果は破棄されます。 .race() は
Promise の配列に渡され、返される結果は最初に満たされた Promise オブジェクトの結果によって決まります。

Promise 自体は同期ですが、then と catch は非同期です。

22.アヤックス

1. 创建 ajax 对象
const ajax = new XMLHttpRequest();

2. 创建 ajax 请求 (设置请求的方法和请求地址)  open
ajax.open('get', 'http://localhost:8080/server?a=100&b=200');

3. 发送请求  send
ajax.send();

4. 处理服务器端返回的结果  onreadystatechange事件  
   readystate：五个值 0 1 2 3 4，为4的时候代表数据已经接收完成
   status：状态码  200 为成功
   if(ajax.readystate === 4 && ajax.status >= 200 && ajax.status < 300) {
    
    
   		表示成功，可以写相应的逻辑了
   }

23.for-inとfor-of

どちらも配列を反復処理するために使用されます。