Las mayoría de las preguntas comunes de la entrevista y respuestas JavaScript Año 2019

2019 años ha pasado, y en 2020 el pico de la entrevista de nuevo. Después de 2019 el estudio y la experiencia de entrevista, algunas de las siguientes estadísticas de la mayor cantidad de preguntas de la entrevista común.

JavaScript en moldes (coerción) ¿Qué significa?

En JavaScript, la conversión entre dos diferentes tipos predefinidos son llamados moldes. Hay dos formas de transformación forzada en JavaScript: explícitos e implícitos.

Este es un ejemplo de un conversiones explícitas:

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

Este es un ejemplo de un conversiones implícitas:

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

JavaScript en su alcance (scope) ¿Qué significa?

En JavaScript, cada función tiene su propio ámbito. Ámbito de aplicación es básicamente una colección de variables y cómo acceder a estas variables descartan por su nombre. Sólo en el código de función para acceder al ámbito de la función variable.

El mismo ámbito de los nombres de variable debe ser único. Un ámbito de aplicación se puede anidar en otro ámbito de aplicación. Si un ámbito está anidado en otro ámbito, el ámbito más interno de código puede acceder a otro ámbito de las variables.

Igualdad interpretar JavaScript.

JavaScript tiene una comparación estricta y arroja la comparación:

comparación estricta (por ejemplo ===) para comprobar si los dos valores son iguales en un caso en el que la transición no puede ser forzado;
comparación abstracta (por ejemplo ==) para comprobar si los dos valores son iguales en el caso de permitir transición forzada.

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

Algunas reglas simples:

Si cualquiera de los valores que se comparan puede ser verdadera o falsa, el uso === lugar de ==;
Si cualquier valor se compara estos valores específicos (0, "", o []), el uso === lugar ==;
En otros casos, se puede utilizar con seguridad ==. No sólo es seguro, sino también, en muchos casos, se puede simplificar el código, y para mejorar la legibilidad del código.

Explicar lo que es una función de devolución de llamada, y proporciona un ejemplo sencillo.

La función de devolución de llamada se pasa como un parámetro a otra función, y para llevar a cabo ciertas operaciones después de la finalización. Aquí está un ejemplo sencillo de una función de devolución de llamada, la función de impresión es el mensaje completo después de ciertas operaciones a la consola.

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);
});

¿Qué significa "use strict" es?

uso parece estrictas en la parte superior, o la función de código JavaScript que pueden ayudarle a escribir código JavaScript más seguro. Si por error se crea una variable global, pasará a advertir a tirar por el camino equivocado. Por ejemplo, el siguiente procedimiento generará un error:

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

Se generará un error porque x no está definido, y utiliza un valor del alcance global de su asignación, y el uso estricto no lo permite. Los siguientes pequeñas correcciones para este error:

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

null y undefined interpretar JavaScript.

Hay dos tipos de JavaScript subyacente: nula y sin definir. Ellos representan diferentes significados:

No ha sido inicializados cosas:undefined
las cosas no disponibles actualmente:null
typeof no son los mismos

Función puede realizar una operación de escritura.

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

Un cierre puede ser creado para almacenar el valor que se pasa a la función de createBase. función interna devuelto fue creado en una función externa, la función se convierte en un cierre interno, que funciona pueden acceder a variables externas, en la presente forma de realización es variable en baseNumber.

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

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

JavaScript explicar el valor y el tipo

JavaScript mecanografiado valor, pero no hay variables de tipo. JavaScript proporciona los siguientes tipos predefinidos:

cuerda
número
booleano
nula 和 indefinido
objeto
símbolo (se añaden ES6)
Empezando

burbujeante evento y explicar cómo detenerlo?

burbujeo de eventos se refiere a la más gatillo elemento profundamente anidada un evento, entonces este evento por el anidado gatillo secuencia en el elemento padre.

Un método para prevenir el burbujeo evento o usando event.cancelBubble que event.stopPropagation () (por debajo de IE 9).

dejar que la palabra clave en JavaScript de qué sirve?

Además del nivel de función de la variable declarada, ES6 también le permite utilizar la palabra clave let en el bloque de código ({..}) declaró variable.

Cómo comprobar si un número es un número entero?

Compruebe el número es decimal o entero, se puede utilizar de una manera muy sencilla, que es ser de módulo 1, para ver si hay más de unos pocos.

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

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

Lo que es IIFE (llame inmediatamente a la expresión de la función)?

Se llama a la función de la expresión (Expresión Función Inmediatamente-Se invoca) IIFE referirse de inmediato. La función se ejecuta inmediatamente después de haber sido creado:

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

Cómo comparar dos objetos en JavaScript?

Para dos valor no original, tal como dos objetos (incluyendo matrices y funciones), y === == comprobación de comparación si son sólo un partido de referencia, y no comprueba el contenido en realidad hace referencia.

Por ejemplo, por defecto, la matriz se verá obligado a transición en una cadena, con comas y todos los elementos de la matriz están conectados entre sí. Por lo tanto, las dos matrices que tienen el mismo contenido no será igual en comparación ==:

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

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

Mendigos versión de copia profunda

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

Para la profundidad relativa del objeto, puede utilizar profundo igual a la biblioteca, o para lograr su propio algoritmo de comparación recursiva.

Explicar la diferencia entre la ES5 y ES6 ella?

ECMAScript 5 (ES5): ECMAScript 5ª edición, estandarizado en 2009. Esta norma se ha aplicado plenamente en todos los navegadores modernos.
ECMAScript 6 (ES6) o ECMAScript 2015 (ES2015): 6ª edición de ECMAScript, estandarizado en 2015. Esta norma se ha aplicado parcialmente en la mayoría de los navegadores modernos.

Específica puede ver el blog del profesor Ruan Yifeng

Lo Javascript en "cierre" Sí? Por ejemplo?

El cierre es una función de otra función (llamada la función madre) se define, y se puede acceder en las definiciones de funciones declaración matrices y alcance.

Los cierres pueden tener acceso a las variables tres ámbitos:

En la declaración de variables de su propio ámbito de aplicación;
Las variables declaradas en la función de los padres;
En la declaración de variables de ámbito global.

Ejemplo: para lograr la imagen de expansión de funciones de estabilización ||

Cómo crear variables privadas en JavaScript?

Para crear una variable privada no puede ser modificado en JavaScript, es necesario crearla como una función de las variables locales. Incluso si esta función se llama, no se puede acceder a la variable fuera de la función. Por ejemplo:

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

console.log(priv); // throws error

Para acceder a esta variable, es necesario crear un retorno a las variables privadas de función auxiliar.

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

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

Por favor, explique el modo de creación de prototipos.

modelo prototipo se puede utilizar para crear un nuevo objeto, pero no es la creación de un objeto no inicializado, pero utilizando el objeto prototipo (o un objeto de muestra) del valor del objeto se inicializa. modo de prototipo también se denomina modo de atributos.

modo de prototipo es útil cuando se inicializa el objeto de negocio, y el valor de la base de datos valor predeterminado objetos que coincida con el negocio. El objeto prototipo valor predeterminado se copia en un objeto de negocio de nueva creación.

El lenguaje de programación clásica rara vez se utiliza el modelo prototipo, sino como un lenguaje Javascript prototipo en la construcción de un nuevo objeto y su prototipo cuando se utiliza este modo.

La determinación de si una determinada cadena es isomorfo.

Si las dos cadenas son isomorfos, entonces la cadena de todos los personajes que aparecen en A puede ser sustituido por otro carácter, para obtener una cadena B, y la secuencia de caracteres debe mantenerse. Una cadena que corresponde a cada personaje tiene que ser uno de cada cadena de caracteres B.

papel y título volverán realidad.
huevo y vuelve tristes falsa.
DGG y devoluciones añadir cierto.

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" ¿Qué quiere decir?

Para la sintaxis del lenguaje que acaba de agregar, no puede ser polyfill. Por lo tanto, un mejor enfoque es utilizar una herramienta que se puede convertir en código equivalente más antiguo que el nuevo código. Este proceso se conoce comúnmente como una transformación (transpiling), está transformando + compilar significado.

Por lo general, se le Converter (transpiler) fue introducido en el proceso de construcción, o borra de Minifier similar. Hay muchos grandes convertidor seleccionable:

Babel: La ES6 + convierte en ES5
Traceur: El ES6, ES5 ES7 convierte en

¿Cuál es el principio de "esto" es la palabra clave? Por favor proporcionar algunos ejemplos de código.

En JavaScript, esto es la cantidad de la función realizada por el "dueño" o, más precisamente, se refiere al objeto como una función del método actual.

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

Cómo agregar un método personalizado para el objeto Array, para que pueda ejecutar el siguiente código?

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

JavaScript no está basada en la clase, pero es un lenguaje basado en prototipos. Esto significa que cada objeto está vinculado a otro objeto (es decir, el objeto prototipo), heredado objeto prototipo y método. Puede hacer un seguimiento de la cadena de prototipo de cada objeto hasta que alcanza el prototipo no es objeto nulo. Tenemos que añadir un método al objeto global de matriz mediante la modificación del prototipo de matriz.

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

¿Cuál es el resultado del código siguiente salida es?

0.1 + 0.2 === 0.3

Salida de este código es falsa, la cual es causada por un flotador interno. 0.1 + 0.2 no es exactamente igual a 0,3, el resultado real es ,30000000000000004. Una solución a este problema es el resultado redondeado cuando las operaciones aritméticas decimales.

¿Por qué componente clave de escritura en la escritura React / Vue proyecto, ¿cuál es su papel?

El papel clave es encontrar rápidamente el nodo correspondiente en el diff ejecución del algoritmo de aumento de velocidad diff.

diff algoritmos se basan en vue y reaccionan para comparar los viejos y nuevos nodos virtuales a los nodos de actualización. En vue de la función diff. Podemos mirar primero algoritmos de diferenciación.

En contraste, cuando cruce, cuando la cabeza y la cola del nodo antiguo con el nuevo nodo cuando no hay comparación cruzada de los resultados se compara con la matriz de edad clave de nodo de acuerdo con una clave nueva de nodo, para encontrar el nodo de edad correspondiente (en este caso corresponde a una tecla => el mapa de índice). Si no lo encuentra que es un nuevo nodo. Y si no hay ninguna clave, se adopta una forma de atravesar en busca de encontrar vieja nodo correspondiente. Una especie de cartografía de un mapa, el otro es atravesada de encontrar. Por el contrario. mapa mapa de velocidad más rápido.

Parte Fuente vue sigue:

// 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)

Crear una función de mapa:

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
}

Recorrido en busca de:

// 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
   }
}

Analytical [ '1', '2', '3']. Mapa (parseInt)

A primera vista, este tema cuando, fuera de mi mente la respuesta es [1, 2, 3], pero la verdadera respuesta es [1, NaN, NaN].

En primer lugar, recordemos que el primer parámetro de devolución de llamada mapa de funciones:

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

Esta devolución de llamada puede recibir un total de tres parámetros

En donde el primer parámetro que representa el elemento actual es procesada, y el segundo parámetro representa el índice del elemento.
Parseint se utiliza para analizar la cadena, cadena de caracteres base especificada para convertirse en un entero.
parseInt (cadena, radix) recibe dos parámetros, un primer valor representativo (cadenas de caracteres) a tratar, expresada como la segunda base de resuelto.

Después de comprender estas dos funciones, podemos simular lo que la operación;

Cuando parseInt ( '1', 0) // radix es 0, y la cadena de parámetros no es con "0x" y "0" al principio, de acuerdo con el proceso 10 como la base. Esta vez devuelve 1;
parseInt ( '2', 1') // base es 1 (1 binario) números, el valor máximo es inferior a 2, no se puede resolver, devuelve NaN3;
número parseInt representado por (3 '', 2) // base 2 (binario), el valor máximo es menor que 3, no se puede resolver, devuelve NaN.

mapear función devuelve una matriz, por lo que el resultado final es [1, NaN, NaN].

¿Qué es la estabilización de la imagen y el límite? ¿Cuál es la diferencia? ¿Cómo lograr?

Agitar

Después de los eventos de disparo de alta frecuencia dentro de n segundos funcionan sólo una vez, si el evento n segundos de alta frecuencia se activa de nuevo, el tiempo de re-cálculo;

Idea: Cada vez que eventos de activación se cancelan retraso antes de llamar al método:

edición mendigo:

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)); // 防抖

estrangulación

evento de alta frecuencia se activa, pero sólo una vez en n segundos, se va a diluir el acelerador realizan una función de la frecuencia.

Ideas: todos los jueces si existe una función de evento de disparo de retardo en espera de ejecución.

edición mendigo:

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));

Introducido para distinguir Conjunto, mapa, WeakSet y WeakMap de?

Conjunto

El único miembro de la enfermedad no se repite;
[Valor, valor], la clave es consistente con el nombre de la clave (o la única clave, no nombre de clave);
Puede recorrido de métodos: añadir, eliminar, lo ha hecho.

WeakSet

Los miembros están sujetos;
Los miembros son referencias débiles, pueden ser reciclados mecanismo de recolección de basura se puede utilizar para guardar el nodo DOM, no es probable que cause una pérdida de memoria;
No se puede atravesar, los métodos de añadir, borrar, ha.

Mapa

Es una colección de pares de valores clave conjunto esencialmente similar;
Puede atravesar, de muchas maneras, se pueden convertir en una variedad de formatos de datos.

WeakMap

Acepta sólo los objetos de la mayoría de las teclas (excepto el nulo), no acepta los valores de otros tipos como llaves;
Las claves son referencias débiles, puede ser cualquier tecla, objetos puntiagudos clave puede ser el recolector de basura, entonces el nombre de la clave no es válido;
No se puede travesía, los métodos get, set, tiene, eliminar.

Introducido en el recorrido en profundidad y en amplitud de recorrido, ¿cómo?

recorrido en profundidad (DFS)

Primero en profundidad de recorrido (Profundidad-primera-búsqueda), es un algoritmo de búsqueda, atravesando la profundidad del nodo del árbol a lo largo de su árbol, en cuanto a la rama de un árbol de búsqueda. Cuando todos los bordes han estado explorando nodo v sobre la pieza de la espalda al nodo originario nodo de borde descubrimiento v. Este proceso continúa hasta que el nodo de origen se han descubierto hasta la fecha todos los demás nodos, si hay nodos no detectados, en el que se selecciona un nodo como nodo fuente y de repetición sin descubrir hasta que todos los nodos están explorando completado.

En pocas palabras, el DFS es que debe empezar la autoría de un nodo en el gráfico hasta que el último nodo, y luego volver y continuar a la siguiente ruta se traza hasta que llega a todos los nodos, y así sucesivamente, hasta que no hay camino.

DFS puede ser generado correspondiente a la figura topológica mesa de selección, la tabla de clasificación topológica puede resolver muchos problemas, tales como problema de trayectoria máxima. Por lo general, la estructura de datos del montón utiliza para ayudar en la consecución de algoritmo DFS.

Nota: La profundidad de la DFS pertenecen búsqueda a ciegas, la búsqueda es ninguna garantía de que el camino es el camino más corto, ni está en la búsqueda de una ruta específica, sino a través de una búsqueda para ver qué camino la cifra puede ser seleccionado.

pasos:

vértices de acceso V;
Secuencialmente desde el nodo adyacente no es v accesible, y la profundidad-primero transversal de la figura .; y V tienen las figuras hasta que los vértices de la ruta de comunicación han sido visitados;
Si esta vez no es la manera de acceder a la cúspide existe, no ha sido visitada desde un vértice de vista, el recorrido re-primero en profundidad hasta que todos los vértices son visitados hasta el momento.

realización

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)
           }
       }
   }
}

Primero en amplitud de recorrido (BFS)

Amplitud primera transversal (en amplitud de búsqueda) están comenzando desde la raíz, atravesando los nodos de la gráfica a lo largo de la anchura, si se visitan todos los nodos, las termina algoritmo, también pertenecen a la BFS búsqueda a ciegas, la estructura de datos de la cola general usado para ayudar a lograr BFS.

BFS parten de un nodo, tratan de acceder lo más posible cerca de su nodo de destino. Esencialmente, este recorrido en la figura trasladó capa por capa, la primera capa más cercana al primer nodo de verificación, y luego se mueve gradualmente hacia abajo para el más alejado capa desde el nodo de origen.

pasos:

Crear una cola y empezar nodo en una cola;
Si la cola no está vacía, la cola retira del primer nodo, y detecta si es el nodo de destino;
- Si el nodo de destino, el final de la búsqueda, y devuelve el resultado;
- Si no, entonces no ha sido probado todos los bytes se añaden a los puntos de cola;
Si la cola está vacía, no se muestra en el dibujo y el nodo de destino, se termina el recorrido.

realización

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)
           }
       }
   }
}

Por favor, escriba los resultados operativos de la siguiente código:

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')

La naturaleza de la materia, es examinar cuestiones relacionadas con setTimeout, promesa, implementar y ejecutar la orden esperan ser asíncrono, y el bucle de eventos JS.

respuesta

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

El conjunto de aplanamiento y la eliminación en el que los datos duplicados para obtener finalmente una matriz que no se repite en orden ascendente

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

JS solución de desarrollo asíncrono, así como las ventajas y desventajas

función de devolución de llamada (devolución de llamada)

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

Desventajas: el infierno de devolución de llamada, no pueden detectar el error con un intento de captura, no puede volver

El problema fundamental es que el infierno de devolución de llamada:

La falta de orden: las dificultades de puesta en servicio causadas por demonios de devolución de llamada, y la manera de pensar del cerebro no coinciden;
El acoplamiento de la presencia de funciones anidadas, una vez sujeto a cambio, que afectará de hecho todo el cuerpo, es decir, (control inverso);
función anidada demasiado, difíciles de manejar errores.

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

Promesa

Promesa es para resolver los problemas que surgen de devolución de llamada.

Promesa de lograr una llamadas encadenadas, que luego se devuelven cada vez después de una nueva promesa, entonces si volvemos en el, devolver el resultado será Promise.resolve paquete ().

Ventajas: resolver el problema de los demonios de devolución de llamada.

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

Generador

Características: Se puede controlar la ejecución de la función, que puede ser utilizado con co.js uso de la biblioteca. (Es decir, koa uso temprano de la biblioteca)

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()

Asíncrono / Await

asíncrono, esperan la solución definitiva es asíncrona.

Las ventajas son: el código es claro, entonces no escribir mucho a la cadena de Promise, se refirió al tema del infierno de devolución de llamada;

Desventaja: await código asíncrono transforma en el código de sincronización, si una pluralidad de operación asíncrona sin dependencia en el uso aguardan conducir a disminuir el rendimiento.

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

Los siguientes usos de ejemplo esperan un vistazo:

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

La explicación await interno anteriormente mencionado lograr un generador, de hecho, es el generador acoplado con el azúcar sintáctica await Promise, y la implementación interna del generador de ejecución automática. Si está familiarizado con los compañeros que, de hecho, se puede lograr este azúcar sintaxis.

finalmente

Simplemente no me gusta es el punto de la intimidación !!!
Bienvenido a la preocupación pública número "front-end Curso Avanzado" estudiar seriamente la parte delantera, junto avanzada.