最も一般的な面接の質問と回答のJavaScript年2019

2019年が経過し、そして2020年にインタビューのピークが再び。2019年調査と面接経験した後、最も一般的な面接の質問の次の統計の一部。

キャスト内のJavaScript（強制）それは何を意味するのでしょうか？

難易度：簡単

JavaScriptでは、二つの異なる間の変換は、組み込み型キャストと呼ばれます。明示的および暗黙的：JavaScriptで強制変換の2つの形式があります。

これは、明示的なキャストの例です。

var a = "42";
var b = Number( a );
a;                // "42" -- 字符串
b;                // 42 -- 是个数字!

これは、暗黙のキャストの例です。

var a = "42";
var b = a * 1;    // "42" 隐式转型成 42 
a;                // "42"
b;                // 42 -- 是个数字!

JavaScriptの範囲（スコープ）で、それは何を意味するのでしょうか？

難易度：簡単

JavaScriptでは、すべての関数は、独自のスコープを持っています。スコープは、基本的には、変数の集合とどのようにアクセスするためにこれらの変数は名前によってルールです。唯一の機能コードに変数関数スコープにアクセスします。

変数名の同じ範囲は一意である必要があります。スコープが別のスコープにネストすることができます。スコープが別のスコープ内にネストされている場合、コード最も内側のスコープは、別の変数のスコープにアクセスすることができます。

平等はJavaScriptを解釈します。

難易度：簡単

JavaScriptは厳密な比較やキャストの比較があります。

• 二つの値は、遷移が強制的にできない場合に等しいかどうかを確認するために厳密な比較（例えば===）。
• 抽象比較（例えば==）は、二つの値が強制的に遷移させる場合に等しいかどうかをチェックします。

var a = "42";
var b = 42;
a == b;            // true
a === b;        // false

いくつかの単純なルール：

• 比較される値のいずれかが代わり==の=== trueまたはfalse、使用することができる場合。
• 任意の値は、これらの特定の値と比較された場合（0、「」、または[]）に代えて、使用する=== ==。
• 他の例では、安全に==を使用することができます。それだけでなく、安全ですが、また、多くの場合、それは、コードを簡素化することができ、かつ、コードの可読性を高めるため。

コールバック関数であり、簡単な例を提供するものについて説明します。

難易度：簡単

コールバック関数が他の関数にパラメータとして渡され、終了後に特定の操作を実行します。コールバック関数の簡単な例である。ここで、印刷機能は、コンソールに特定の操作の後に完全なメッセージです。

function modifyArray(arr, callback) {
  // 对 arr 做一些操作
  arr.push(100);
  // 执行传进来的 callback 函数
  callback();
}

var arr = [1, 2, 3, 4, 5];

modifyArray(arr, function() {
  console.log("array has been modified", arr);
});

何を「厳格な使用」んでしょうか？

難易度：簡単

あなたはより安全なJavaScriptコードを記述することができ、厳密な最上部に表示され、またはJavaScriptコードの機能を使用しています。あなたが誤ってグローバル変数を作成した場合、それはあなたが間違った道を投げる警告する通過します。たとえば、次の手順では、エラーがスローされます。

function doSomething(val) {
  "use strict"; 
  x = val + 10;
}

これは、xが定義されていないため、エラーをスローし、その割り当てのグローバルスコープの値を使用し、それを許さない厳格な使用されます。このエラーのため、以下の小さな修正：

function doSomething(val) {
  "use strict"; 
  var x = val + 10;
}

JavaScriptを解釈nullとundefined。

難易度：簡単

nullとundefined：JavaScriptの基礎をなすの2種類があります。彼らは、異なる意味を表します。

• それは物事を初期化されていません。undefined
• 現在お取り扱いできませんもの。null
• typeof演算は同じではありません

この関数は、書き込み動作を行うことができます。

難易度：簡単な

var addSix = createBase(6);
addSix(10); // 返回 16
addSix(21); // 返回 27

クロージャはcreateBaseの関数に渡された値を格納するために作成することができます。返された内部関数が外部関数で作成された、関数は、関数がbaseNumberで可変である本実施形態では、外部変数にアクセスすることができ、内部の閉鎖となります。

function createBase(baseNumber) {
  return function(N) {
    // 我们在这里访问 baseNumber，即使它是在这个函数之外声明的。
    // JavaScript 中的闭包允许我们这么做。
    return baseNumber + N;
  }
}

var addSix = createBase(6);
addSix(10);
addSix(21);

値と型を説明するJavaScript

難易度：簡単

JavaScriptが値を入力、ない型変数。JavaScriptが組み込み型以下の機能を提供します。

• ストリング
• 数
• ブーリアン
• ヌル和未定義
• オブジェクト
• 記号（ES6が追加されます）
• BIGINT

イベントは、バブリングし、それを停止する方法を説明しますか？

難易度：簡単

イベントバブリングは、最も深くネストされた要素トリガーイベント、親要素にネストされたシーケンス・トリガダウンし、このイベントを指します。

（IE 9の下方））するevent.stopPropagation（すなわちevent.cancelBubbleをバブリングまたは使用してイベントを予防するための方法。

使用何JavaScriptでキーワードを聞かせて？

難易度：簡単

宣言された変数より機能レベルに加えて、ES6はまた、コードブロック内のletキーワードを使用することができ（{..}）変数を宣言しました。

数が整数であるかどうかを確認する方法は？

難易度：簡単

番号を確認する10進数または整数である、あなたは非常に単純な方法を使用することができ、それはさらにいくつかのよりかどうかを確認するために、剰余1になることです。

function isInt(num) {
  return num % 1 === 0;
}

console.log(isInt(4)); // true
console.log(isInt(12.2)); // false
console.log(isInt(0.3)); // false

生命維持（すぐに関数式を呼び出す）とは何ですか？

難易度：簡単

これは、関数式（すぐ-呼び出される関数式）すぐに呼ば生命維持を呼びかけています。関数がすぐに作成された後に実行されます。

(function IIFE(){
    console.log( "Hello!" );
})();
// "Hello!"

JavaScriptで2つのオブジェクトを比較するには？

難易度：穏健派

彼らは参照一致しており、実際に参照されたコンテンツをチェックしないかどうかを二つの非元の値、（配列や機能を含む）のような二つのオブジェクト、及び=== ==比較チェックのために。

例えば、デフォルトでは、アレイはカンマで、文字列に遷移に強制され、アレイのすべての要素が互いに接続されています。==比較した場合、したがって、同じコンテンツを有する二つの配列は同じではありません。

var a = [1,2,3];
var b = [1,2,3];
var c = "1,2,3";

a == c;        // true
b == c;        // true
a == b;        // false

乞食深いコピーバージョン

var obj1 = {
  a: 1,
  b: 2,
  c: 3
}
var objString = JSON.stringify(obj1);
var obj2 = JSON.parse(objString);
obj2.a = 5;
console.log(obj1.a);  // 1
console.log(obj2.a); // 5

オブジェクトの比較の深さのために、あなたはライブラリを深等しく使用することができ、または、独自の再帰的な比較アルゴリズムを達成するために。

ES5とES6それとの違いを説明しますか？

難易度：穏健派

• ECMAScriptの5（ES5）：ECMAScriptの第5版、2009年に標準化しました。この規格は、完全にすべての最新ブラウザで実装されています。
• ECMAScriptの6（ES6）やECMAScriptの2015（ES2015）：第6版のECMAScript、2015年に標準化しました。この規格は、部分的に、最新のブラウザに実装されています。

特定のは、先生のブログルアンYifengを見ることができます

「閉鎖」でどのようなJavascriptをはい？例えば？

難易度：穏健派

クロージャが定義されている（親関数と呼ばれる）別の関数の関数であり、宣言親関数定義および範囲内でアクセスすることができます。

クロージャは、変数3つのスコープにアクセスできます。

• 独自のスコープの変数宣言で、
• 親関数内で宣言された変数。
• グローバルスコープの変数宣言で。

例：画像安定化機能拡張を実現する||

JavaScriptでプライベート変数を作成するには？

難易度：穏健派

JavaScriptで変更することはできませんプライベート変数を作成するには、ローカル変数の関数として、それを作成する必要があります。この関数が呼び出された場合でも、あなたは関数の外の変数にアクセスすることはできません。例えば：

function func() {
  var priv = "secret code";
}

console.log(priv); // throws error

この変数にアクセスするには、我々は補助機能プライベート変数への復帰を作成する必要があります。

function func() {
  var priv = "secret code";
  return function() {
    return priv;
  }
}

var getPriv = func();
console.log(getPriv()); // => secret code

モードをプロトタイピング説明してください。

難易度：穏健派

プロトタイプモデルは、新しいオブジェクトを作成するために使用することができますが、それは非初期化されたオブジェクトの作成ではなく、オブジェクトの値のプロトタイプオブジェクト（またはサンプルオブジェクト）を使用して初期化されます。プロトタイプモードもアトリビュートモードと呼ばれています。

ビジネスオブジェクトを初期化するときプロトタイプモードが有用であり、デフォルト値のデータベースオブジェクトの値は、ビジネスにマッチ。デフォルト値のプロトタイプオブジェクトは、新しく作成されたビジネス・オブジェクトにコピーされます。

古典的なプログラミング言語はめったにプロトタイプモデルを使用していないが、プロトタイプJavaScriptの新しいオブジェクトの構築における言語とそのプロトタイプとしてこのモードを使用するとき。

与えられた文字列が同型であるかどうかを決定します。

難易度：穏健派

2つの文字列が同型であれば、Aに登場するすべての文字列は、文字列Bを取得するために、別の文字に置き換えることができ、文字の順序は保持されなければなりません。各文字に対応する文字列には、各文字列Bのいずれかでなければなりません

• 論文タイトルはtrueを返します。
• 卵と悲しいfalseを返します。
• DGGと真のリターンを追加します。

isIsomorphic("egg", 'add'); // true
isIsomorphic("paper", 'title'); // true
isIsomorphic("kick", 'side'); // false

function isIsomorphic(firstString, secondString) {

  // 检查长度是否相等，如果不相等, 它们不可能是同构的
  if (firstString.length !== secondString.length) return false

  var letterMap = {};

  for (var i = 0; i < firstString.length; i++) {
    var letterA = firstString[i],
        letterB = secondString[i];

    // 如果 letterA 不存在, 创建一个 map，并将 letterB 赋值给它
    if (letterMap[letterA] === undefined) {
      letterMap[letterA] = letterB;
    } else if (letterMap[letterA] !== letterB) {
      // 如果 letterA 在 map 中已存在, 但不是与 letterB 对应，
      // 那么这意味着 letterA 与多个字符相对应。
      return false;
    }
  }
  // 迭代完毕，如果满足条件，那么返回 true。
  // 它们是同构的。
  return true;
}

「Transpilingは、」あなたは何を意味するのですか？

難易度：穏健派

新しく追加された言語の構文については、ポリフィルすることはできません。したがって、より良いアプローチは、新しいコードより古い同等のコードに変換できるツールを使用することです。このプロセスは一般に変換（transpiling）として知られている、トランス+意味をコンパイルしています。

通常は、ビルドプロセス、または類似リンターminifierに追加されました（transpiler）コンバータます。多くの偉大なコンバータの選択があります。

• バベル：ES6 +は、ES5に変換しました
• Traceur：ES6、ES7はES5に変換

原則として、「この」キーワードがあるとは何ですか？いくつかのコード例を提供してください。

難易度：穏健派

JavaScriptでは、これは、より正確には、現在の方法の関数として、オブジェクトを参照する方法「所有者」または、によって実行される機能の多くあります。

function foo() {
    console.log( this.bar );
}

var bar = "global";

var obj1 = {
    bar: "obj1",
    foo: foo
};

var obj2 = {
    bar: "obj2"
};

foo();             // "global"
obj1.foo();        // "obj1"
foo.call( obj2 );  // "obj2"
new foo();         // undefined

次のコードを実行できるように、Arrayオブジェクトにカスタムメソッドを追加する方法？

難易度：穏健派

var arr = [1, 2, 3, 4, 5];
var avg = arr.average();
console.log(avg);

JavaScriptはクラスベースではありませんが、プロトタイプベースの言語です。各オブジェクトが別のオブジェクト（すなわち、プロトタイプオブジェクト）にリンクされ、この手段は、継承されたプロトタイプオブジェクトおよび方法。それはプロトタイプがnullのオブジェクトではありません達するまでは、各オブジェクトのプロトタイプチェーンを追跡することができます。私たちは、Arrayプロトタイプを変更することで、グローバルなArrayオブジェクトにメソッドを追加する必要があります。

Array.prototype.average = function() {
  // 计算 sum 的值
  var sum = this.reduce(function(prev, cur) { return prev + cur; });
  // 将 sum 除以元素个数并返回
  return sum / this.length;
}

var arr = [1, 2, 3, 4, 5];
var avg = arr.average();
console.log(avg); // => 3

次のコードの出力結果は何ですか？

難易度：穏健派

0.1 + 0.2 === 0.3

このコードの出力は、内部のフロートによって引き起こされる偽、です。0.1 + 0.2 = 0.3と正確に等しくない場合、実際の結果は0.30000000000000004あります。この問題に対する一つの解決策は、場合小数点算術演算結果が丸められています。

書き込みではなぜ、ライトキーコンポーネントリアクト/ Vueのプロジェクト、その役割は何ですか？

難易度：穏健派

重要な役割は、迅速差分アルゴリズム実行速度上昇の差分に対応するノードを見つけることです。

VUE差分アルゴリズムは、に基づいて、更新ノードに古いものと新しい仮想ノードを比較するために反応しています。関数diffのVUEで。私たちは、最初のdiffのアルゴリズムを見ることができます。

新しいノードのキーに従って古いノードのキー配列に比較する結果の交差-比較が新しいノードと古いノードの頭部と尾部がない場合とき対照的に、交差点、ここで（対応する古いノードを見つけるために、キーに対応=>インデックスマップマップ）。あなたがそれを見つけていない場合は、新しいノードです。何のキーが存在しない場合、それは対応する古いノードを見つけるために探してトラバースの方法を採用します。マップのマッピングの一種は、他では見つけることが横断されます。対照的に。スピードマップが速くマップ。

パートソースVUEは、次のとおりです。

// vue 项目  src/core/vdom/patch.js  -488 行
// oldCh 是一个旧虚拟节点数组，
if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
       idxInOld = isDef(newStartVnode.key)
         ? oldKeyToIdx[newStartVnode.key]
         : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)

map関数を作成します。

function createKeyToOldIdx (children, beginIdx, endIdx) {
 let i, key
 const map = {}
 for (i = beginIdx; i <= endIdx; ++i) {
   key = children[i].key
   if (isDef(key)) map[key] = i
 }
 return map
}

探しトラバーサル：

// sameVnode 是对比新旧节点是否相同的函数
function findIdxInOld (node, oldCh, start, end) {
   for (let i = start; i < end; i++) {
     const c = oldCh[i]

     if (isDef(c) && sameVnode(node, c)) return i
   }
}

分析[ '1'、 '2'、 '3']地図（のparseInt）

難易度：穏健派

一見すると、このトピックの私の心のうち答えは[1、2、3]ですが、本当の答えがあるときに、[1、NaNのは、NaN]。

まず、私たちは最初のパラメータは、機能をマップするコールバックすることを思い出してみましょう：

  var new_array = arr.map(function callback(currentValue[, index[, array]]) { // Return element for new_array }[, thisArg])

このコールバックは、次の3つのパラメータの合計を受け取ることができます

• 前記現在の要素を表す第1のパラメータが処理され、第2のパラメータは、要素のインデックスを表します。
• parseIntは、文字列、整数になるためにベースを指定した文字列を解析するために使用されます。
• parseInt（文字列、基数）は、第2ベースが解決として表される2つのパラメータ、処理すべき第1の代表値（文字列）を、受け取ります。

これら二つの機能を理解した後、私たちはどのような動作をシミュレートすることができます。

• 場合のparseInt（「1」、0）//基数0であり、パラメータ文字列は、ベースとしてのプロセス10に従って、先頭に「0X」と「0」ではありません。この時間は、1を返します。
• parseInt（「2」、1）//塩基が1（2進数の1）の数値であり、最大値は2以上、それが解決することができない、のNaN 3を返します。
• parseInt番号（3「」、2）//ベース2（バイナリ）で表される、最大値が3未満、それは解決できないし、NaNを返します。

最終結果は、[1は、NaN、NaNに]であるので、マップ機能は、配列を返します。

画像安定化およびスロットリングとは何ですか？違いは何ですか？どのように達成するために？

難易度：穏健派

シェイク

高周波イベントが再びトリガされたn秒場合はn秒以内高周波トリガ・イベントは、一度だけ再計算時間を関数の後。

アイデア：トリガ・イベントがメソッドを呼び出す前に遅延をキャンセルしているたびに：

乞食版：

function debounce(fn) {
  let timeout = null; // 创建一个标记用来存放定时器的返回值
  return function () {
    clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
    timeout = setTimeout(() => { 
      // 然后又创建一个新的 setTimeout
      // 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
      fn.apply(this, arguments);
    }, 500);
  };
}
function sayHi() {
  console.log('防抖成功');
}

var inp = document.getElementById('inp');
inp.addEventListener('input', debounce(sayHi)); // 防抖

スロットリング

高周波イベントがトリガされますが、一度だけn秒以内に、それはスロットルは、周波数の関数を実行希薄ます。

アイデア：現在の実行を待っているトリガイベント遅延機能があるかどうか、すべての裁判官。

乞食版：

function throttle(fn) {
  let canRun = true; // 通过闭包保存一个标记
  return function () {
    if (!canRun) return; // 在函数开头判断标记是否为 true，不为 true 则 return
    canRun = false; // 立即设置为 false
    setTimeout(() => { // 将外部传入的函数的执行放在 setTimeout 中
      fn.apply(this, arguments);
      // 最后在 setTimeout 执行完毕后再把标记设置为 true(关键) 表示可以执行下一次循环了
      // 当定时器没有执行的时候标记永远是 false，在开头被 return 掉
      canRun = true;
    }, 500);
  };
}
function sayHi(e) {
  console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi));

のセット、地図、WeakSetとWeakMapを区別するために導入？

難易度：穏健派

セットする

• 疾患の唯一のメンバーは繰り返しません。
• [値、値]、キーは、キー名（または唯一のキーなしキー名）と一致しています。
• あなたがメソッドをトラバーサルすることができます追加、削除、持っています。

WeakSet

• メンバーが対象となります。
• メンバーは弱参照され、ガベージコレクションのメカニズムを再利用することができますDOMノードを保存するために使用することができ、それはメモリリークが発生する可能性はありません。
• あなたは、削除、メソッドが追加しましたトラバースすることはできません。

地図

• キーと値のペア本質的に同様のセットのコレクションです。
• トラバースすることができ、多くの方法は、データの様々なフォーマットで変換することができます。

WeakMap

• 唯一のキーとして他の種類の値を受け入れない、（ヌル以外）ほとんどのキーのオブジェクトを受け付けます。
• キーが弱参照は、任意のキー、キー尖ったオブジェクトがガベージコレクトされてもよいとすることができる、キー名が無効です。
• ない横切ることができる、方法を取得、セット、持っている、削除します。

深さ優先探索と幅優先トラバーサルに導入、どのように？

難易度：穏健派

深さ優先探索（DFS）

深さ優先探索（深さ優先-検索）、その木に沿ってツリーノードの深さ、限り探索木の枝を横断、検索アルゴリズムです。すべてのエッジは、発信ノード発見エッジノードvにピースバック超えるノードvを模索してきたとき。このプロセスは、未検出のノードがある場合、すべてのノードが完了探索されるまで、ノードは、ソースノードと未知の繰り返しとして選択されたソースノードが、現在までのすべての他のノードが発見されるまで継続します。

パスがないまで簡単に言えば、DFSは責任が戻って、次のパスに進み、その後、最後のノードまでグラフ内のノードから開始すべきであるということですが、などそれはすべてのノードに到達するまでトレースし、そしてれます。

DFSソートテーブルトポロジー図に対応して生成されてもよい、トポロジカルソートテーブルは、最大経路問題など多くの問題を、解決することができます。通常、ヒープデータ構造は、DFSアルゴリズムを達成するのを支援するために使用しました。

注：ブラインド検索属しDFSの深さは、検索パスは最短経路である、また、特定のルートを検索して、それをですが、検索によって数字を選択することができるか、パスを参照することを保証するものではありません。

ステップ：

• アクセス頂点は、V。
• 順次隣接ノードからアクセス可能なV、及び図の深さ優先トラバーサルはない;および通信経路の頂点が訪問されるまでV数字を有します。
• この時間が頂点にアクセスする方法はない場合、すべての頂点がこれまでに訪問されるまで、それはビュー、再深さ優先探索の頂点からアクセスされていません。

実現

Graph.prototype.dfs = function() {
   var marked = []
   for (var i=0; i<this.vertices.length; i++) {
       if (!marked[this.vertices[i]]) {
           dfsVisit(this.vertices[i])
       }
   }

   function dfsVisit(u) {
       let edges = this.edges
       marked[u] = true
       console.log(u)
       var neighbors = edges.get(u)
       for (var i=0; i<neighbors.length; i++) {
           var w = neighbors[i]
           if (!marked[w]) {
               dfsVisit(w)
           }
       }
   }
}

幅優先トラバーサル（BFS）

幅優先トラバーサル（幅優先-検索）は、すべてのノードが訪問されている場合、アルゴリズムは終了するが、幅に沿ってグラフのノードを横断、ルートからもBFSに属し盲目的に検索し、達成を支援するために用いられる一般的なキューデータ構造されていますBFS。

BFSは、ノードから開始し、その宛先ノードへの可能な限り近いアクセスしてみてください。本質的に、図では、このトラバースは層ごと、最初のチェックノードに最も近い第一層を移動させ、その後徐々に元のノードから最も遠い層まで移動します。

ステップ：

• キューを作成し、キュー内のノードを起動します。
• キューが空でない場合、キューは、最初のノードから取り出し、それが宛先ノードであるか否かを検出します。
  • ターゲット・ノード、検索の終わり、その結果が返された場合、
  • そうでない場合、すべてのバイトがキューポイントに追加されているテストされていません。
• キューが空の場合は、抽選と宛先ノードでは示されていない、トラバーサルが終了されます。

実現

Graph.prototype.bfs = function(v) {
   var queue = [], marked = []
   marked[v] = true
   queue.push(v) // 添加到队尾
   while(queue.length > 0) {
       var s = queue.shift() // 从队首移除
       if (this.edges.has(s)) {
           console.log('visited vertex: ', s)
       }
       let neighbors = this.edges.get(s)
       for(let i=0;i<neighbors.length;i++) {
           var w = neighbors[i]
           if (!marked[w]) {
               marked[w] = true
               queue.push(w)
           }
       }
   }
}

次のコードの業績を入力してください：

難易度：穏健派

async function async1() {
   console.log('async1 start')
   await async2()
   console.log('async1 end')
}
async function async2() {
   console.log('async2')
}
console.log('script start')
setTimeout(function () {
   console.log('settimeout')
})
async1()
new Promise(function (resolve) {
   console.log('promise1')
   resolve()
}).then(function () {
   console.log('promise2')
})
console.log('script end')

対象の性質は、setTimeoutを、約束、注文非同期のawaitを実装し、実行し、JSのイベントループに関連する問題を検討することです。

答え

script start
async1 start
async2
promise1
script end
async1 end
promise2
settimeout

重複したデータが最終的に昇順非反復配列を得るために、前記平坦化および除去のアレイ

難易度：穏健派

Array.from(new Set(arr.flat(Infinity))).sort((a,b)=>{ return a-b})

JSの非同期ソリューション開発だけでなく、長所と短所

難易度：穏健派

コールバック関数（コールバック）

setTimeout(() => {
   // callback 函数体
}, 1000)

短所：コールバック地獄、トライキャッチでエラーをキャッチすることはできません返すことはできません。

根本的な問題は、コールバック地獄ということです。

• オーダーの欠如：コールバック地獄に起因する困難を試運転し、脳の考え方が一致していません。
• ネストされた関数の存在を結合、変更の対象と、それは実際に、すなわち、（逆方向制御）を全身に影響を与えます。
• ネストされた機能が多すぎる、困難なエラーを処理します。

ajax('XXX1', () => {
   // callback 函数体
   ajax('XXX2', () => {
       // callback 函数体
       ajax('XXX3', () => {
           // callback 函数体
       })
   })
})

約束する

約束は、コールバックを生じる問題を解決することを目的とします。

約束は、私たちが戻ると、その後、Promise.resolve（）パッケージとなります結果を返し、その後、新たに約束した後たびに返されるチェーンのコールを、実現しています。

長所：コールバック地獄の問題を解決します。

ajax('XXX1')
 .then(res => {
     // 操作逻辑
     return ajax('XXX2')
 }).then(res => {
     // 操作逻辑
     return ajax('XXX3')
 }).then(res => {
     // 操作逻辑
 })

発生器

特徴：あなたは、関数の実行を制御することができ、それはco.jsライブラリを使用して使用することができます。（つまり、ライブラリのKOA早期使用）

function *fetch() {
   yield ajax('XXX1', () => {})
   yield ajax('XXX2', () => {})
   yield ajax('XXX3', () => {})
}
let it = fetch()
let result1 = it.next()
let result2 = it.next()
let result3 = it.next()

非同期/のawait

非同期は、最終的な解決策が非同期である待っています。

利点は以下のとおりです。コードはクリアされ、その後、コールバック地獄の問題に対処し、約束のチェーンのような多くのことを書いていません。

短所：使用のawaitに依存せずに、非同期動作する複数の低性能につながる場合は、同期コードに変換のawait非同期コード。

async function test() {
 // 以下代码没有依赖性的话，完全可以使用 Promise.all 的方式
 // 如果有依赖性的话，其实就是解决回调地狱的例子了
 await fetch('XXX1')
 await fetch('XXX2')
 await fetch('XXX3')
}

次の例の用途は、外観を待ちます。

let a = 0
let b = async () => {
 a = a + await 10
 console.log('2', a) // -> '2' 10
}
b()
a++
console.log('1', a) // -> '1' 1

ジェネレータを達成上記内部のawait説明は、実際に、それはのawait糖衣構文約束、および自動実行ジェネレータの内部実装と結合された発電機です。あなたはそれを共同に精通している場合、実際には、次の構文糖を達成することができます。

遂に

1. ただ、いじめのポイントではありません好き！
2. 国民の関心番号「フロントエンドアドバンスコース」へようこそ真剣フロント、高度一緒に勉強しています。