¡Analice las preguntas de prueba escritas de front-end reales de la gran fábrica, súper detalladas y comprenda de un vistazo! (Uno)

Una nota sobre el artículo

Se trata de la compilación de preguntas de la entrevista de Dachang, que son algunas preguntas personalmente valiosas y sus propias preguntas incorrectas. Por lo tanto, este artículo es adecuado para amigos que escriben preguntas de prueba.

Cuando estaba en la escuela secundaria, recordé que todas las materias tenían libros de preguntas incorrectos. Hace unos días, estaba pensando en cuándo armar las preguntas incorrectas en mi práctica. Linglong consideró que no había muchas preguntas de examen escrito, pero podía lograr el efecto de hacer una sesión de preguntas. Entonces, con este artículo, el artículo crecerá más con la cantidad de preguntas.

También espero poder discutir el conocimiento de front-end con otros amigos, progresar juntos y aprender más.

El primer conjunto: el reclutamiento escolar de NetEase 2020 se aprueba por adelantado

Quinta pregunta

Punto de prueba: clasificación en la estructura de datos

tema

Analizando

Esta pregunta trata sobre la clasificación, por lo que necesitamos conocer los pensamientos y las características de cada clasificación. Da la casualidad de que la clasificación de inserción directa cumple con los requisitos del título. La clasificación tiene dos capas de bucles. La primera capa atraviesa la matriz completamente para controlar el número de pasadas, y la segunda capa de bucle escanea el número que se insertará y el número dispuesto en el frente para comparar el tamaño de atrás hacia adelante. La clasificación Hill tendrá en cuenta la agrupación.

Cuarta pregunta

Punto de prueba: conversión de tipo implícita de js

tema:

Cuando se intenta generar una variable, se realiza una conversión implícita y se llaman automáticamente los métodos tostring y valueof de la variable.

Conocimiento esencial

con= La diferencia:

• Aparece ==: Podemos agregar =VerModo estricto, cuandoCuando el tipo de datos es el mismo, se convertirá a=; Si los tipos de datos son diferentes, se realizará una conversión de tipo automáticamente y la comparación se realizará después de convertir al mismo tipo.
• ===: Cuando hay tres signos iguales, el primer juicio es si los tipos son iguales, y si no son iguales, devolverá falso

El método valueOf y el método toString llaman al método toString de forma predeterminada

• Algunos blogs que leo directamente dicen que toString se llama por defecto y no explica el principio. Este es realmente el caso. Veamos el siguiente ejemplo. Aunque el método colors.valueOf () devuelve una matriz, el método toString se llama implícitamente cuando se emite la alerta, por lo que el resultado es el mismo.
• Pero si es una operación numérica, primero llame al método valueOf ().

var colors = ["red", "blue", "green"]; // 创建一个包含3 个字符串的数组  
alert(colors.toString()); // red,blue,green  
alert(colors.valueOf()); // red,blue,green  
alert(colors); // red,blue,green 

Analizando

• La primera salida: arr === ""; Los tipos son todos diferentes, no se llama a toString ni a valueOf. Falso retorno
• La segunda salida: arr == ""; diferentes tipos pero llama a toSrting y luego compara. Finalmente devuelve verdadero
• La tercera salida: arr === 1; el resultado es falso, la razón es la misma que la primera salida
• La cuarta salida: arr == 1; el resultado es verdadero, la razón es la misma que la segunda salida, los dos métodos no se reescriben y se llama al método toString.
• La quinta salida: arr == 2; el resultado es verdadero, llame al método valueOf.
• La sexta salida: el tipo es el mismo objeto, pero el valor es diferente, por lo que el resultado devuelto es falso

Quinta pregunta

Sitio de prueba: deje características, cambie este punto

tema:

Análisis:

• fun () se llama en la ventana global, pero la global no tiene una. Las variables declaradas con let y const no pertenecen al objeto de la ventana, así que print undefind
• fun.aplly (obj) cambia este punto y el resultado es 1.
• Vale la pena mencionar el tercero. fun.bind (obj1) .apply (obj); Primero vincule esto a obj1 a través de bind, y luego devuelva una nueva función sin ejecutar; y esta nueva función determina esto y los parámetros formales, que no se pueden cambiar. Por lo tanto, la aplicación posterior equivale a la invalidación. El resultado es 2.
• La cuarta nueva diversión () examina el proceso de nuevas
  • 1. Genera un objeto nuevo
  • 2. Obtenga el enlace del constructor al prototipo
  • 3. Enlaza esto para ejecutar el constructor
  • 4. Devolver un objeto nuevo En este tema, el constructor no tiene un atributo y devuelve undefined.

Décima pregunta

Sitio de prueba: cálculo de diseño flexible

tema

Análisis:

flex-grow: 定义项目放大比例
flex-shrink：定义项目缩小比例
flex-basis：定义了分配多余空间之前，项目占据主轴的空间。

Vemos que el ancho del elemento padre es 200px, y el ancho antes del espacio asignado izquierdo y derecho es 100px + 50px = 150px; por lo que nuestros cuadros izquierdo y derecho deben agrandarse y 50px. De acuerdo con la relación de aumento es 3: 2; por lo que el cuadro de la izquierda es 50px + 30px = 80px, y el cuadro de la derecha es 120px. La relación de ancho es 2: 3.

El segundo conjunto: el reclutamiento escolar 2020 NetEase aprobado oficialmente

Pregunta 8

Punto de prueba: la función de flecha no tiene esto

tema:

Análisis:

La función de flecha no vincula esto, y la función de flecha no vincula su propia palabra clave this. Si se usa en la función de flecha, esto apuntará a this en la ubicación donde se define la función de flecha. Veamos un ejemplo a continuación.

function fn (){
    console.log(this);
    return ()=> {
        console.log(this);
    }
}
const obj = {name:'zhangshan'};
const resFn = fn.call(obj);
resFn();

const resFn = fn.call(obj);让fn的this绑定到obj上；执行resFn()函数就是执行返回的箭头函数，打印的this是fn的this，也就是obj。

Entonces, volviendo a nuestra pregunta, lo mismo es cierto.Los tres tiempos apuntan al esto del padre común, que es el esto de la posición definida de la función de flecha. El resultado devuelto tres veces es foo.

El tercer conjunto: las preguntas del examen escrito de front-end del reclutamiento escolar de Xiaomi 1

Quinta pregunta

Sitio de prueba: el significado del signo más en js

tema

Analizando

Primero revisemos los seis tipos de datos en js, cinco tipos básicos de objeto undefined, null, string, number, booleam y tipo de referencia. A excepción de los tipos básicos, todos son tipos de referencia como matriz, función, etc.

Entonces, el signo más eventualmente tendrá dos tipos de conversiones: 1. Cuando hay cadenas a ambos lados del signo más, se concatenan en una cadena de acuerdo con el procesamiento de la cadena. 2. Cuando no hay una cadena, se trata como un número. Por lo tanto, en ambas ocasiones este Li Mu debe considerarse como una concatenación de cadenas.

Pregunta 12

Sitio de prueba: recorrido de árbol binario

tema

Análisis:

Según las características de recorrido de preorden y recorrido de orden medio, c es el nodo raíz, por lo que BAFE es el subárbol izquierdo de c, y los nodos restantes son el subárbol derecho de c. Luego, podemos dibujar el árbol binario como se muestra en la figura siguiente, y luego atravesar el subárbol izquierdo primero, luego atravesar el subárbol derecho y finalmente el nodo raíz. El resultado es bfeahgdc

Pregunta 13

Sitio de prueba: búsqueda binaria de matriz

tema

Análisis:

para ser resuelto

Por fin

El aprendizaje inicial es un largo camino. Lo que tenemos que aprender no es solo la tecnología superficial, sino también la capa inferior para comprender los siguientes principios. Solo así podemos mejorar nuestra competitividad. En el mundo altamente competitivo de hoy.

Un viaje de mil millas comienza con un solo paso, espero que ustedes y yo nos animemos mutuamente.

Los tres dorados y los cuatro plateados llegarán pronto. Le daré una pequeña bonificación. A continuación se muestran algunas preguntas de la entrevista que recopilé después del trabajo, incluidos HTML, CSS, JavaScript, servidor y red, Vue, navegador, reacción, etc.

Versión HTML

• ¿Cuál es la diferencia entre título y alt en la imagen?
• ¿Cuáles son las nuevas características de Html5 y qué elementos se han eliminado?
• ¿Cómo gestiona y carga el navegador los recursos de almacenamiento fuera de línea de Html5?
• ¿Cuáles son los elementos de la línea? ¿Cuáles son los elementos a nivel de bloque? ¿Cuáles son los elementos vacíos?
• ¿Cuál es la diferencia entre establecer el ancho y la altura del lienzo en la etiqueta y establecer el ancho y la altura en el estilo?
• ¿Cómo gestiona y carga el navegador los recursos de almacenamiento sin conexión de HTML5?

Artículos CSS

• La diferencia entre enlace e @import en CSS:
• Las similitudes y diferencias entre posición absoluta y fija:
• ¿Cuál es el uso de BFC?
• Varias formas de limpiar los flotadores
• Css3 nuevo pseudo-clase-pseudo-elemento
• Modelo de caja IE, modelo de caja W3C
• ¿Cuándo se mostrará: inline-block no muestra el espacio?
• ¿El elemento en línea se convierte en un elemento a nivel de bloque después de flotar: izquierda?

JavaScript

• Las diversas posiciones de js, como clientHeight, scrollHeight, offsetHeight y la diferencia entre scrollTop, offsetTop, clientTop?
• Implementación de la función de arrastrar y soltar js
• Cargar de forma asincrónica el método js
• js anti-vibración
• Cierres que no se pueden eludir
• Hable sobre su comprensión de la cadena de alcance
• ¿Prototipo de JavaScript, cadena de prototipos? ¿Cuáles son las características?
• Explique qué es la delegación de eventos / delegación de eventos
• ¿Cómo implementa Javascript la herencia?

Vista

• El papel del valor clave en vue
• ¿Por qué los datos en un componente de Vue deben ser una función?
• ¿Cuál es la característica de estado de vuex?
• Presenta el sistema de respuesta de Vue
• La diferencia entre calculado y reloj
• Presenta el ciclo de vida de Vue
• Por qué los datos de los componentes deben ser una función
• ¿Cómo se comunican los componentes?

Debido al espacio limitado, solo se puede compartir una parte de las preguntas de la entrevista, y se pueden leer y descargar más preguntas y respuestas de la entrevista con [haga clic en mí] .

Reaccionar

• Al presentar Redux, ¿cuáles son los principales problemas a resolver? ¿Qué es el flujo de datos? ¿Cómo administrar múltiples componentes usando el mismo estado?
• React-Redux está conectado al componente react
• ¿Qué es el middleware Redux? Acepta varios parámetros
• Cómo el middleware de solicitudes redux maneja la concurrencia
• Cómo configurar React-Router
• Módulos cargados dinámicamente para enrutamiento
• Reaccionar el ciclo de vida y su propia comprensión, y los cambios de V16 en el ciclo de vida.
• ¿Por qué usar dom virtual?

Navegador

• Comunicación de tabla cruzada
• Arquitectura del navegador
• Bucle de eventos en el navegador
• El proceso desde la URL de entrada hasta la visualización
• Redibujar y redistribuir
• almacenamiento
• Trabajador web
• Mecanismo de recolección de basura V8
• Pérdida de memoria
• Optimización del reflujo y repintado
• ¿Cómo reducir el redibujado y el reflujo?
• Se ingresa una página desde la URL para que la página se cargue y se muestre, ¿qué sucedió en el proceso?
• Resumen de la diferencia entre localStorage y sessionStorage y cookie

Puede leer y descargar más preguntas y respuestas de la entrevista con [haga clic en mí] y compartirlas con usted de forma gratuita ~