ES6 面接の質問の概要

1. インタビュアー: var、let、const の違いについて話してください。

ES6 以前は var を使用して変数を作成し、それ以降は let/const を使用して変数を作成しました

var、let、const の違いは、次の 5 つの点に拡張できます。

1. 変動プロモーション

var で宣言された変数には変数昇格があります。つまり、変数は宣言前に呼び出すことができ、値は未定義です。

let と const には変数の昇格はありません。つまり、宣言された変数は宣言後に使用する必要があります。そうでない場合はエラーが報告されます。

2. 一時的なデッドゾーン

var には一時的なデッドゾーンはありません。let と const の間には一時的なデッドゾーンがあり、変数を宣言するコード行が出現した場合にのみ、変数を取得して使用できます。

3. ブロックレベルのスコープ

var にはブロックスコープがありません

let と const はブロックレベルのスコープを持つ

4. ステートメントを繰り返す

var を使用すると変数を繰り返し宣言できます

let と const は同じスコープ内で変数を繰り返し宣言することはできません

5. 宣言された変数を変更する

var と let can

const は読み取り専用の定数を宣言します。一度宣言した定数の値は変更できません

6. 使用する

const を使用できる場合はできる限り const を使用し、それ以外のほとんどの場合は let を使用し、var の使用を避けます。

2. インタビュアー: ES6 ではどのような拡張機能が配列に追加されますか?

まず、スプレッド演算子の適用

ES6 は、要素記号を展開することで、配列をカンマ区切りのパラメーター シーケンスに変換します。

console.log(...[1,2, 3])      // 1 2 3

スプレッド演算子を構造化代入と組み合わせて配列を生成できます。

const[first, ...rest] = [1, 2, 3, 4, 5];
first   // 1        rest   // [2, 3, 4, 5]

2 番目に、コンストラクターの新しいメソッド

1、配列.from()

2 種類のオブジェクトを実際の配列に変換します: 配列のようなオブジェクトと反復可能なオブジェクト

arrayLike は配列のようなオブジェクトです

letarr2 = Array.from(arrayLike);       //['a', 'b', 'c']

2、Array.of()

値のセットを配列に変換するために使用されます

Array.of(3,11, 8)                   // [3,11,8]

3. インスタンスオブジェクトの新しいメソッド

1. copyWithin(): 指定された場所にあるメンバーを他の場所にコピーし (元のメンバーは上書きされます)、現在の配列を返します。

2. find() は、最初の適格な配列メンバーを見つけるために使用されます。

3. include(): 配列に指定された値が含まれているかどうかを判断するために使用されます。

1. flat() : 元のデータに影響を与えずに配列を平坦化し、新しい配列を返します。

[1,2, [3, 4]].flat()        // [1, 2, 3, 4]

第四に、欠員の配列

配列の空きは、配列の特定の位置に値がないことを意味し、ES6 は明示的に空きを未定義に変換します。

5. 選別の安定性

sort() を安定した並べ替えアルゴリズムにデフォルトで設定します。

3. インタビュアー: ES6 ではどのような拡張機能がオブジェクトに追加されますか?

1. 属性の略称

ES6では、オブジェクトのキー名と対応する値の名前が等しい場合、省略可能であり、メソッドも省略可能です。

2 番目に、属性名の式

ES6 では、リテラルを使用してオブジェクトを定義するときに式を括弧で囲むことができます

let lastWord = 'last word';
consta = {
  'first word': 'hello',
  [lastWord]: 'world'
};

a['first word'] // "hello"
a[lastWord] // "world"
a['last word'] // "world"

3、スーパーキーワード

this キーワードは常に、関数が配置されている現在のオブジェクトを指します。ES6 は、現在のオブジェクトのプロトタイプ オブジェクトを指す、別の同様のキーワード super を追加します。

4番目、スプレッド演算子の適用

分割代入では、読み取られていないトラバース可能なプロパティが指定されたオブジェクトに割り当てられます。

let{ x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x// 1    y // 2    z // { a: 3, b: 4 }

5、属性トラバーサル

for...in: オブジェクト自身および継承された列挙可能なプロパティをループします。

Object.keys(obj): オブジェクト自体のすべての列挙可能なプロパティ (Symbol プロパティを除く) (継承されたプロパティを除く) のキー名を含む配列を返します。

六、オブジェクトの追加方法

Object.is() : 2つの値が等しいかどうかを厳密に判定

1 つは +0 が -0 に等しくないということ、もう 1 つは NaN がそれ自体に等しいということです

Object.assign()

Object.assign() メソッドはオブジェクトをマージするために使用されます。ターゲット、ソース 1、ソース 2 はすべてオブジェクトです。

Object.assign(ターゲット,ソース1,ソース2);

注: Object.assign() メソッドは浅いコピーであり、同じ名前の属性が見つかると置き換えられます。

4. インタビュアー: ES6 ではどのような拡張機能が機能に追加されましたか?

1.パラメータ

ES6では関数のパラメータにデフォルト値を設定できる

関数の仮パラメータはデフォルトで宣言され、let または const を使用して再度宣言することはできません。

2、属性

関数の長さ属性: length は、デフォルト値を指定しないパラメータの数を返します。

name 属性: 関数の関数名を返します。

3. 範囲

パラメータのデフォルト値が設定されると、関数が宣言されて初期化されるときに、パラメータは別のスコープを形成します。

4.ストリクトモード

関数パラメータでデフォルト値、構造化代入、または拡張演算子を使用している限り、関数を明示的に厳密モードに設定することはできません。そうでない場合は、エラーが報告されます。

5. アロー関数

「矢印」(=>) を使用して関数を定義します

関数本体内の this オブジェクトは、それが使用されるオブジェクトではなく、それが定義されるオブジェクトです。

5. インタビュアー: ES6 の Set と Map の新しいデータ構造をどのように理解していますか?

1.セット

Setはコレクションと呼ばれるデータ構造、Mapはディクショナリと呼ばれるデータ構造です。

Set は es6 の新しいデータ構造で、配列に似ていますが、そのメンバーの値は一意であり、繰り返される値はありません。一般的にこれをセットと呼びます。

Set のインスタンスを追加、削除、変更、確認する方法:

add() :値を追加し、Set 構造自体を返します。インスタンス内に既に存在する要素を追加する場合、セットは追加を処理しません

delete():値を削除し、削除が成功したかどうかを示すブール値を返します。

has():値が Set のメンバーであるかどうかを判断するためのブール値を返します。

clear():すべてのメンバーをクリアします。戻り値はありません

Set インスタンスを走査するメソッドは次のとおりです。

1.keys(): キー名のトラバーサーを返します。

2.values(): キー値のトラバーサーを返します。

3.entrys(): キーと値のペアのトラバーサーを返します。

4. forEach(): コールバック関数を使用して各メンバーを走査します

拡張演算子とSet構造体の組み合わせで配列や文字列の重複排除を実現

letarr = [3, 5, 2, 2, 5, 5];

letunique = [...新しい Set(arr)]; // [3、5、2]

2. 地図

マップ タイプはキーと値のペアの順序付きリストであり、キーと値の両方を任意のタイプにすることができます。

Map 構造のインスタンスには、次のプロパティと、追加、削除、変更、確認のための操作メソッドがあります。

size 属性: size 属性は、Map 構造体のメンバーの合計数を返します。

set(): キー名 key に対応するキー値を value に設定し、Map 構造全体を返します。

get(): get メソッドは、キーに対応するキー値を読み取ります。キーが見つからない場合は、未定義を返します。

has(): has メソッドは、キーが現在の Map オブジェクト内にあるかどうかを示すブール値を返します。

delete(): delete メソッドはキーを削除し、true を返します。削除に失敗した場合は false を返します

clear():clear メソッドはすべてのメンバーをクリアし、戻り値はありません。

Map 構造は、3 つのトラバーサー生成関数と 1 つのトラバース メソッドをネイティブに提供します。

key(): キー名のトラバーサーを返します。

value(): キー値のトラバーサーを返します。

entrys(): すべてのメンバーのトラバーサーを返します。

forEach(): マップのすべてのメンバーを走査します。

6. インタビュアー: ES6 のジェネレーターをどのように理解していますか? 使われるシーンは？

Generator 関数は通常の関数ですが、次の 2 つの特徴があります。

1. 関数キーワードと関数名の間にアスタリスクがあります

2. yield 式は、関数本体内でさまざまな内部状態を定義するために使用されます。

function*helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}
var hw  =  helloWorldGenerator();

Generator 関数は、Symbol.iterator プロパティを持つトラバーサー オブジェクトを返し、それを自分自身に返します。

ジェネレーター関数によって返されるトラバーサー オブジェクトの状態は、yield キーワードによって一時停止できます。

次のメソッドを介してのみ、次の内部状態がトラバースされます。

hw.next()    // { value: 'hello', done: false }
hw.next()    // { value: 'world', done: false }
hw.next()    // { value: 'ending', done: true }
hw.next()    // { value: undefined, done: true }

Generator 関数は Iterator オブジェクトを返すため、...of をトラバースすることもできます。

非同期ソリューション

yield 式は関数の実行を一時停止でき、次のメソッドを使用して関数の実行を再開できるため、ジェネレーター関数は非同期タスクの同期に非常に適しています。

非同期/待機

async 関数は Promise オブジェクトを返します。関数が実行されると、await が発生すると、最初に戻ります。トリガーされた非同期操作が完了した後、関数本体内の次のステートメントが実行されます。これは、スレッドを放棄し、非同期関数本体から飛び出すこととして理解できます。Async は本質的に Generator の文法上の砂糖であり、Generator 関数を自動的に実行することに相当します。

Async は使用方法がより簡潔であり、同期形式で非同期コードを記述することが非同期プログラミングの究極のソリューションです。

7. インタビュアー: ES6 の Promise をどのように理解していますか? 使われるシーンは？

Promise は非同期プログラミングのソリューションであり、コールバック地獄の問題を解決します

非同期操作を解決する Promise の利点:

1. チェーン操作によりコーディングの難易度が軽減 2. コードの可読性が大幅に向上

Promise オブジェクトには 3 つの状態しかありません

1. 保留中 (進行中) 2. 完了 (成功) 3. 拒否 (失敗)

Promise オブジェクトは、Promise インスタンスを生成するために使用されるコンストラクターです。

constpromise = new Promise(function(resolve, accept) {} );

Promise コンストラクターは、2 つのパラメーターがresolveとrejectである関数をパラメーターとして受け入れます。

解決関数の役割は、Promise オブジェクトの状態を「未履行」から「成功」に変更することです。

拒否関数の機能は、Promise オブジェクトの状態を「未履行」から「失敗」に変更することです。

Promise によって構築されたインスタンスには次のメソッドがあります。

1、それから() 2、捕まえる() 3、最後に()

then はインスタンスの状態が変化したときのコールバック関数、最初のパラメータは解決された状態のコールバック関数、2 番目のパラメータは拒否された状態のコールバック関数です

then メソッドは新しい Promise インスタンスを返すため、Promise をチェーンで記述することができます。

catch()メソッドは、.then(null,拒否) または .then(未定義,拒否) のエイリアスで、エラー発生時のコールバック関数を指定するために使用されます。

Promise オブジェクトのエラーには「バブル」という性質があり、キャッチされるまで逆方向に渡されます。

finally() メソッドは、Promise オブジェクトの最終状態に関係なく実行される操作を指定するために使用されます。

Promise コンストラクターには次のメソッドが存在します。

1. Promise.all() メソッドは、複数の Promise インスタンスを新しい Promise インスタンスにラップするために使用されます。

2. Promise.race() メソッドは、複数の Promise インスタンスを新しい Promise インスタンスにラップします。

3.solve() は既存のオブジェクトを Promise オブジェクトに変換します

4. Promise.reject(reason) メソッドは、ステータスが拒否された新しい Promise インスタンスも返します。

3. 利用シーン

画像の読み込みを Promise として記述します。読み込みが完了すると、Promise の状態が変わります。

8. インタビュアー: ES6 のプロキシをどのように理解していますか? 使われるシーンは？

プロキシは、基本的な操作 (属性の検索、割り当て、列挙、関数呼び出しなど) のインターセプトとカスタマイズを実現するために、オブジェクトのプロキシを作成するために使用されます。

Proxy は、Proxy インスタンスを生成するために使用されるコンストラクターです。

varproxy = 新しいプロキシ(ターゲット、ハンドラー)

target は、インターセプトされるターゲット オブジェクト (ネイティブ配列、関数、または別のプロキシを含む任意のタイプのオブジェクト) を表します。

通常、ハンドラーは属性として関数を使用し、各属性の関数はさまざまな操作を実行するときのプロキシ p の動作を定義します。

ハンドラインターセプトの属性としては以下のようなものがあります(3つを仮記憶)

1. get(target, propKey, レシーバー): オブジェクトのプロパティの読み取りをインターセプトします。

2. set(target, propKey, value, レシーバー): オブジェクトのプロパティの設定をインターセプトします。

3. has(target, propKey): プロキシ内の propKey の操作をインターセプトし、ブール値を返します。

9. インタビュアー: ES6 のモジュールをどのように理解していますか? 使われるシーンは？

モジュール (Module) は、個別に名前を付け、特定の機能を独立して実行できるプログラム ステートメントの集合です。

モジュール化の役割により、コードの抽象化、コードのカプセル化、コードの再利用、依存関係の管理が可能になります。

JavaScript プログラムをモジュール化するためのメカニズム。

1. CommonJs 2. AMD (代表的なもの: require.js) 3. CMD

モジュール関数は主に 2 つのコマンドで構成されます。

1.export: モジュールの外部インターフェイスを指定するために使用されます。

2. import: 他のモジュールが提供する関数をインポートするために使用されます。

露出は個別露出、統合露出、デフォルト露出に分けられます。

エクスポート コマンドを使用してモジュールの外部インターフェイスを定義した後、他の JS ファイルはインポート コマンドを通じてこのモジュールをロードできます。

使用するシーン

1. Vue コンポーネント 2. React コンポーネント

いくつかの複雑なアプリケーションを完了する場合を含め、それらをさまざまなモジュールに分割することもできます

10. インタビュアー: ES6 の Decorator をどのように理解していますか? 使われるシーンは？

Decorator、つまりデコレータ、デコレータモードとは、元のクラスを変更せず、継承を利用することなくオブジェクトの機能を動的に拡張する設計理論です。

Decorator には 2 つの利点があります。

1. コードの可読性が強化され、デコレータ名がコメントに相当

2. 元のコードを変更せずに元の機能を拡張する

Docorator 変更オブジェクトには次の 2 種類があります。

1.クラス装飾

2. クラス属性の装飾

知らせ

関数には変数宣言があるため、デコレーターを使用して関数を変更することはできません。

いくつかの一般的なデコレータ

@antobind: autobind デコレーターは、メソッド内の this オブジェクトを元のオブジェクトにバインドします。

@readonly: 読み取り専用デコレーターにより、プロパティまたはメソッドが書き込み可能になりません。

@deprecate: 非推奨または非推奨のデコレーターは、メソッドが非推奨になることを示す警告をコンソールに表示します。