1. Entrevistador: Hable sobre la diferencia entre var, let y const
Antes de ES6, las variables se creaban usando var, y después de eso, las variables se creaban usando let/const
La diferencia entre var, let y const se puede ampliar en torno a los siguientes cinco puntos:
1. Promoción variable
La variable declarada por var tiene promoción variable, es decir, la variable se puede llamar antes de la declaración y el valor no está definido
No hay promoción de variables para let y const, es decir, las variables que declaran deben usarse después de la declaración, de lo contrario se informará un error.
2. Zona muerta temporal
No hay zona muerta temporal en var. Hay una zona muerta temporal entre let y const. Solo cuando aparece la línea de código que declara la variable, se puede adquirir y usar la variable.
3. Alcance a nivel de bloque
var no tiene alcance de bloque
let y const tienen alcance a nivel de bloque
4. Repita la declaración
var permite la declaración repetida de variables
Let y const no pueden declarar variables repetidamente en el mismo ámbito
5. Modificar la variable declarada
var y let can
const declara una constante de solo lectura. Una vez declarado, el valor de una constante no se puede cambiar.
6. Uso
Use const tanto como sea posible cuando pueda usar const, y use let en la mayoría de los otros casos, evite usar var
2. Entrevistador: ¿Qué extensiones se agregan a los arreglos en ES6?
En primer lugar, la aplicación del operador de propagación
ES6 convierte una matriz en una secuencia de parámetros separados por comas al expandir el símbolo del elemento...
console.log(...[1,2, 3]) // 1 2 3El operador de propagación se puede combinar con la asignación de desestructuración para generar matrices
const[first, ...rest] = [1, 2, 3, 4, 5];
first // 1 rest // [2, 3, 4, 5]En segundo lugar, el nuevo método del constructor.
1, Matriz.desde()
Convierte dos tipos de objetos en arreglos reales: objetos similares a arreglos y objetos iterables
arrayLike es un objeto similar a una matriz
letarr2 = Array.from(arrayLike); //['a', 'b', 'c']2, Array.of()
Se utiliza para convertir un conjunto de valores en una matriz
Array.of(3,11, 8) // [3,11,8]3. Nuevo método de objeto de instancia
1. copyWithin(): copia los miembros en la ubicación especificada a otras ubicaciones (los miembros originales se sobrescribirán) y devuelve la matriz actual
2. find() se usa para encontrar el primer miembro elegible de la matriz
3. include(): se usa para determinar si la matriz contiene un valor dado
flat() : aplana la matriz y devuelve una nueva matriz sin afectar los datos originales
[1,2, [3, 4]].flat() // [1, 2, 3, 4]En cuarto lugar, la variedad de vacantes.
La vacante de la matriz significa que no hay ningún valor en una determinada posición de la matriz, y ES6 convierte explícitamente la vacante en indefinida
5. Estabilidad de clasificación
Establezca sort () de forma predeterminada en un algoritmo de clasificación estable
3. Entrevistador: ¿Qué extensiones se agregan a los objetos en ES6?
1. Abreviatura de atributos
En ES6, cuando el nombre de la clave del objeto es igual al nombre del valor correspondiente, se puede abreviar y el método también se puede abreviar
En segundo lugar, la expresión del nombre del atributo
ES6 permite encerrar expresiones entre paréntesis al definir objetos con literales
let lastWord = 'last word';
consta = {
'first word': 'hello',
[lastWord]: 'world'
};
a['first word'] // "hello"
a[lastWord] // "world"
a['last word'] // "world"
Tres, súper palabra clave
La palabra clave this siempre apunta al objeto actual donde se encuentra la función, y ES6 agrega otra palabra clave similar super, que apunta al objeto prototipo del objeto actual.
En cuarto lugar, la aplicación del operador de propagación
En la asignación de desestructuración, las propiedades transitables que no se han leído se asignan al objeto especificado
let{ x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x// 1 y // 2 z // { a: 3, b: 4 }Cinco, recorrido de atributos
for...in: recorrer las propiedades enumerables heredadas y propias del objeto
Object.keys(obj): devuelve una matriz, incluidos los nombres clave de todas las propiedades enumerables (excluyendo las propiedades de Símbolo) del propio objeto (excluyendo las heredadas)
Seis, el método de agregar un objeto.
Object.is() : Estrictamente juzga si dos valores son iguales
Una es que +0 no es igual a -0, y la otra es que NaN es igual a sí mismo
Objeto.assign()
El método Object.assign() se usa para fusionar objetos, target, source1, source2 son todos objetos
Object.assign(objetivo, fuente1, fuente2);
Nota: el método Object.assign() es una copia superficial y se reemplazará cuando encuentre un atributo con el mismo nombre.
4. Entrevistador: ¿Qué extensiones se han agregado a la función en ES6?
1. Parámetros
ES6 permite establecer valores predeterminados para parámetros de funciones
Los parámetros formales de la función se declaran por defecto y no se pueden volver a declarar usando let o const
dos, atributos
El atributo de longitud de la función: longitud devolverá la cantidad de parámetros que no especifican un valor predeterminado
atributo de nombre: devuelve el nombre de la función de la función
3. Alcance
Una vez que se establece el valor predeterminado del parámetro, el parámetro formará un ámbito separado cuando la función se declare e inicialice.
4. Modo estricto
Siempre que los parámetros de la función usen valores predeterminados, asignaciones de desestructuración u operadores de expansión, la función no se puede configurar explícitamente en modo estricto, de lo contrario, se informará un error.
5. Funciones de flecha
Use "flechas" (=>) para definir funciones
El objeto this en el cuerpo de la función es el objeto donde se define, no el objeto donde se usa
5. Entrevistador: ¿Cómo entiende las nuevas estructuras de datos de Set y Map en ES6?
1. Conjunto
Set es una estructura de datos llamada colección y Map es una estructura de datos llamada diccionario.
Set es una nueva estructura de datos en es6, similar a una matriz, pero los valores de sus miembros son únicos y no hay valores repetidos. Generalmente lo llamamos conjunto
El método de agregar, eliminar, modificar y verificar la instancia de Set:
add() : agrega un valor y devuelve la estructura del conjunto en sí. Al agregar elementos que ya existen en la instancia, el conjunto no procesará la adición
delete (): elimina un valor y devuelve un valor booleano que indica si la eliminación se realizó correctamente
has(): devuelve un valor booleano para determinar si el valor es miembro de Set
clear (): borra todos los miembros, sin valor de retorno
Los métodos para atravesar las instancias de Set son los siguientes:
1. teclas (): devuelve el atravesador del nombre de la clave
2. valores (): devuelve el atravesador del valor clave
3.entradas(): devuelve un recorrido de pares clave-valor
4. forEach(): use la función de devolución de llamada para recorrer cada miembro
La combinación del operador de extensión y la estructura Set realiza la deduplicación de una matriz o cadena
letarr = [3, 5, 2, 2, 5, 5];
letunique = [...nuevo Conjunto(arr)]; // [3, 5, 2]
2. Mapa
El tipo Map es una lista ordenada de pares clave-valor, y tanto las claves como los valores pueden ser de cualquier tipo
La instancia de la estructura Map tiene las siguientes propiedades y métodos de operación para agregar, eliminar, modificar y verificar:
atributo de tamaño: el atributo de tamaño devuelve el número total de miembros de la estructura del mapa.
set (): establece el valor de la clave correspondiente a la clave del nombre de la clave en el valor, y luego devuelve la estructura completa del mapa
get (): el método get lee el valor de la clave correspondiente a la clave, si no se puede encontrar la clave, devuelve indefinido
has(): el método has devuelve un valor booleano que indica si una clave está en el objeto Map actual
delete (): el método de eliminación elimina una clave y devuelve verdadero. Devuelve falso si la eliminación falló
clear (): el método clear borra todos los miembros y no tiene valor de retorno
La estructura Map proporciona de forma nativa tres funciones de generación de recorridos y un método de recorrido:
keys(): devuelve un atravesador de nombres de claves
valores (): devuelve un atravesador de valores clave
entradas (): devuelve un atravesador para todos los miembros
forEach(): recorrer todos los miembros del Mapa
6. Entrevistador: ¿Cómo entiendes Generator en ES6? Escenas a utilizar?
La función Generador es una función ordinaria, pero tiene dos características:
1. Hay un asterisco entre la palabra clave de la función y el nombre de la función
2. La expresión de rendimiento se usa dentro del cuerpo de la función para definir diferentes estados internos
function*helloWorldGenerator() {
yield 'hello';
yield 'world';
return 'ending';
}
var hw = helloWorldGenerator();La función Generator devuelve un objeto transversal, que tiene la propiedad Symbol.iterator, y lo devuelve a sí mismo.
El estado del objeto transversal devuelto por la función generadora puede suspenderse mediante la palabra clave yield
Solo a través del siguiente método se atravesará el siguiente estado interno
hw.next() // { value: 'hello', done: false }
hw.next() // { value: 'world', done: false }
hw.next() // { value: 'ending', done: true }
hw.next() // { value: undefined, done: true }Solo porque la función Generador devuelve un objeto Iterador, también podemos atravesar por... de
solución asíncrona
La expresión yield puede suspender la ejecución de la función, y el siguiente método se usa para reanudar la ejecución de la función, lo que hace que las funciones de Generator sean muy adecuadas para sincronizar tareas asincrónicas.
asíncrono/espera
La función asíncrona devuelve un objeto Promesa. Cuando se ejecuta la función, una vez que encuentra una espera, regresará primero. Después de que se complete la operación asíncrona desencadenada, se ejecutará la siguiente declaración en el cuerpo de la función. Se puede entender como abandonar el hilo y saltar fuera del cuerpo de la función asíncrona. Async es esencialmente el azúcar gramatical de Generator, que es equivalente a ejecutar automáticamente la función Generator.
Async tiene un uso más conciso, y escribir código asíncrono en forma síncrona es la solución definitiva para la programación asíncrona.
7. Entrevistador: ¿Cómo entiende Promise en ES6? Escenas a utilizar?
Promise es una solución para la programación asincrónica, que resuelve el problema de la devolución de llamadas.
Las ventajas de la promesa de resolver operaciones asincrónicas:
1. La operación en cadena reduce la dificultad de codificación 2. La legibilidad del código mejora significativamente
El objeto promesa tiene solo tres estados.
1. pendiente (en proceso) 2. cumplida (exitosa) 3. rechazada (fallida)
El objeto Promise es un constructor que se utiliza para generar instancias de Promise.
constpromise = nueva promesa (función (resolver, rechazar) {});
El constructor Promise acepta una función como parámetro cuyos dos parámetros son resolver y rechazar
El rol de la función de resolución es cambiar el estado del objeto Promise de "incumplido" a "exitoso".
La función de la función de rechazo es cambiar el estado del objeto Promise de "incumplido" a "fallido".
La instancia construida por Promise tiene los siguientes métodos:
1, luego () 2, atrapar () 3, finalmente ()
entonces es la función de devolución de llamada cuando cambia el estado de la instancia, el primer parámetro es la función de devolución de llamada del estado resuelto y el segundo parámetro es la función de devolución de llamada del estado rechazado
El método then devuelve una nueva instancia de Promise, por lo que las promesas se pueden escribir en cadenas.
El método catch() es un alias para .then(nulo, rechazo) o .then(indefinido, rechazo), que se usa para especificar la función de devolución de llamada cuando ocurre un error.
El error del objeto Promise tiene una naturaleza "burbujeante" y se pasará hacia atrás hasta que se detecte.
El método finalmente() se utiliza para especificar la operación que se realizará independientemente del estado final del objeto Promise.
Existen los siguientes métodos para el constructor Promise:
1. El método Promise.all() se usa para envolver múltiples instancias de Promise en una nueva instancia de Promise
2. El método Promise.race() también envuelve múltiples instancias de Promise en una nueva instancia de Promise
3. resolve() convierte objetos existentes en objetos Promise
4. El método Promise.reject(reason) también devolverá una nueva instancia de Promise cuyo estado es rechazado
3. Escenarios de uso
Escriba la carga de la imagen como una Promesa, una vez que se completa la carga, el estado de la Promesa cambia
8. Entrevistador: ¿Cómo entiendes Proxy en ES6? Escenas a utilizar?
El proxy se utiliza para crear un proxy de un objeto, a fin de realizar la intercepción y la personalización de las operaciones básicas (como la búsqueda de atributos, la asignación, la enumeración, la llamada a funciones, etc.)
Proxy es un constructor utilizado para generar instancias de Proxy
varproxy = nuevo proxy (objetivo, controlador)
target representa el objeto de destino que se interceptará (cualquier tipo de objeto, incluidas matrices nativas, funciones o incluso otro proxy))
El controlador generalmente usa funciones como atributos, y las funciones en cada atributo definen el comportamiento del proxy p cuando realiza varias operaciones.
En cuanto a los atributos de intercepción del manejador, son los siguientes: (memorizar temporalmente tres)
1. get(target, propKey, receiver): intercepta la lectura de las propiedades del objeto
2. set (objetivo, propKey, valor, receptor): interceptar la configuración de las propiedades del objeto
3. has(target, propKey): intercepta la operación de propKey en el proxy y devuelve un valor booleano
9. Entrevistador: ¿Cómo entiendes Module en ES6? Escenas a utilizar?
Módulo (Módulo) es una colección de declaraciones de programa que se pueden nombrar individualmente y completar ciertas funciones de forma independiente
El papel de la modularización puede abstraer código, encapsular código, reutilizar código y administrar dependencias.
Mecanismos para modularizar programas JavaScript, tales como
1. CommonJs 2. AMD (representante típico: require.js) 3. CMD
La función del módulo consta principalmente de dos comandos:
1. exportar: se utiliza para especificar la interfaz externa del módulo
2. import: se utiliza para importar funciones proporcionadas por otros módulos
La exposición se divide en exposición separada, exposición unificada y exposición predeterminada
Después de usar el comando de exportación para definir la interfaz externa del módulo, otros archivos JS pueden cargar este módulo a través del comando de importación
Escenas a utilizar
1. Componente Vue 2. Componente React
Incluso al completar algunas aplicaciones complejas, también podemos dividirlas en varios módulos.
10. Entrevistador: ¿Cómo entiendes Decorator en ES6? Escenas a utilizar?
Decorador, es decir, decorador, el modo decorador es una teoría de diseño que extiende dinámicamente las funciones de los objetos sin cambiar la clase original y usando la herencia.
El decorador tiene dos ventajas:
1. La legibilidad del código se ha fortalecido y el nombre del decorador es equivalente a un comentario.
2. Expande la función original sin cambiar el código original
Los objetos de modificación de Docorator son los siguientes dos tipos:
1. Decoración de clase
2. Decoración de atributos de clase
Aviso
Los decoradores no se pueden usar para modificar funciones, porque las funciones tienen declaraciones de variables
Varios decoradores comunes
@antobind: el decorador de enlace automático hace que este objeto en el método enlace el objeto original
@readonly: el decorador de solo lectura hace que la propiedad o el método no se puedan escribir
@deprecate: el decorador en desuso o en desuso muestra una advertencia en la consola que indica que el método quedará en desuso