Front-end_Preguntas de entrevista

1.1 preguntas de la entrevista HTML

1. ¿Cuáles son los elementos en línea, cuáles son los elementos a nivel de bloque y cuáles son los elementos vacíos?

Elementos en línea: a, b, span, img, input, strong, select, label, em, button, textarea
Elementos a nivel de bloque: div, ul, li, dl, dt, dd, p, h1-h6, blockquote Elementos vacíos : br,
meta, hr, enlace, entrada, img

2. Al importar estilos en una página, ¿cuál es la diferencia entre enlace e @import?

1.link no solo puede importar hojas de estilo, sino también otros elementos como favicon, pero @import solo puede importar hojas de estilo.
2.link es sintaxis XHTML y no hay problemas de compatibilidad, pero @import solo se propuso en CSS2. 1, y en IE5+ Solo es compatible con versiones posteriores, por lo que no es compatible con navegadores de versiones inferiores.
3. Puede operar el DOM a través de JS e insertar etiquetas de enlace para cambiar el estilo, ya que el método DOM se basa en documentos, no puedes usar @import para insertar estilos.
4.link se carga al mismo tiempo que se carga la página, y @import se carga después de cargar la página.

3. ¿Cuál es la diferencia entre título y h1, la diferencia entre by fuerte y la diferencia entre i y em?

La diferencia entre título y h1 El título representado por la etiqueta de título es el nombre de toda la página web, es decir, la etiqueta h1 que se muestra en la barra de pestañas en la parte superior del navegador es el título del contenido de la página web, que es Equivale al título de un artículo o a un determinado párrafo de texto de una página web
.

La diferencia entre b y strong es visualmente la misma, pero semánticamente hablando, b es simplemente negrita y strong enfatiza el contenido, lo que generalmente es útil para SEO.

La diferencia entre i y em La función de la etiqueta i: es solo hacer que la fuente aparezca en cursiva y no tiene ningún efecto en el SEO.
El papel de la etiqueta em: no solo puede poner la fuente en cursiva, sino también fortalecer el tono y decirle a los motores de búsqueda que esto es importante.

4. ¿Cuál es la diferencia entre el título y el alt de una imagen?

alt es el texto alternativo que se muestra en la página web cuando la imagen no se carga; el título es el texto que se muestra cuando se coloca el mouse sobre él.
Estas son diferencias superficiales: alt es un atributo necesario de img, pero el título no lo es.

5. ¿Cuándo se utilizan los formatos png, jpg y gif?

1.png: compresión sin pérdida, más grande que jpg/jpeg, solo adecuada para íconos pequeños.
2.jpg/jpeg: se adopta un algoritmo de compresión, con un poco de distorsión, mucho más pequeño que png
3.gif: generalmente solo animaciones, que están siendo reemplazadas por el formato webm de Google
4.webm: un nuevo formato de archivo propuesto por Google, buen soporte para YouTube y Flash, fluidez de dispositivos móviles

1.2 preguntas de la entrevista CSS

6. ¿Presentar el modelo de caja CSS?

Modelo de cuadro estándar: ancho = ancho del contenido (contenido) + borde + relleno + margen
Modelo de cuadro IE de versión baja: ancho = ancho del contenido (contenido+borde+relleno) + margen

propiedad del tamaño de la caja? Se utiliza para controlar el modo de análisis del modelo de caja del elemento, el valor predeterminado es content-box
context-box: modelo de caja estándar W3C, establece el atributo alto/ancho del elemento para hacer referencia al alto/ancho del borde de la parte del contenido
. -box: modelo de caja tradicional IE. Establecer los atributos de altura/ancho del elemento se refiere a
la altura/ancho del borde + relleno + parte de contenido

7. ¿Cuál es la diferencia entre altura de línea y altura?

la altura es la altura del elemento en sí y la altura de la línea es la altura de la línea del texto dentro del elemento.
Si la altura y la altura de la línea de un elemento son iguales, significa que la línea de texto está centrada verticalmente en el elemento.

8.¿Qué son los selectores CSS?¿Qué propiedades se pueden heredar?

Selectores CSS: selector de id (#myid), selector de clase (.myclassname), selector de etiquetas (div, h1, p), selector adyacente (h1 +
p), subselector (ul > li), selector de descendientes (li
a) , selector comodín (*), selector de atributos (a[rel="external"]), selector de pseudoclase (a:hover, li:nth-child)

Propiedades heredables: tamaño de fuente, familia de fuentes, color

Estilos no heredables: borde, relleno, margen, ancho, alto

Prioridad (principio de proximidad): !important > [ id > class > tag ] !important tiene mayor prioridad que en línea

9.Pregunta de la entrevista: ¿Cómo calcular el algoritmo de prioridad CSS?

Selector de elementos: 1 selector de clase: 10 selector de identificación: 100 estilo en línea: 1000

El estilo declarado por! Importante tiene la máxima prioridad, si hay un conflicto se volverá a calcular.

10. Pregunta de la entrevista: dibuja un triángulo usando CSS

Establezca el ancho y el alto en 0 y establezca el atributo de borde.tran{ ancho: 0; alto: 0; borde izquierdo: 50 px rojo sólido; borde derecho: 50 px rojo sólido; borde inferior: 100 px sólido #000; }





11. Pregunta de la entrevista: ¿Cómo centrar un cuadro horizontal y verticalmente sin especificar ancho y alto?

Deje que su elemento padre esté en una posición relativa y el elemento interno en una posición absoluta. El elemento padre aquí es el cuerpo.

Principio: Sea 0 las distancias superior, inferior, izquierda y derecha de una imagen con ancho y alto indefinidos. Luego, dé un margen para adaptarse. Se puede imaginar como una caja, que aplica la misma fuerza en cuatro direcciones, de modo que se formará una fuerza relativa equilibrada para mantenerla en la posición media.

 .box1{
    
    
        width: 200px;
        height: 200px;
        background-color: red;
        position: relative;

        .box2{
    
    
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background-color: #000;
        }
    }

12. Pregunta de la entrevista: ¿Cuáles son los valores de visualización?Explique su función.

block Este elemento se mostrará como un elemento a nivel de bloque con saltos de línea antes y después de este elemento.

none Este elemento no se mostrará.

inline-block Elemento de bloque en línea.

elemento de lista Este elemento se mostrará como una lista.

tabla Este elemento se mostrará como una tabla a nivel de bloque

heredar especifica que el valor del atributo de visualización debe heredarse del elemento principal

13. Pregunta de la entrevista: ¿Entiende la especificación BFC (contexto de formato de bloque)?

¿Qué es BFC? Los elementos flotantes y de posición absoluta, los contenedores a nivel de bloque que no son cuadros a nivel de bloque (como bloques en línea, celdas de tabla y
títulos de tabla)
y cuadros a nivel de bloque con un valor de desbordamiento distinto de "visible" serán todos para sus contenidos Nuevo BFC (Contexto de formato de nivel de bloque).

BFC tiene las siguientes características: Las Cajas internas se colocarán una tras otra en dirección vertical, comenzando desde arriba. La distancia vertical de la Caja está determinada por el margen. Los márgenes de dos cuadros adyacentes que pertenecen al mismo
BFC se superpondrán. El lado izquierdo del cuadro de margen de cada elemento
toca el lado izquierdo del cuadro de borde del bloque contenedor (para el formato de izquierda a derecha, de lo contrario ocurre lo contrario). Esto es cierto incluso si hay flotación. El área BFC no se superpondrá con el cuadro flotante.

BFC es un contenedor independiente aislado en la página. Los subelementos dentro del contenedor no afectarán a los elementos externos y viceversa. Al calcular la altura de BFC, los elementos flotantes también participan en el cálculo.

¿Cómo activar BFC? float Valores distintos de none overflow Valores distintos de visibles
(oculto, automático, desplazamiento) display
(table-cell, table-caption, inline-block, flex, inline-flex)
valores de posición (absolutos, fijos) elementos del conjunto de campos

14.Pregunta de la entrevista: ¿Cuáles son las formas de limpiar los flotadores?

1. Agregue desbordamiento al elemento principal: oculto
3. Use clear: ambos para borrar el flotador y agregue este atributo debajo de todos los elementos flotantes, lo que puede eliminar la destructividad del flotador, pero agregará etiquetas innecesarias.
4. Utilice pseudoelementos para borrar los flotadores (recomendado)

15.Pregunta de la entrevista: ¿Deben usarse fuentes pares o impares en las páginas web?

Utilice números pares, porque habrá muchos cálculos desde la codificación hasta el análisis, y los números pares son más fáciles de calcular como enteros, mientras que los números impares a veces son difíciles de dividir y los decimales deben conservarse o descartarse.

16. Pregunta de la entrevista: ¿Qué es el restablecimiento de CSS?

Las etiquetas HTML tienen estilos predeterminados en los navegadores y existen diferencias en los estilos predeterminados de diferentes navegadores.
El estilo predeterminado del navegador durante el desarrollo puede causarnos problemas de compatibilidad con varios navegadores y afectar la eficiencia del desarrollo. Sobrescribe todos los estilos predeterminados del navegador desde el principio.

17.Pregunta de la entrevista: ¿Qué es CSS Sprite y cuáles son sus ventajas y desventajas?

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

ventaja:

Reduzca la cantidad de solicitudes HTTP y mejore enormemente la velocidad de carga de la página. Aumente la repetición de la información de la imagen, mejore la relación de compresión y reduzca el tamaño de la imagen.
Cambiar el estilo es fácil, simplemente modifica el color o estilo de una o varias imágenes. defecto:

La fusión de imágenes es problemática. El mantenimiento es problemático. Modificar una imagen puede requerir cambiar el diseño de toda la imagen y el estilo.

18. Pregunta de la entrevista: La diferencia entre visualización: ninguna y visibilidad: oculta;

1.display:ninguno desaparece por completo, no ocupa un lugar en el flujo de documentos y el navegador no analizará el elemento;visibilidad:oculto desaparece visualmente, lo que puede entenderse como el efecto de que la transparencia sea 0 y ocupe un lugar en el flujo de documentos, el navegador analizará el elemento;

2. Usar visibilidad: oculto es mejor que mostrar: ninguno en términos de rendimiento. Cuando mostrar: ninguno cambia la visibilidad, la página volverá a fluir (cuando algunos elementos de la página necesiten cambiar el tamaño, el diseño, mostrar y ocultar, etc.) la página se reconstruirá, en este momento se realizará un reflujo. Todas las páginas deben generar un reflujo cuando se cargan por primera vez), pero cuando la visibilidad cambia para mostrarse o no, no provocará un reflujo.

19.¿Cuáles son los valores de posición?¿Cuál es su función?

estático (predeterminado): organizar de acuerdo con el flujo normal de documentos; relativo (posicionamiento relativo): no se separe del flujo de documentos, consulte su propia posición estática a través del posicionamiento superior, inferior, izquierdo y derecho; absoluto (posicionamiento absoluto)
: referirse al más cercano no es El elemento padre de estático
se coloca arriba, abajo, izquierda, derecha; fijo (posicionamiento fijo): el objeto de referencia fijo es la ventana visual

20. Pregunta de la entrevista: La diferencia entre opacidad y rgba

Tanto rgba() como opacidad pueden lograr transparencia, pero la mayor diferencia es que la opacidad actúa sobre el elemento y la transparencia de todo el contenido dentro del elemento, mientras que rgba() solo actúa sobre el color del elemento o su color de fondo.
La opacidad heredará el atributo de opacidad del elemento principal, pero los elementos descendientes del elemento del conjunto RGBA no heredarán el atributo de opacidad.

1.3 Preguntas básicas de la entrevista de JavaScript

21.Pregunta de la entrevista: ¿Cuáles son las formas de retrasar la carga de JS?

La carga retrasada de JS ayuda a mejorar la velocidad de carga de la página.
Generalmente hay seis formas: diferir atributo, atributo asíncrono, creación dinámica de dom, usar el método getScript de jquery, usar el método de retraso setTimeout y dejar que js se cargue al final.

script src="test1.js" defer="defer"
script src="test1.js" async
$.getScript("outer.js",function(){
    
    //回调函数,成功获取文件后执行的函数  
      console.log("脚本加载完成")  
});

22.Pregunta de la entrevista: ¿Cuáles son los tipos de datos JS?

Tipos de datos simples (también llamados tipos de datos básicos):
indefinido, nulo, booleano, numérico y cadena. También hay un tipo de datos complejo: Objeto, que se compone esencialmente de un conjunto de pares de nombre-valor desordenados.

Entre ellos, Indefinido, Nulo, Booleano y Número son todos tipos básicos. Objeto, matriz y función son tipos de referencia

23. Pregunta de la entrevista: la diferencia entre nulo e indefinido

nulo significa que no hay ningún objeto, es decir, no debería haber ningún valor allí

1) Como parámetro de una función, significa que el parámetro de la función no es un objeto

2) Como punto final de la cadena del prototipo del objeto.

indefinido significa valor faltante, es decir, debería haber un valor aquí, pero no está definido

1) Los parámetros formales están definidos, pero no se pasan parámetros reales y se muestra indefinido.

2) Cuando el nombre del atributo del objeto no existe, se muestra indefinido.

3) La función no escribe un valor de retorno, es decir, no escribe un retorno y lo que obtiene no está definido.

4) Se escribe la devolución, pero no se asigna ningún valor y lo que se obtiene no está definido.

Convertir nulo e indefinido a tipo de datos numérico

nulo por defecto es 0

indefinido se convierte a NaN de forma predeterminada

24.Pregunta de la entrevista: ¿Cuál es la diferencia entre == y ===?

== Comprueba la igualdad de valores, permite la conversión de tipos
=== Comprueba la igualdad de valores y tipos, no permite la conversión de tipos

25. Preguntas de la entrevista: microtareas y macrotareas JS

setTimeout(function(){
    
    
            console.log('1')
        });

        new Promise(function(resolve){
    
    
            console.log('2');
                    resolve();
        }).then(function(){
    
    
            console.log('3')
        });

        console.log('4');
        2 4 3 1

Ejecute una tarea macro en la pila de ejecución.

Si se encuentra una microtarea durante la ejecución, la microtarea se agrega a la cola de microtarea.

Después de ejecutar la macrotarea actual, las tareas en la cola de microtareas se ejecutarán inmediatamente.

Una vez ejecutadas las tareas en la cola de microtareas actual, se verifica la representación y el subproceso de la GUI se hace cargo de la representación.

Una vez completada la renderización, el subproceso js toma el control, inicia el siguiente bucle de eventos y ejecuta la siguiente tarea macro (tomada de la cola de eventos).

Microtareas: proceso.nextTick, MutationObserver, Promise.luego captura finalmente

Tareas macro: E/S, setTimeout, setInterval, setImmediate, requestAnimationFrame

26. Preguntas de la entrevista: alcance de JS + este puntero + preguntas de prueba prototipo

27. Pregunta de la entrevista: ¿Qué métodos puedes escribir para determinar si una variable es una matriz en JS?

var aria = [1,23,4];
console.log(ary instanciade Array)//true;

var aria = [1,23,4];
console.log(ary. proto .constructormatriz);//verdadero
console.log(ary.constructor
Array)//true Estos dos fragmentos de código son iguales

var año = [1,23,4];
function isArray(o) { return Objeto.prototipo.toString.call(o) == '[objeto Array]'; } console.log(isArray(año));


28. Pregunta de la entrevista: ¿Para qué se utiliza el corte? ¿El corte cambiará la matriz original?

slice不会改变原数组
var arr=[1,2,3,4,5];
var arr2=arr.slice(1,3);
console.log(arr2);//[2,3]
console.log(arr);//[1,2,3,4,5]

splice会改变原数组
var arr=[1,2,3,4,5];
var arr1=arr.splice(1,3);
console.log(arr1);//[2,3,4]
console.log(arr);//[1,5]

29. Pregunta de la entrevista: deduplicación de matrices JS

function dedupe(array){
    
    
 return Array.from(new Set(array));
}
dedupe([1,1,2,3]) //[1,2,3]

30. Pregunta de la entrevista: ¿Qué hace exactamente el nuevo operador?

El nuevo operador crea un nuevo objeto vacío. El prototipo de este objeto apunta al prototipo del constructor. Este objeto se devuelve después de ejecutar el constructor.

1. Cree un objeto vacío
2. Enlace al prototipo
3. Vincule este puntero y ejecute el constructor
4. Asegúrese de que se devuelva el objeto

1. Cree un objeto vacío
var obj = new Object();
2. Configure la cadena de prototipos (cuando se llama al constructor para crear una nueva instancia, la instancia contendrá un puntero (propiedad interna) que apunta al objeto prototipo del constructor)
obj.proto= Func.prototype;
3. Deje que esto en Func apunte a obj y ejecute el cuerpo de la función de Func. (Después de crear un nuevo objeto, asigne el alcance del constructor al nuevo objeto (para que esto apunte al nuevo objeto))
var result =Func.call(obj);
4. Determine el tipo de valor de retorno de Func:
si es un tipo de valor, devuelve obj. Si es un tipo de referencia, devuelve un objeto de este tipo de referencia.

if (typeof(result) == “object”){
    
    
func=result;
}
else{
    
    
func=obj;;
}

31. Pregunta de la entrevista: Cierre

Un cierre es una función que puede leer las variables internas de otras funciones.
① Función función anidada

②Se puede hacer referencia a los parámetros y variables fuera de la función dentro de la función

③Los parámetros y variables no serán reciclados por el mecanismo de recolección de basura

function f1(){
    
    

    var n=999;

    function f2(){
    
    
      alert(n);
    }

    return f2;

  }

  var result=f1();

  result(); // 999

32. Pregunta de la entrevista: Cadena prototipo

1. Prototipo ① Todos los tipos de referencia tienen un atributo proto (prototipo implícito) y el valor del atributo es un objeto ordinario ② Todas las funciones
tienen un atributo prototipo (prototipo) y el valor del atributo es un objeto ordinario ③ Proto de todos los tipos de referencia El El atributo apunta al prototipo de su constructor.

var a = [1,2,3]; a.proto === Matriz.prototipo; // verdadero

2. Cadena de prototipos
Al acceder a un determinado atributo de un objeto, primero buscará en el atributo del propio objeto, si no lo encuentra, buscará en su protoprototipo implícito, es decir, el prototipo de su constructor. no se encuentra, si no se encuentra se buscará en el prototipo del prototipo del constructor, de esta forma, buscando capa por capa hacia arriba se formará una estructura de cadena, a la que llamamos cadena prototipo.

33. Pregunta de la entrevista: ¿Cuáles son los métodos de herencia JS?

1. 构造函数继承
封装构造函数,通过new关键字创建实例对象;只有当一个函数以 new 关键字来调用的时候,我们才能说它是一个构造函数。
function Student(name, age, sex) {
    
    
            this.name = name;
            this.age = age;
            this.sex = sex;
        }
var s1 = new Student('张三', 11, 0)
var s2 = new Student('李四', 13, 1)

2.原型链继承
function Person(name, age) {
    
    
    this.name = name;
    this.age = age;
}

Person.prototype.say = function() {
    
    
    console.log('Hello');
};

var p1 = new Person('Tom', 18);
var p2 = new Person('Jack', 34);

console.log(p1.say === p2.say); // true

34. Pregunta de la entrevista: Dime la diferencia entre llamar, aplicar y vincular

En JS, estos tres se utilizan para cambiar el punto de este objeto de la función, ¿cuáles son las diferencias entre ellos?
Antes de hablar de las diferencias, resumamos las similitudes entre los tres:
1. Todos se usan para cambiar el puntero del objeto this de la función.
2. El primer parámetro es el objeto al que apunta.
3. Puede utilizar parámetros posteriores para pasar parámetros.

var xw = {
    
    
                        name : "小王",
                        gender : "男",
                        age : 24,
                        say : function() {
    
    
                                alert(this.name + " , " + this.gender + " ,今年" + this.age);                                
                        }
                }
                var xh = {
    
    
                        name : "小红",
                        gender : "女",
                        age : 18
                }
                xw.say();

本身没什么好说的,显示的肯定是小王 , 男 , 今年24。
那么如何用xw的say方法来显示xh的数据呢。
对于call可以这样:

xw.say.call(xh);  alert: 小红 ,,今年18
复制代码
对于apply可以这样:

xw.say.apply(xh); alert: 小红 ,,今年18
复制代码
而对于bind来说需要这样:

xw.say.bind(xh)(); alert: 小红 ,,今年18
call和apply都是对函数的直接调用,而bind方法返回的仍然是一个函数,因此后面还需要 ()来进行调用才可以

   var xw = {
    
    
                        name : "小王",
                        gender : "男",
                        age : 24,
                        say : function(school,grade) {
    
    
                                alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);                                
                        }
                }
                var xh = {
    
    
                        name : "小红",
                        gender : "女",
                        age : 18
                }


call后面的参数与say方法中是一一对应的,而apply的第二个参数是一个数组,数组中的元素是和say方法中一一对应的,这就是两者最大的区别。

可以看到say方法多了两个参数,我们通过call/apply的参数进行传参。
对于call来说是这样的

xw.say.call(xh,"实验小学","六年级");       
复制代码
而对于apply来说是这样的

xw.say.apply(xh,["实验小学","六年级郑州牛皮癣医院"]);
复制代码
看到区别了吗,call后面的参数与say方法中是一一对应的,而apply的第二个参数是一个数组,数组中的元素是和say方法中一一对应的,这就是两者最大的区别。
那么bind怎么传参呢?它可以像call那样传参。

xw.say.bind(xh,"实验小学","六年级")();

35.Pregunta de la entrevista: ¿Cuál es el principio detrás de la clasificación?

36. Preguntas de la entrevista: copia profunda y copia superficial

Copia superficial: solo copia la referencia al objeto, no el objeto en sí.

Copia profunda: copia todos los objetos a los que hace referencia el objeto.

//深拷贝
function deepClone(data) {
    
    
    let _data = JSON.stringify(data),
        dataClone = JSON.parse(_data);
    return dataClone;
};
//测试
let arr = [1,2,3],
    _arr = deepClone(arr);
arr[0] = 2;
console.log(arr,_arr)//[2,2,3]  [1,2,3]

lodash 深拷贝
安装依赖
main.js导入
import _ form 'lodash'
Vue.prototype._=_

使用
 const res = [{
    
    name:'张三',age:38},{
    
    name:'李四',age:25}];
 this.res1= _.cloneDeep(res);

37. Pregunta de la entrevista: la diferencia entre almacenamiento local, almacenamiento de sesiones y cookies

Cookie: guarda la información de inicio de sesión. Por ejemplo, al iniciar sesión en un determinado sitio web, puede ver "Recordar contraseña", esto se logra almacenando un dato en la cookie para identificar la identidad del usuario.

sessionStorage: la sesión puede guardar parte de los datos en la sesión actual y los datos seguirán existiendo cuando se actualice la página. Pero una vez cerrada la página, los datos del almacenamiento de sesión se borrarán.

almacenamiento local: es una tecnología recientemente agregada en el estándar HTML5. Por supuesto, ya en la era IE6, se usaba un elemento de datos de usuario para el almacenamiento local. En ese momento, considerando la compatibilidad del navegador, una solución más general era utilizar flash. Hoy en día, localStorage es compatible con la mayoría de los navegadores.

1) Tamaño de almacenamiento

Cookie: generalmente no más de 4K (debido a que cada solicitud http lleva una cookie, las cookies solo son adecuadas para almacenar datos muy pequeños, como identificadores de sesión)

Almacenamiento de sesión: 5M o más

almacenamiento local: 5M o más 2) Período de validez de los datos

Cookie: Generalmente generada por el servidor, se puede configurar el tiempo de vencimiento; si no se establece el tiempo, la cookie caducará cuando se cierre el navegador. Si se establece el tiempo, la cookie se almacenará en el disco duro y caducará después de que expire.

sessionStorage: solo válido hasta que se cierre la ventana actual del navegador. La página se cerrará o se borrará el navegador.

localStorage: válido de forma permanente, se guardará cuando se cierre la ventana o el navegador, a menos que se borre manualmente de forma permanente, por lo que se utiliza como datos persistentes.

Cookie de escenario de aplicación: determina si el usuario ha iniciado sesión en el sitio web, para iniciar sesión automáticamente la próxima vez o recordar la contraseña, guardar información del evento, etc.

sessionStorage: inicio de sesión único para cuentas confidenciales; se usa más una sola página (sessionStorage puede garantizar que
los datos de sessionStorage estén vacíos cuando se abre la página)

almacenamiento local: a menudo se usa para inicios de sesión a largo plazo (para determinar si el usuario ha iniciado sesión), adecuado para el almacenamiento local de datos a largo plazo

Capítulo 2 Preguntas avanzadas de la entrevista

2.1 Preguntas de la entrevista ES6

38. Pregunta de la entrevista: diferencia entre var, let y const

Las variables declaradas con var se pueden declarar repetidamente, pero let no se pueden declarar repetidamente. Var no se limita al nivel de bloque, mientras que let se limita al nivel de bloque. Var se asignará a la ventana (se adjuntará
un atributo), mientras que let no está relacionado con la ventana. Mapping
var puede acceder a variables encima de la declaración, mientras que let tiene una zona muerta temporal. Acceder a la variable encima de la declaración informará un error. A const se le debe asignar un valor después de la declaración; de lo contrario, se informará un error. . Const define una cantidad inmutable y, si se cambia, se informará un error para const y let
. No se asignará a la ventana, admite alcance a nivel de bloque y se informará un error al acceder a las variables situadas encima de la declaración. .

39.Pregunta de la entrevista: ¿Cuál es la diferencia entre funciones de flecha y funciones ordinarias?

1) Con la función de flecha, esto no apunta a la ventana, sino al padre (apuntar es variable) (2) El objeto de argumentos no se puede usar (3) No se puede usar
como constructor, lo que significa que el nuevo comando no se puede usar; de lo contrario, se generará un error (4) El comando de rendimiento no se puede usar, por lo que la función de flecha no se puede usar como
función de generador.

1: El método de escritura es diferente.

2: Existe un fenómeno de promoción variable en funciones ordinarias.

3: las funciones de flecha no se pueden utilizar como constructores

4: La dirección de este de los dos es diferente.

5: Los argumentos de la función de flecha apuntan a los argumentos del ámbito donde se encuentra su función principal.

6: La función de flecha no tiene un nuevo objetivo

40. Pregunta de la entrevista: ¿Cuántos estados tiene Promise?

Tres estados de promesa:

Pendiente, cumplido, rechazado (indeciso, cumplido, rechazado), sólo puede existir un estado al mismo tiempo, y una vez que el estado cambia, no puede volver a cambiar. Promise es un constructor. El objeto de promesa representa una tarea con dos resultados posibles (éxito o fracaso). También contiene múltiples devoluciones de llamada y envía las devoluciones de llamada correspondientes cuando ocurren diferentes resultados.

1. Inicialización, estado: pendiente
​2. Al llamar a resolver (éxito), estado: pengding=>cumplido
​3. Al llamar a rechazar (fallo), estado: pendiente=>rechazado

41. Pregunta de la entrevista: la diferencia entre buscar y filtrar

42. Pregunta de la entrevista: La diferencia entre algunos y todos

2.2 Preguntas de la entrevista de Git

43.comandos comunes de git

44.git resolver conflictos

2.3 Preguntas de la entrevista de Vue

45.Pregunta de la entrevista: ¿Cuáles son los ciclos de vida de Vue2.x?

46. ​​Pregunta de la entrevista: ¿Qué ciclos de vida se ejecutarán al ingresar por primera vez a un componente o página?

47. Pregunta de la entrevista: Cuénteme sobre su comprensión de mantener vivo

48. Pregunta de la entrevista: la diferencia entre v-if y v-show

49. Pregunta de la entrevista: v-if y v-for prioridad

50.Pregunta de la entrevista: ¿Qué es ref?

51.Pregunta de la entrevista: ¿Qué es nextTick?

52. Pregunta de la entrevista: ¿Qué son los guardias de enrutamiento y navegación?

53. Pregunta de la entrevista: Cómo hacer penetración de estilo en Vue

54. Pregunta de la entrevista: principio de alcance

55.Pregunta de la entrevista: ¿Vuex es un flujo de datos unidireccional o un flujo de datos bidireccional?

56. Pregunta de la entrevista: Háblame de MVVM

57. Preguntas de la entrevista: el principio de vinculación bidireccional

58. Pregunta de la entrevista: ¿Qué es el DOM virtual?

59. Pregunta de la entrevista: algoritmo diff

60. Pregunta de la entrevista: valor de paso del componente Vue

61.Pregunta de la entrevista: Presente SPA y ¿cuáles son las desventajas de SPA?

62. Pregunta de la entrevista: enlace bidireccional y enlace unidireccional de Vue

63.Pregunta de la entrevista: ¿Quién tiene mayor prioridad, los accesorios o los datos?

64.Pregunta de la entrevista: ¿Cuál es la diferencia entre métodos calculados y vigilancia?

65. Pregunta de la entrevista: Vuex

Supongo que te gusta

Origin blog.csdn.net/qq_22167557/article/details/121393236
Recomendado
Clasificación