La colección de preguntas de la entrevista inicial de 2023 (con respuestas) se actualiza continuamente...

js clase basica

1. ¿Qué es la cadena de prototipos y el significado de la existencia de la cadena de prototipos?

(1) ¿Qué es la cadena prototipo?

Respuesta: La cadena de prototipos es que cada objeto tiene un objeto prototipo, y el objeto usa su prototipo como plantilla y hereda métodos y propiedades del prototipo. Un objeto prototipo también puede tener un prototipo y heredar métodos y propiedades de él, capa por capa, y así sucesivamente. Esta relación se llama la cadena prototipo.
Comprensión simple: la cadena de prototipos es que si la definición no se puede encontrar en el objeto actual, continuará buscando en el objeto prototipo del objeto actual hasta que no esté definido.

(2) ¿Cuál es el significado de la existencia del prototipo y la cadena de prototipos?

Respuesta: los objetos de instancia pueden compartir propiedades y métodos de prototipo de constructor para ahorrar memoria. Cuantas más propiedades y métodos haya en el prototipo del constructor, mayor será el ahorro de memoria.

2. ¿Qué es el alcance?

El alcance se divide en: 1. Alcance global, 2. Alcance de función, 3. Alcance a nivel de bloque

Respuesta: El alcance es la accesibilidad de las variables, funciones y objetos en ciertas partes del código de tiempo de ejecución. El alcance determina la visibilidad de las variables y otros recursos en el bloque de código.

3. ¿Qué es un cierre?

Las funciones que pueden acceder a variables dentro de otras funciones se llaman cierres.
Se utilizará ese tipo de escena, la encapsulación de algunas funciones de eventos,
el cierre en sí mismo traerá memoria residente, que no será destruida en el tiempo después de ser referenciada.

4. Proceso de renderizado del navegador

Cuando ingresamos una URL en el navegador, eventualmente se presentará una página web completa. Seguirá los siguientes pasos:

1. Carga HTML

Después de ingresar la URL en la página, primero obtendrá el archivo HTML. HTML es la base de una página, por lo que se descargará desde el principio y se analizará una vez que se complete la descarga.

2. Descarga de otros recursos estáticos
En el proceso de análisis de HTML, si hay algunos enlaces de recursos externos en el texto HTML, como CSS, JS e imágenes, etc., se habilitarán otros subprocesos para descargar estos recursos estáticos inmediatamente. Cuando se encuentra un archivo JS en el encabezado, el análisis de HTML se detendrá. Después de descargar y ejecutar el archivo JS, el trabajo de análisis de HTML continuará para evitar que JS modifique los resultados de análisis completados.

De lo anterior, se sabe que los archivos JS colocados en la cabecera pertenecen a la carga síncrona, lo que bloqueará la construcción del árbol DOM, afectando así la carga de la página. Cuando hay muchos archivos JS, el tiempo de la pantalla en blanco de la página también será más largo

5. Introducción a los tipos de datos:

Los tipos de datos básicos comúnmente utilizados en js incluyen undefined - - (indefinido), null- - (vacío), número - - (número), booleano- - (valor booleano), cadena- - (cadena), Símbolo - - (símbolo );

El tipo de datos de referencia de js es el tipo de objeto Object- - (objeto), como: matriz - - (matriz), función - - (función), fecha - - (hora), etc.;

6. Copia profunda

Copia superficial: la copia superficial es copiar cada atributo del objeto por turno, pero cuando el valor del atributo del objeto es un tipo de referencia, lo que realmente se copia es su referencia, y cuando el valor al que apunta la referencia cambia, lo hará. también cambia

Copia profunda: la copia profunda y la copia superficial son para tipos de datos complejos (objetos y matrices).La copia superficial solo copia una capa, mientras que la copia profunda es una copia capa por capa. La copia profunda copia el valor de la variable. Para las variables de tipo no básico, se recurre a la variable de tipo básico y luego se copia. El objeto después de la copia profunda está completamente aislado del objeto original y no se afecta entre sí. Las modificaciones a un objeto no afectarán al otro objeto.

7. Varios métodos de centrado horizontal css

1. Se realizan el margen y el ancho, y se define un ancho fijo en el contenedor, y el valor de izquierda y derecha del margen es automático.
2. El contenido establece inline-block y el elemento principal text-align:center.
3. El posicionamiento absoluto realiza el centrado horizontal, creo que todos están muy familiarizados con él y debe usarse mucho.
4. La implementación flexible de css3.
5. css3 的 ajuste-contenido 。

8. ¿Sabe qué funciones prácticas de orden superior están disponibles para matrices?

Hay muchos métodos para arreglos, todos los cuales son simples y convenientes, como empujar, sacar, etc., pero hay muchas funciones de alto orden que se usan en la práctica. Ahora resumamos los métodos y escenarios. Primero, ¿qué es un alto -función de orden: función de orden superior, que es una función en la que se puede pasar otra función como parámetro.
Haga clic para ver el caso detallado

1. para cada
2. filtrar
3. mapa
4. clasificar
5. alguno
6. cada
7. reducir
8. encontrar

9. La diferencia entre llamar, aplicar y vincular

• call, apply y bind son lo mismo : todos cambian el punto de esto, y el primer parámetro pasado es el punto de enlace de esto. En modo no estricto, si el primer parámetro es nulo o indefinido, el objeto global be (El navegador es una ventana) Como el valor de this, se debe tener en cuenta que en modo estricto, nulo es nulo y undefined es undefined
• La única diferencia entre llamar y aplicar es : llamar pases en una lista de parámetros y aplicar pases en una matriz, que también puede ser una matriz de clase
• La diferencia entre bind, call y apply : bind devuelve una función que cambia el punto de esta, lo cual es conveniente para llamar más tarde, a diferencia de call y apply, que se llamarán inmediatamente; bind es similar a call, y la lista de parámetros también es pasado, pero puede ser más Pasar una vez, no es necesario llamar, pasar una vez
• Vale la pena señalar : cuando la función devuelta por bind usa new como constructor, el límite de este valor no será válido, y esto apunta al objeto de instancia, pero los parámetros entrantes siguen siendo válidos (la prioridad de la nueva llamada> el enlace llamar)

categoría Vue

10. La diferencia entre vue2 y vue3

1. El principio del enlace de datos bidireccional es diferente
2. Ya sea para apoyar la fragmentación;
3. Los tipos de API son diferentes;
4. Definir variables de datos y métodos son diferentes;
5. Las funciones de enlace del ciclo de vida son diferentes;
6. El padre y el hijo pasan los parámetros de manera diferente;
7. Las instrucciones son diferentes de las tragamonedas;
8. El archivo main.js es diferente.

vue2: vue2 no admite fragmentos.
vue3: vue3 soporta fragmentos (Fragments), es decir, puede tener múltiples nodos raíz.
vue2: el enlace de datos bidireccional de vue2 se realiza mediante el uso de un APIObject.definePropert() de ES5 para secuestrar los datos, combinado con el modo de publicación y suscripción.
vue3: la API de proxy de ES6 se usa en vue3 para datos de proxy. En comparación con vue2.x, las ventajas de usar proxy son las siguientes:
(1) defineProperty solo puede monitorear una determinada propiedad y no puede monitorear todos los objetos
(2) Puede guardar para entrada, cierre y otro contenido para mejorar la eficiencia (Enlace directo Todo el objeto es suficiente)
(3). La matriz se puede monitorear y no es necesario realizar operaciones específicas solo en la matriz. Vue3.x puede detectar cambios en los datos internos de la matriz.

11. La diferencia entre ruta y enrutador

router es una instancia de VueRouter, que es equivalente a un objeto de enrutador global, que contiene muchos atributos y subobjetos, como el objeto de historial. Los enlaces de salto que se usan con frecuencia pueden usar this.$router.push, que es lo mismo que el salto de enlace de enrutador.

route es equivalente al objeto de enrutamiento actual. Se pueden obtener algunos parámetros, y cada ruta tendrá un objeto de enrutador, del cual se puede obtener el nombre, la ruta, los parámetros, etc.

12. La diferencia entre los dos modos de enrutamiento vue

El modo hash
se refiere al signo # y los siguientes caracteres después de la URL. Cada vez que se actualiza la página, se cambia directamente después de #.

Principio hash: uso flexible de la función de puntería de html, cambiar la ruta después de # es esencialmente cambiar el punto de puntería de la página actual, por lo que la página no se actualizará. Encuentre las reglas de enrutamiento correspondientes escuchando el cambio de evento onhashchange() del navegador.

Dado que el cambio del valor hash no hará que el navegador envíe una solicitud al servidor, y el cambio hash activará el evento hashchange (hashchange solo puede cambiar el fragmento de URL después de #); aunque la ruta hash aparece en la URL, no aparecerá en la solicitud HTTP. No tiene ningún efecto en el backend, por lo que cambiar el valor hash no recargará la página, básicamente usando hash para implementar el enrutamiento front-end.

El principio del
historial del modo de historial: use dos nuevas API en el historial de H5: pushState() y replaceState() y un evento onpopstate para monitorear los cambios de URL.

Contiene métodos atrás, adelante y adelante; la URL del modo de historial debe ser coherente con el backend, por lo que cambiar al historial también requiere la cooperación del backend; de lo contrario, se informará un error; cada actualización del historial volverá a solicitar la URL completa al backend, es decir, volver a solicitar el servidor. Si el backend no responde a tiempo, ¡se informará un error 404! .

13. El ciclo de vida del keep-alive

Durante el proceso de cambio de componentes, los componentes cambiados se mantienen en la memoria para evitar la representación repetida del DOM, reducir el tiempo de carga y el consumo de rendimiento, y mejorar la experiencia del usuario.

Los componentes creados en keep-alive tendrán dos ganchos de ciclo de vida más: activado (se usa cuando se activa el componente) y desactivado (se llama cuando el componente se va)

La secuencia de activación del gancho es creada->montada->activada, y desactivada se activa al salir. Al entrar de nuevo (adelante o atrás), solo se dispara activado

uso de mantenimiento:

• Si necesita almacenar en caché todo el proyecto, simplemente envuelva la vista del enrutador con keep-alive en app.vue
• Para almacenar en caché algunas páginas, debe agregar un estado en el atributo meta en la configuración de la dirección de enrutamiento y juzgar la vista del enrutador del paquete en app.vue
• También puede usar excluir e incluir para especificar qué componentes se almacenan en caché y qué componentes no se almacenan en caché.

14. Ventajas de mvvm:

1. Tanto mvc como mvvm son una especie de idea de diseño, principalmente que el controlador en mvc evoluciona hacia el modelo de vista en mvvm. Mvvm resuelve principalmente el problema de que una gran cantidad de operaciones dom en mvc mejoran el rendimiento de la representación de páginas y la velocidad de carga
2. La mayor diferencia entre mvvm y mvc es que realiza la sincronización automática de la vista y el modelo. Cuando cambian las propiedades del modelo, no necesitamos manipular manualmente el elemento dom para cambiar la visualización de la vista, cambiará automáticamente. el dom
3. En general, mvvm es mucho más simple que mvc, no necesitamos usar selectores para operar dom con frecuencia

15. El papel del DOM virtual

• mantener la relación entre vista y estado
• Rendimiento de representación mejorado en situaciones de vista complejas
• Antes de actualizar el DOM real, el DOM virtual utilizará el algoritmo Diff para comparar las diferencias entre los dos árboles DOM virtuales nuevos y antiguos, realizar actualizaciones parciales y, finalmente, actualizar las diferencias con el DOM real.

16. ¿Cómo logra vue la optimización del rendimiento?

1. Modularización del código , los lugares de uso común se encapsulan en componentes separados, referenciados donde sea necesario, en lugar de escribir demasiado código repetitivo, cada componente debe tener un significado claro, cuanto mayor sea la reutilización, mejor y configurable Cuanto más fuerte sea el tipo, el mejor, incluir nuestro css también puede reducir el código repetitivo a través de variables css personalizadas de less y sass.
2. La ruta de Vue está configurada en carga diferida , lo que puede acelerar el procesamiento cuando se procesa la primera pantalla.
3. Optimización del empaquetado , modifique los elementos de configuración en vue.config.js y establezca productionSourceMap en falso; de lo contrario, se generarán algunos archivos de mapa después del empaquetado. Si no se cierra, el entorno de generación puede ver el código fuente a través del mapa y puede Habilite la compresión gzip para hacer el paquete más pequeño.
4. Para reducir el uso de imágenes , puede usar algunos efectos css3 en lugar de efectos de imagen, o usar imágenes de sprites para reducir el tamaño de las imágenes.
5. Importación bajo demanda , algunas bibliotecas de terceros que usamos se pueden cargar mediante la importación bajo demanda. Evite introducir partes innecesarias y aumente el tamaño del proyecto sin motivo
6. Use CDN para cargar algunos recursos externamente , como vue-router, axios y otros complementos periféricos de Vue, configure algunos paquetes innecesarios en webpack.config.js y externos externamente módulo referenciado

17. Guardia de ruta

Comprensión de los protectores de enrutamiento

Hay tres tipos de protecciones de enrutamiento: protecciones de navegación global, protecciones de enrutamiento y protecciones de navegación de componentes . El salto de enrutamiento en sí mismo es un proceso relativamente complicado, pero este proceso se puede refinar a través de guardias de navegación, y las operaciones correspondientes se pueden realizar en cada proceso refinado (función de gancho).

Protección de navegación de ruta : la protección de navegación es una función de gancho antes y después del salto de ruta
Intercepción de ruta : antes de que la ruta salte a la ruta especificada, puede saltar manualmente a otras interfaces de enrutamiento y también puede detener el salto.

Clasificación de las protecciones de enrutamiento
1 Protección global :

• Guardia frontal global: beforeEach se activará varias veces,
• Protección de resolución global: protección de resolución beforeResolve
• Protección posterior global: afterEach pasa el objeto de instancia del componente a la siguiente devolución de llamada del componente beforeRouteEnter guard

2. Guardia de enrutamiento :

• Vigilancia exclusiva en antesEntrar ruta

3. Guardas dentro del componente :

• beforeRouteEnter se activa antes de ingresar al componente y solo se activa una vez al ingresar al componente
• beforeRouterUpdate Activado antes de que se actualice el componente (cambio de cadena de consulta de cambio de parámetro dinámico) Después de ingresar el componente, el cambio de parámetro puede activarse varias veces
• beforeRouterLeave se activa antes de abandonar el componente de enrutamiento y solo se activa una vez al abandonar el componente

18. ¿Por qué los datos en el componente Vue deben ser una función?

Debido a que un componente se puede compartir, pero sus datos son privados, cada componente debe devolver un nuevo objeto de datos, devolver un objeto único y no compartir un objeto con otros componentes.

Si está en forma de objeto, todas las instancias compartirán el mismo objeto de datos. Una vez que un componente modifica los datos, todas las instancias se verán afectadas, lo cual es un resultado no deseado.

De esta forma, los atributos de datos de cada instancia son independientes y no se afectarán entre sí. Entonces, ahora sabe por qué los datos del componente vue deben ser una función. Todo esto se debe a las características de js en sí, y no tiene nada que ver con el diseño de vue en sí.

19. ¿Cuáles son las nuevas características de ES6?

 - 新增了块级作用域（let，const）
 - 提供了定义类的语法糖（class）
 - 新增了一种基本数据类型（Symbol）
 - 新增了变量的解构赋值
 - 函数参数允许设置默认值，引入了rest参数，新增了箭头函数。
 - 数组新增了一些API，如isArray / from / of 方法；数组实例新增了 entries()，keys() 和 values() 等方法。
 - 对象和数组新增了扩展运算符
 - ES6新增了模块化（import / export）
 - ES6新增了Set和Map数据结构。
 - ES6原生提供Proxy构造函数，用来生成Proxy实例
 - ES6新增了生成器（Generator）和遍历器（Iterator） 

Hable acerca de la tarea de desestructuración

 - 解构：分解数据结构。
 - 赋值：为变量赋值。
 - 解构赋值：从数组或者对象中提取值，按照对应的位置，对变量赋值（在数组解构中，只 要解构的目标可以遍历，就可以实现解构赋值）。

20. Los beneficios del desarrollo modular:

1. Evite la contaminación variable, los conflictos de nombres
2. Mejorar la reutilización de código
3. Mantenibilidad mejorada
4. Fácil gestión de dependencias

21. Desventajas de JSON.stringify deep copy

1. Si hay un objeto de tiempo en obj, el resultado de JSON.parse después de JSON.stringify, el tiempo solo tendrá la forma de una cadena, no de un objeto 2.
Si hay un RegExp en obj , se imprimirá como un objeto vacío
3. Si hay una función o undefined en el objeto, se descartará directamente
4. Si hay un objeto en json generado por un constructor, la construcción del objeto será descartado
5. Si hay una referencia circular en el objeto, la copia profunda no se puede implementar correctamente
6, si hay NAN en el objeto, se volverá nulo después de la serialización

22. ¿Cuál es la diferencia entre antivibración y estrangulamiento?

Durante el desarrollo, a menudo se encuentran los siguientes escenarios: monitorear el movimiento del mouse al mover el mouse, monitorear el desplazamiento de la página al desplazarse, monitorear el cambio de tamaño al cambiar el tamaño, monitorear la entrada, la búsqueda de botones, la función de envío, etc. En estos escenarios, los eventos se desencadenarán con frecuencia, pero no queremos que los eventos se desencadenen con frecuencia. En este caso, debemos usar antivibración y aceleración para limitar las operaciones frecuentes.

Tanto la antivibración como la limitación son para resolver el problema de la activación frecuente de eventos, pero existen algunas diferencias en los principios de implementación. Consulte a continuación los principios de implementación específicos.

1. Antivibración (rebote):

Cuando el antivibración activa un evento de alta frecuencia, solo se ejecutará una vez después de n segundos, si se vuelve a activar dentro de n segundos, se volverá a calcular.

Breve resumen: la llamada de retraso anterior se cancelará cada vez que se active.

Escenarios de aplicación:
1. Desplazamiento de evento de desplazamiento
2. Evento de cambio de tamaño de zoom de la ventana del navegador
3. Cuando el cuadro de búsqueda ingresa una consulta
4. Validación de formulario
5. Evento de envío de botón

código:

function debounce (fn, delay = 1000) {
    
    
  let time = null
  return function () {
    
    
    // 获取当前this
    let that = this
    // 判断是否已经存在，如果存在直接清除
    if (time) {
    
    
      clearTimeout(time)
    }
    time = setTimeout(() => {
    
    
      // 使fn 中this，执行当前调用者，并传入参数
      fn.apply(that, arguments)
    }, delay)
  }
}
// 测试demo
function logger(e){
    
    
	console.log('log -----')
}
btn.addEventListener('click',debounce(logger, 1000))

2. Acelerador:

Activación de eventos de alta frecuencia, establezca un método de llamada retrasada cada vez que se active un evento y cancele el método de llamada retrasada anteriormente.

Breve resumen: Cada vez que se dispare un evento, juzgará si esperar a que se ejecute la función de retardo.

código:

function throttle (fn, delay = 1000) {
    
    
	let time = null;
	return function () {
    
    
		let that = this;
		// 如果已经存在定时器了，则 不做处理
		if (!time) {
    
    
			time = setTimeout(() => {
    
    
				fn.apply(that, arguments);
				// 完结时，将time改为null
				time = null;
			}, delay);
		}
	};
}

Diferencia: Reduzca la frecuencia de ejecución de devolución de llamada y ahorre recursos informáticos.

• La esencia de antivibración y estrangulamiento es diferente. Anti-shake es convertir múltiples ejecuciones en la última ejecución, y throttling es
  convertir múltiples ejecuciones en cualquier otra ejecución de evento
• Los eventos que deben activarse continuamente mediante la función antivibración solo se ejecutan una vez al final, mientras que la limitación de funciones solo se ejecuta
  una vez dentro de un período de tiempo.

23. El rol y uso de los objetos de promesa en JS

Promise Es una nueva sintaxis propuesta por ES6 para optimizar la escritura de código asíncrono.
El papel de la promesa: ajax es una solicitud asíncrona, el anidamiento de múltiples capas causará un infierno de devolución de llamada, la promesa simula la sincronización y las devoluciones de llamada asíncronas son similares a la sincronización para procesar la lógica comercial.

El método then de la promesa es un método asíncrono, pero se ejecutará antes que el temporizador.

1. El parámetro de promesa es una función, y esta función de devolución de llamada tiene dos parámetros formales (personalizado, generalmente escrito como resolver, rechazar) 2. La
promesa tiene tres estados: pendiente (en espera), pendiente (éxito), rechazada (falla), Parámetros pasados ​​resueltos, control de rechazo
3. Una vez que el estado se envía y cambia, no volverá a cambiar
4. Ejecute con éxito la función de devolución de llamada en .then y falle al ejecutar la función de devolución de llamada en .catch

Características:

La operación asíncrona se expresa en el proceso de operación síncrona, evitando capas de funciones de devolución de llamada anidadas.
El proceso es más claro y el código es más elegante.
Los objetos Promise proporcionan una interfaz unificada que facilita el control de las operaciones asincrónicas.

defecto:

La promesa no se puede cancelar, se ejecutará inmediatamente una vez que se cree y no se puede cancelar a la mitad.
Si no se establece ninguna función de devolución de llamada, los errores que se produzcan dentro de Promise no se reflejarán en el exterior.
Cuando está en estado pendiente, es imposible saber en qué etapa está progresando actualmente (acaba de comenzar o está a punto de completarse).

24. sintaxis async-await

async,await es una nueva sintaxis en es7, que se utiliza para mejorar aún más la escritura de código asíncrono, y es una versión mejorada de la promesa.

asíncrono

• La función asíncrona devuelve un objeto Promise.
• El valor devuelto por la declaración de devolución dentro de la función asíncrona es el valor del objeto Promise

function f1 () {
    
    
  return 1
}
async function f2 () {
    
    
  return 1
}
async function f3 () {
    
    }
const r1 = f1()
const r2 = f2()
const r3 = f3()
console.log(r1) // 1
console.log(r2) // Promise, resolved(1)
console.log(r3) // Promise, resolved(undefined)
r2.then(res => {
    
     console.log(res) })
r3.then(res => {
    
     console.log(res) })

esperar comando

• La función externa de await debe tener un asíncrono.
• En circunstancias normales, el comando await va seguido de un objeto Promise y se devuelve el valor de la promesa. Si no es un objeto Promise, devuelve el valor correspondiente directamente.

El flujo de ejecución dentro de la función asíncrona

1. Al ejecutar una función asíncrona (llamada asyncF), ingrese la función:
2. Ejecutar código síncrono secuencialmente
3. Encuentro en espera, salte de la función asyncF,
4. Continuar para ejecutar el código subsiguiente.
5. Una vez que se completa la ejecución del código asincrónico después de await, se ejecuta el código posterior en asyncF.

25. Macrotareas y Microtareas

Por qué las tareas se dividen en tareas síncronas y tareas asíncronas

Imagínese, si las tareas de js son todas sincrónicas, ¿qué sucederá cuando encuentre tareas que deben ejecutarse después de un retraso, como temporizadores y solicitudes de red?

La página puede estar paralizada y necesita pausarse para esperar el código que tarda mucho en ejecutarse

Por lo tanto, se introdujeron las tareas asincrónicas.

● Tareas sincrónicas: las tareas sincrónicas no necesitan esperar para ver los resultados de ejecución inmediatamente, como la consola
● Tareas asincrónicas: las tareas asincrónicas necesitan esperar un cierto período de tiempo para ver los resultados, como setTimeout, solicitudes de red

Las tareas asincrónicas se pueden subdividir en macro tareas y micro tareas. La siguiente es una lista de las macro tareas y micro tareas aprendidas hasta el momento.

● Ejecutar código síncrono primero
● Encontrar una macrotarea, ponerla en la cola
● Encontrar una microtarea, ponerla en la cola de microtareas
● La pila de ejecución está vacía
○ Insertar la microtarea en la pila para su ejecución
● Después de completar todas las microtareas, tomar implementar la cola de macrotareas

¿Quién ejecuta primero las macrotareas y las microtareas ?Respuesta : Macrotareas