フロントエンド面接の質問の概要 (理論パート 3)

Domイベントの流れの順番は？イベント委任とは何ですか?

ページ上の要素をクリックすると、要素はドキュメントの下からレイヤーごとにキャプチャされます。次に、上向きに泡立ち、層ごとに刺激を与えます。

イベントデリゲーションは親要素にイベントを書き込むことであり、e.targetはイベントを取得する際の最小の要素、つまり選択された要素となります。したがって、選択した要素を e.target に従って操作できます。この方法では、イベントを各子要素にバインドする必要がなくなり、コードがより簡潔になります。

イベントプロキシ/イベント委任

js でのイベントのバブリング子要素上のイベントが親要素にバブリングすることはわかっています。

イベントプロキシは子要素に追加されるべきイベントですが、イベントをその親要素に追加しました。

次に問題があります。親レベルに非常に多くの子要素があるため、イベントがどの子要素に属するかをどのように区別するのでしょうか?

答えは、「イベントソース」は、イベントが発生するサブ要素であるイベントオブジェクトに記録されるということです。

互換性の問題があり、古い IE ではイベントソースは window.event.srcElement であり、他のブラウザではevent.target です。

イベント委任を使用する利点は何ですか?

1 つ目の利点は効率が高いことです。たとえば、for ループ内の子要素にイベントを追加する必要がありません。

2 番目の利点は、js によって生成された新しい子要素に新しいイベントを追加する必要がなく、プログラムロジックでより便利であることです。

閉鎖

クロージャは、別の関数のスコープ内の変数にアクセスできる関数です。MDN では
、クロージャは特別な種類のオブジェクトであると述べています。
クロージャのスコープチェーンには、それ自体のスコープ、外側の関数のスコープ、およびグローバルスコープが含まれます。クロージャに関する注意事項
通常、関数のスコープとそのすべての変数は、関数の実行が終了すると破棄されます。ただし、クロージャが作成された後は、クロージャが存在しなくなるまで、この関数のスコープは残ります。まず、クロージャには3 つの特徴が
あることがわかります。

①関数の入れ子関数
②関数は関数外のパラメータや変数を参照できる
③パラメータや変数はガベージコレクション機構によって再利用されない

アドバンテージ：

①関数内の変数のセキュリティを保護し、カプセル化を実現し、変数が他の環境に流れ込んで名前の競合が発生するのを防ぎます。 ②変数をメモリ上に保持し、キャッシュ
として使用できます（ただし、使いすぎるとメモリを消費するというデメリットもあります）
③匿名の自己実行関数によりメモリ消費量を削減できる
クロージャの欠点は、常駐メモリによりメモリ使用量が増加し、不適切な使用によりメモリリークが発生しやすいことです。
特別なタスクにクロージャが必要ない場合、クロージャが処理速度やメモリ消費量などのスクリプトのパフォーマンスに悪影響を与えるため、クロージャを必要としない他の関数内に関数を作成するのは賢明ではありません。

深いコピーと浅いコピー

コピーのレベルは異なります。深いコピーとは、データの各層の変更が元のオブジェクトと新しいオブジェクトに影響を与えないことを意味します。浅いコピーでは、最初の層の属性の変更のみが相互に影響しません。ディープデータの変更も相互に影響します。

浅いコピー: Object.assign
深いコピー: JSON.stringify および JSON.parse
2. JSON stringify および parse 処理の欠点は?

オブジェクト内に関数または未定義の属性がある場合、処理後に除外されます。
属性値がオブジェクトで、コンストラクターによって生成されたインスタンスオブジェクトの場合、オブジェクトのコンストラクターは破棄されます。3
. $.extend()

jqueyのextendメソッドを利用するとディープコピーだけでなくディープマージも実現できます。具体的な使い方

ディープコピー: $.extend({},targetObject) // targetObject はコピーされるオブジェクトです

Deep merge: $.extend(true,{},targetObject1,targetObject2) // 2 つのオブジェクトを深くマージして、新しいオブジェクトを返すことができます

差分アルゴリズム

diff アルゴリズムは、オブジェクトの新旧の仮想 DOM を比較する比較アルゴリズムとみなすことができます。名前が示すように、diff アルゴリズムは新旧の仮想 DOM の違いを見つけることができますが、diff アルゴリズムは新旧の仮想 DOM を更新するだけでなく、比較結果に従って実際の DOM も更新します。

鍵の役割は？キーが見つからない場合、またはキーが重複している場合はどうなりますか?

1. キーの機能は主に、仮想 DOM 内の特定のノードが同じノードであるかどうかをより効率的に比較し、仮想 DOM の効率的な更新を実現し、パフォーマンスを向上させることです。

2. Vue がパッチプロセス中に 2 つのノードが同じノードキーであるかどうかを判断するのに必要な条件です。リストのセットをレンダリングする場合、多くの場合キーが唯一の識別子であるため、キーが定義されていない場合、Vue は比較される 2 つのノードは、たとえそうでない場合でも同じであると考えられます。これにより、要素が頻繁に更新され、パッチプロセス全体が比較的非効率になり、パフォーマンスに影響を及ぼします。

3. 実際の使用では、リストのセットをレンダリングするときにキーを設定する必要があり、一意の識別子である必要があります。隠れたバグが発生する可能性があるため、配列インデックスをキーとして使用することは避けるべきです。 key 属性は、Vue がそれらを区別できるようにするためにも使用されます。そうでない場合、Vue はトランジション効果をトリガーせずに内部属性のみを置き換えます。

4. ソースコードからわかるように、Vue が 2 つのノードが同一かどうかを判断する際には、主に 2 つのノードのキーと要素の型を判断するため、設定されていない場合、その値は未定義となり、常に 2 つの同一のノードと見なされ、実行できるのは更新操作のみですが、これにより大量の DOM 更新操作が発生し、明らかにお勧めできません。

キーが重複するとレンダリングエラーが発生します

Vue におけるキーの役割

keynodes の特別なプロパティは主に、古いと新しいを比較するときに識別するために Vue の仮想 DOM アルゴリズムで使用されます VNodes。使用しない場合 key、Vue は動的要素を最小限に抑えるアルゴリズムを使用し、同じタイプの要素を可能な限り修正/再利用しようとします。を使用すると、の変更に基づいて要素の順序が並べ替え keyられ、存在しない要素が削除されます。keykey

同じ親要素を持つ子要素は一意である必要があります key。繰り返すと key レンダリングエラーが発生します。

配列の位置に要素を挿入する

キーを使用しない:
データを挿入した後、後続のすべての異なるデータを置き換える必要があり、最後にデータを 1 回挿入する必要があります。

キーを使用:
比較し、値が同じ場合は何もせず、挿入操作だけを実行します。

キーがない場合は新旧のタグが同じであることを比較し、タグが同じであれば同一と判断し強制更新を置き換えます

クロージャーとは何ですか? メリットとデメリットは？デメリットをどう解決するか？

クロージャとは: JS では、内部関数は外部関数の変数にアクセスできますが、外部関数はメモリ関数の変数の特性を操作できません。この機能をクロージャと呼びます。

クロージャの利点:

スコープを分離してプライベート変数を保護します。クロージャを使用するとローカル変数が存在しますが、それ以外の場合はすべてグローバル変数になります。
コールバックを使用して他の関数内で操作できるようになります。
変数はメモリ内に長期間存在し、メモリリサイクルメカニズムによってリサイクルされません。つまり、変数のライフサイクルを延長します。クロージャの欠点: 内部関数が外部関数を参照します
。関数変数、内部関数は内部メモリを使用します。メモリが解放されない場合、多すぎるとメモリリークが発生しやすくなります。

解決策: アカウントを自動的にキャンセルできない場合は、時間内に手動で回復する必要があります。使用後、関数の参照には null が割り当てられます。

es6の新機能

1. let と const
let は変数を宣言することを意味します。const とは定数を宣言するという意味で、
一度定義した定数は変更できません。オブジェクトを除いて、オブジェクトが指すアドレスは変更されていないためです。
const は、宣言時に値を割り当てる必要があります。
どちらもブロックスコープです。
2. テンプレート文字列
3. 分解
4. 関数のデフォルト値
5. スプレッド / レスト演算子、3 つのドット...
6. アロー関数
7. for of for
of はキーと値のペアの値をトラバースします。
for in はキーと値のペアをトラバースします。キーと値のペア
8、クラスクラス、プロトタイプチェーンの糖衣構文表現
9、インポートとエクスポート
import improt
export export デフォルト
10、Promise
Promise は、非同期リクエストをよりエレガントに処理するために使用されます。
11. Async/awaitは、
Promise よりもコールバック地獄を解決します。
12. シンボル、新しい基本タイプ
13. セットコレクションには、
あらゆる種類の一意の値が格納されます。つまり、コレクションに保存された要素は繰り返されません。配列のような構造。
let arrNew = new Set (重複排除される配列)

プロトタイプチェーンの理解

jsはプロトタイプチェーンのシミュレーションによりオブジェクト指向を実現しており、例えばコンストラクタをインスタンス化することで各オブジェクトに独自の排他的なプロパティを実装したり、クラスのプロトタイプにメソッドを代入することで全オブジェクトに共通のメソッドとなります。プロトタイプチェーン上のメソッドは、インスタンス化されるたびに割り当てられなくなりました。

これ

this は関数を呼び出すオブジェクトを指しますが、
this は実行前にそれが誰を表しているのかわかりません。js の this 点は不確かです。
定義とは何の関係もありませんが、実行には何らかの関係があります。ポイントの前にある this は誰です;
自己実行関数の this は
タイマーが書かれたときのウィンドウを表し、ウィンドウは省略できます; タイマーが実行されるとき、その中の this もウィンドウを表します;
thisはjsのキーワードで、関数の使い方によって、この値が変わります。
新しいキーワードがある場合、これは新しいオブジェクトを指します
。イベントの場合、これはイベントをトリガーしたオブジェクトを指します。

js の new 演算子は主に何をするのでしょうか?

空のオブジェクトを作成し、 this 変数はそのオブジェクトを参照し、同時に関数のプロトタイプを継承します。
this が参照するオブジェクトにプロパティとメソッドが追加されます。 this が参照する
新しく作成されたオブジェクトが追加され、最後に暗黙的に this を返します。

範囲とは何ですか

概念: コード(変数)が使用できる範囲がスコープです。主にプログラムの信頼性を向上させるためですが、名前の競合を減らすためでもあります。
グローバルスコープとローカルスコープ
グローバルスコープ: js ファイル全体を指します。グローバルで定義されたグローバル変数は、ローカルスコープや関数内で使用できます。直接代入を宣言しないものはグローバル変数とも呼ばれます
ローカルスコープ: 主に関数のスコープを指します関数の内部スコープもローカルスコープです
関数内で var で定義した変数をローカル変数と呼びますローカル変数を外部から取得することはできません。

イベントバブリングとは何ですか? イベントのバブリングを停止するにはどうすればよいですか?

概念: 子要素をクリックして親要素のイベントをトリガーすると、この現象はイベントバブリングと呼ばれます。つまり、イベントの底からバブルが浮かぶのと同じように、子要素から祖先要素にイベントが伝播します。水のevent.stopPropagation(); イベントの
バブリングを防ぎます

Domイベントの流れの順番は？イベント委任とは何ですか?

イベント委任の原則: 各子ノードに個別にイベントリスナーを設定せず、親ノードにイベントリスナーを設定し、バブリング原則を使用して各子ノードの設定に影響を与えます。

非同期、待機

async は非同期に実行され、結果として暗黙的に Promise を返す関数です。これはジェネレーター関数の糖衣構文であり、ジェネレーター関数が改良されました。

向上：

組み込みのエグゼキュータにより、 next() メソッドを手動で実行する必要はありません。

より良いセマンティクス

幅広い適用性: co モジュールは、yield コマンドの後にはサンク関数または Promise オブジェクトのみを続けることができる一方、async 関数の await コマンドの後には Promise オブジェクトとプリミティブ型の値 (数値、文字列、およびブール値) を続けることができることに同意します。ただし、これはすぐに解決される Promise オブジェクトに自動的に変換されます)。

戻り値は Promise です。これは、Generator 関数によって返される Iterator オブジェクトよりも便利で、then() メソッドを使用して直接呼び出すことができます。

async は結果関数として暗黙的に Promise を返すため、await の背後にある関数が実行されると、await がマイクロタスク (Promise.then はマイクロタスク) を生成することが簡単に理解できます。

非同期待機の実装原則:

非同期関数が呼び出されると、
非同期関数で Promise オブジェクト (キー) が返される場合があります。非同期関数には await 式が存在する場合があります。await 式により、式内の Promise が返されるまで、async 関数の実行が一時停止されます。解決され、非同期コードで待機した後も実行を継続し、結果を返します。
Promise オブジェクトが返されるため、その戻り値を最外層で直接取得することはできません。したがって、元のメソッドを確実に使用できます: この Promise オブジェクトを処理するための then() チェーン原則: async/await 関数は、実際には構文上
の
シュガー
async / Await は Promise に基づいて実装されています。async 関数は実際に Promise をラップしています。await
の戻り値は Promise オブジェクトです。await の背後にあるコードを Promise.then() に置くだけです。

async await と Promise の違い
async/await で発生する例外はキャッチできませんので、例外をキャッチするには try/catch を使用する必要がありますawait の背後にある Promise オブジェクトがリジェクトになると、 async
全体が中断されます。
await が使用され、catch で処理できる JSON.parse エラー

// 当调用一个 async 函数时，会返回一个 Promise 对象 (关键)
// async/await 出现的异常是无法捕获的，需要借助 try/catch 来捕获异常
function sleep(flag) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if(flag){
                resolve('success')
            }else{
                reject('Error')
            }
        }, 2000)
    })
}

// async await 的用法
async function fn(flag) {
    try {
        let result = await sleep(flag)
        return result
    } catch (err) {
        return err
    }
}
// 返回的 a,b 是一个 promise 对象
var a = fn(true)
var b = fn(false)
a.then((res)=>{
    console.log(res) // success
})
b.then((res)=>{
    console.log(res) // Error
})