Preguntas de entrevista clásicas de front-end (60 preguntas de entrevista de front-end que incluyen JS, CSS, React, navegadores, etc.)

Reducir gastos

Malentendido: a menudo decimos que hay un límite para el tamaño del parámetro de la solicitud de obtención, pero no hay límite para el tamaño del parámetro de la publicación pedido.

De hecho, el protocolo HTTP nunca ha especificado un límite de longitud de solicitud para GET/POST. La limitación de los parámetros de solicitud de obtención es que la fuente y el navegador o servidor web limitan la longitud de la URL. Para aclarar este concepto debemos volver a enfatizar los siguientes puntos:

Agregar la diferencia entre get y post en caché:

Disponible en IIFE, AMD, CMD, CommonJS, UMD Obtener, El paquete de red (requiere. Assurance), el módulo ES,

vue y reaccionar utilizan el algoritmo diff para comparar los nodos virtuales antiguos y nuevos para actualizar los nodos. En la función de diferenciación de vue (se recomienda comprender primero el proceso del algoritmo de diferenciación). En la comparación cruzada, cuando no hay resultado en la comparación cruzada cabeza a cola entre el nuevo nodo y el nodo antiguo, la clave en la matriz de nodos anterior se comparará de acuerdo con la clave del nuevo nodo para encontrar el correspondiente Nodo antiguo (aquí corresponde a una clave = gt mapeo de índice de mapeo). Si no se encuentra, se considera un nodo nuevo. Si no hay ninguna clave, la búsqueda transversal encontrará el nodo antiguo correspondiente. Uno es el mapeo de mapas y el otro es la búsqueda transversal. En comparación. El mapeo de mapas es más rápido. El código fuente de la parte de vue es el siguiente:

Crear función de mapa

Búsqueda transversal

En React, si el evento es manejado por React (como a través de onClick), llame a setState This.state no se actualizará sincrónicamente, otras llamadas a setState ejecutarán this.state sincrónicamente. El llamado "adicional" se refiere al controlador de eventos agregado directamente por addEventListener sin pasar por React y la llamada asincrónica generada por setTimeout/setInterval.

* *Razón:* * En la implementación de la función setState de React, se usará una variable isBatchingUpdates para determinar si se actualiza this.state directamente o se coloca en la cola para más adelante. El valor predeterminado de isBatchingUpdates es falso. es decir, setState actualizará this.state sincrónicamente. Pero hay una función por lotes, que cambiará isBatchingUpdates a verdadero. Cuando React llama a este lote de datos antes de llamar al controlador de eventos, el resultado es que el controlador de eventos setState controlado por React no actualizará this.state sincrónicamente.

Virtual dom equivale a agregar un caché entre js y real dom. El algoritmo dom diff se utiliza para evitar operaciones dom innecesarias, mejorando así el rendimiento.

Los pasos de implementación específicos son los siguientes:

La estructura del árbol DOM está representada por una estructura de objeto JavaScript, luego este árbol se usa para construir un árbol DOM real y se inserta en él; el documento.

Cuando el estado cambia, se reconstruye un nuevo árbol de objetos. Luego compare el árbol nuevo con el árbol viejo y registre las diferencias entre los dos árboles.

Aplique las diferencias registradas en 2 al árbol DOM real creado en el paso 1 y la vista se actualizará.

Estructura: Visualización: Ninguna: hará que el elemento desaparezca completamente del árbol de renderizado y no ocupará ningún espacio al renderizar. Visibilidad: Oculto: no hará que el elemento desaparezca del árbol de renderizado, el elemento renderizado seguirá ocupando espacio, pero el contenido no es visible, por lo que no se puede hacer clic en él. Opaco: 0: no hará que el elemento desaparezca del árbol de renderizado. , el elemento renderizado seguirá ocupando espacio, pero el contenido no es visible, por lo que se puede hacer clic en él.

Herencia: Visualización: Ninguna: Es un atributo no heredado La desaparición de los nodos descendientes se debe a la desaparición de elementos en el árbol de renderizado y no se puede mostrar modificando los atributos de los nodos descendientes.

Visibilidad: oculta: es un atributo heredado y los nodos descendientes desaparecen. Debido a que hereda oculto, puede hacer que los nodos descendientes sean explícitos configurando visibilidad: visible.

Rendimiento: displaynone: Modificar un elemento hará que el documento se reorganice. Los lectores de pantalla no leerán el contenido del elemento display: none, por lo que el consumo de rendimiento es alto. Visibilidad: Oculta: Modificar un elemento solo provocará que el elemento se vuelva a dibujar, con un bajo consumo de rendimiento. Visibilidad para lectores de pantalla: contenido de elementos ocultos Opacidad: 0: la modificación de un elemento provocará que se vuelva a dibujar, lo que supone un bajo rendimiento.

Conexión: Ambos hacen invisible el elemento.

Hay tres de uso común. Clearfix, clear: ambos, overflow: oculto;

Mucho mejor. clearfix, versión pseudo-elemento de aceite de serpiente, los dos últimos tienen limitaciones.

Claro: ambos: Es bueno si se usa en elementos adyacentes en el mismo contenedor. A veces surgen problemas fuera del buque, como el colapso de elementos de revestimiento en buques adyacentes.

Desbordamiento: Oculto: Si se usa en el mismo contenedor, se puede formar un BFC para evitar el colapso del elemento causado por la flotación.

Concepto: unir varias imágenes pequeñas en una sola imagen. Ajuste el patrón de fondo que se mostrará según la posición del fondo y el tamaño del elemento.

Ventajas:

Desventajas:

Características del elemento de bloque:

1. En el proceso normal, si no se establece el ancho, el padre El contenedor se llenará automáticamente. 2. Se puede aplicar margen/relleno. 3. La altura se ampliará para incluir elementos secundarios en flujo normal sin establecer la altura. 4. En el proceso normal, el diseño se realiza entre las posiciones de los elementos delantero y trasero (excluyendo el espacio horizontal). 5. Ignore la alineación vertical.

Características de los elementos en línea

1. Disposición horizontal según la dirección.

2. No habrá saltos de línea antes o después del elemento.

3. Controlado por espacios en blanco

4. El margen/relleno no es válido en la dirección vertical y es válido en la dirección horizontal.

5. Los atributos ancho/alto no son válidos para elementos en líneas que no son de reemplazo, y el ancho está determinado por el contenido del elemento.

6. La altura del cuadro de línea del elemento de línea que no es de reemplazo está determinada por la altura de la línea, y la altura del cuadro de línea del elemento de línea de reemplazo está determinada por la altura, el margen y el relleno. y frontera. 7. El posicionamiento flotante o absoluto se convertirá en el bloque 8. La propiedad de alineación vertical entra en vigor.

GIF:

JPEG:

Papua Nueva Guinea:

Siete tipos de datos

(antes de ES6) , cinco de los cuales son tipos básicos: cadena, número, booleano, vacío, indefinido.

Los símbolos de ES6 también son tipos de datos primitivos que representan valores únicos.

El objeto es un tipo de referencia (amplio rango), que incluye matrices y funciones.

El resultado de salida es:

Modo de fábrica

Se puede entender que el modelo de fábrica simple resuelve muchos problemas similares;

Modo único

Solo se puede crear una instancia una vez (el constructor agrega propiedades y métodos a la instancia)

Modo Sandbox

Coloque algunas funciones en funciones autoejecutables, pero use cierres para exponer las interfaces, use variables para recibir las interfaces expuestas y luego llame a los valores internos; de lo contrario, los valores internos será Ya no se podrá utilizar.

1. Literales

2. Creación de constructores de objetos

3. Usar patrón de fábrica para crear objetos

4.

La interacción con JavaScript en HTML está basada en eventos, como el evento de clic del mouse al hacer clic, el evento de desplazamiento de página al desplazarse, etc. Puede agregar detectores de eventos a un documento o elementos dentro de un documento para suscribirse a eventos. Si desea saber cuándo se convocan estos eventos, debe comprender el concepto de "flujo de eventos".

¿Qué es el flujo de eventos? Un flujo de eventos describe el orden en el que se reciben los eventos de una página.

El flujo de eventos de nivel DOM2 incluye las siguientes etapas.

escucha addevent: la escucha addevent es una operación que especifica el controlador de eventos agregado para eventos de nivel DOM2. Este método recibe tres parámetros: el nombre del evento a manejar, la función que es el controlador del evento y un valor booleano. Si el último parámetro booleano es verdadero, significa que se llamó al controlador de eventos durante la fase de captura. Si es falso, significa que se llama al controlador de eventos durante la fase de difusión.

IE solo admite la difusión de eventos.

Obtiene el prototipo del objeto, que puede ser el formulario __proto__ en Chrome o el formulario Object.getPrototypeOf en ES6.

Entonces, ¿qué es Function.proto? En otras palabras, de qué objeto se hereda la función, hacemos el siguiente juicio.

Encontramos que el prototipo de una función también es una función.

Podemos utilizar un diagrama para ilustrar esta relación:

Aquí hay un ejemplo. Tome Objeto como ejemplo. Nuestro objeto público es un constructor, por lo que podemos construir una instancia a través de él.

En este momento, la instancia es una instancia y el constructor es un objeto. Sabemos que el constructor tiene un atributo de prototipo que apunta al prototipo, por lo que el prototipo es:

Aquí podemos ver la relación entre los tres:

En JS, la herencia generalmente se refiere a la herencia de la cadena de prototipos, es decir, al especificar un prototipo, las propiedades o métodos del prototipo se pueden heredar a través de la cadena de prototipos.

En programación funcional, las funciones son ciudadanos de primera clase. Entonces, ¿qué es el curry de funciones?

La coriificación de una función se refiere a la técnica de convertir una función que puede recibir múltiples parámetros en una función que recibe un solo parámetro y devuelve una nueva función que recibe los parámetros restantes y devuelve el resultado.

Las principales funciones y características de la codificación de funciones son la reutilización de parámetros, el retorno temprano y la ejecución retrasada.

La técnica de completar algunos parámetros en una función y luego devolverlos a una nueva función se llama curry de la función. A menudo se puede utilizar para preestablecer parámetros públicos para funciones que se llaman repetidamente sin invadir la función.

Tanto las convocatorias como las solicitudes están diseñadas para solucionar el problema de cambiar este rumbo. La funcionalidad es la misma, sólo que la forma en que se pasan los parámetros es diferente.

Además del primer parámetro, call puede recibir una lista de parámetros, mientras que apply solo acepta una matriz de parámetros.

La función de Bind es la misma que la de los otros dos métodos, excepto que este método devuelve una función. Podemos lograr la coriización mediante la vinculación.

Cómo implementar funciones vinculantes

Para lograr las siguientes funciones, puedes pensar en ello desde varios aspectos.

Cómo implementar una función de llamada

Cómo implementar una función de aplicación

La función de flecha en realidad no tiene esto. El this en esta función solo depende de. si el primero fuera de él no es Esta es la función de la función de flecha. En este ejemplo, esta es una ventana porque la llamada coincide con el primer caso del código anterior. Y una vez que esto está vinculado al contexto, ningún código puede cambiarlo.

¿Por qué utilizamos el siguiente ejemplo para verificar si hay promoción variable en let?

Si la variable let no tiene promoción de variable, console.log(nombre) generará ConardLi, pero el resultado es un ReferenceError, que indica que la variable let también tiene promoción de variable, pero tiene una promoción "temporal". zona muerta", que ocurre cuando se inicializa la variable. O no se puede acceder a ella antes de la asignación.

La asignación de variables se puede dividir en tres etapas:

Acerca de letras, variables y funciones:

Salida en secuencia: undefinido - gt; ; 20

Respuesta: d

El método colorChange es estático. Los métodos estáticos sólo existen dentro del constructor que los crea y no se pueden pasar a ningún submétodo.

Debido a que freddie es un subobjeto, no se pasan funciones, por lo que no hay ningún método de freddie en una instancia de freddie: se genera un TypeError.

1. Utilice la primera inserción y establezca el método de inserción del objeto obj en obj[2]= 1 longitud = 1 ^ 2. Usando la segunda inserción, configure obj[3]=2;length=1^3 para el método de inserción del objeto obj. Cuando se genera usando console.log, se imprime como una matriz porque tiene una propiedad de longitud y un método de empalme. 4. Al imprimir, la impresión está vacía porque la matriz no está configurada con el subíndice 0 1 y la actividad obj[0] se obtiene como indefinida.

Indefinido {n:2}

Primero A y B hacen referencia al objeto {n:2} al mismo tiempo, y luego ejecutan la declaración a.x = a = {n:2 }. Aunque la asignación es de derecha a izquierda. Mayor que =, por lo que aquí se ejecuta primero a.x, lo que equivale a {n:1} señalado por A (o B). x: indefinido}. Luego, la asignación continúa de derecha a izquierda como de costumbre. Cuando se ejecuta a = {n: 2} en este momento, la referencia de A cambia y apunta al nuevo objeto {n: 2}, mientras que B todavía apunta al objeto anterior. Cuando se ejecuta a.x = {n: 2} más adelante, no se volverá a analizar A, sino el A original, es decir, el objeto antiguo, por lo que el valor de X del objeto antiguo es {n: 2}, y el El objeto antiguo es {n: 1; X: {n: 2}}, al que hace referencia b. Cuando se genera a.x más tarde, A debe volver a analizarse. En este momento, A apunta a un nuevo objeto, y este nuevo objeto no tiene el atributo X, por lo que no está definido cuando se accede a él;

En las ecuaciones de comparación, los tipos primitivos se comparan por sus valores, mientras que los objetos se comparan por sus referencias. JavaScript comprueba si el objeto se refiere a la misma ubicación en la memoria.

El objeto que pasamos como argumento y el objeto que usamos para verificar la igualdad se encuentran en ubicaciones diferentes en la memoria, por lo que sus referencias son diferentes.

Esta es la razón por la que {edad: 18} == {edad: 18} y {edad: 18} == {edad: 18} devuelven falso.

Todas las claves de los objetos (excepto los símbolos) se almacenan como cadenas, incluso si no tiene una clave de un tipo de cadena determinado. Es por eso que obj.hasOwnProperty('1 ') también devuelve verdadero.

La afirmación anterior no se aplica a Set. No hay ningún "1" en nuestro conjunto: Set has(' 1 ') devuelve falso. Su tipo numérico es 1 y set.has(1) devuelve verdadero.

Esta pregunta examina la conversión de nombres clave de objetos.

El bloque Catch recibe el parámetro x, que es diferente del x de la variable cuando le pasamos el parámetro. Esta variable x pertenece al alcance de captura.

Después de eso, configuramos esta variable de alcance de bloque en 1 y establecemos el valor de la variable y. Ahora, imprimamos la variable de alcance de bloque x, que es igual a 1.

Fuera del bloque catch, x aún no está definido e y es 2. Cuando esperamos que console.log(x) esté fuera del bloque catch, devuelve indefinido e y devuelve 2.