preguntas de la entrevista del día 03

1. ¿Cuáles son las operaciones comunes en DOM?

DOM (Document Object Model) se refiere a una API que representa documentos web en una estructura de árbol en el navegador. Las operaciones DOM comunes incluyen:

1. Obtener elementos: obtenga elementos DOM a través del nombre de la etiqueta, el nombre de la clase, el ID y otros atributos, por ejemplo , getElementByIdy otros métodos.getElementsByClassNamegetElementsByTagName

2. Modificar el contenido del elemento: puede utilizar el atributo textContento innerTextpara modificar el contenido de texto del elemento y utilizar innerHTMLel atributo para establecer el contenido HTML del elemento.

3. Modificar atributos de elementos: utilice métodos setAttributepara establecer valores de atributos de elementos, como configuración y otros atributos.srchref

4. Agregar y eliminar elementos: use createElementmétodos para crear nuevos nodos de elementos, utilícelos appendChildpara agregarlos al árbol DOM y utilícelos para removeChildeliminar nodos de elementos específicos.

5. Modificar estilo: puede utilizar styleatributos para modificar el estilo CSS de un elemento, como configuraciones backgroundColor, fontSizeetc.

6. Escuchar eventos: addEventListeneragregue detectores de eventos a elementos a través de métodos para responder a las interacciones del usuario, como clics, movimientos de entrada y salida del mouse y otros eventos.

7. Atravesar elementos secundarios: recorra y obtenga los nodos secundarios de un elemento accediendo a las childNodespropiedades del nodo o utilizando métodos.querySelectorAll

8. Encuentre el elemento principal: puede usar parentNodeatributos para obtener el nodo principal y subir hasta encontrar el nodo ancestro.

9. Modifique el nombre de clase del elemento: utilice classListatributos y métodos relacionados (como add,, ) para modificar el nombre de clase del elemento para lograr un cambio de estilo.removetoggle

10. Obtenga y modifique la posición y el tamaño de un elemento: use atributos como y para obtener el desplazamiento de un elemento en relación con su elemento principal, offsetLeftobtenga el valor de desplazamiento de desplazamiento de un elemento y obtenga la información de tamaño de un elemento a través de atributos como y .offsetTopscrollLeftscrollTopoffsetWidthoffsetHeight

Los anteriores son métodos y técnicas comunes en las operaciones DOM. Con estas operaciones, puede modificar, agregar o eliminar elementos dinámicamente en páginas web para lograr efectos interactivos enriquecidos y una visualización de contenido dinámica.

2. Cuénteme sobre su comprensión de BOM. ¿Qué objetos BOM comunes conoce?

BOM (modelo de objetos del navegador) es una API de JavaScript proporcionada por el navegador para operar las ventanas y las funciones del navegador. Los objetos BOM se refieren a objetos relacionados con el navegador a los que se puede acceder y manipular directamente en JavaScript.

Los objetos de lista de materiales comunes incluyen:

1. Objeto de ventana: representa la ventana o pestaña del navegador y es el objeto de nivel superior de la lista de materiales. Proporciona control y acceso a las ventanas del navegador, incluidos métodos como cargar nuevas páginas, abrir y cerrar ventanas, así como funciones relacionadas con el navegador, como temporizadores y cuadros de diálogo.

2. Objeto de navegador: proporciona información sobre el navegador, como el nombre del navegador, la versión, el idioma, etc. Puede utilizar este objeto para detectar el tipo de navegador y la versión que está utilizando el usuario.

3. Objeto de ubicación: representa la información de la URL de la página actual. Puede utilizar este objeto para obtener o modificar la URL en la barra de direcciones del navegador, navegar a diferentes URL y analizar varias partes de la URL.

4. Objeto de historial: representa el historial del navegador. Puede utilizar este objeto para avanzar, retroceder y saltar a un registro de historial específico.

5. Objeto de pantalla: proporciona información sobre la pantalla del usuario, como el ancho, alto, densidad de píxeles, etc.

6. Objeto de documento: aunque el objeto de documento no pertenece al objeto BOM, sino al objeto DOM, generalmente se considera parte de la BOM. Representa el documento actual y proporciona acceso y operaciones sobre el contenido de la página, incluidos métodos como seleccionar elementos, modificar el contenido de los elementos y crear nuevos elementos.

7. Objeto de cookie: se utiliza para manejar las cookies del navegador y puede configurar, obtener y eliminar cookies.

8. Objeto XMLHttpRequest: se utiliza para iniciar solicitudes HTTP, interactuar con el servidor para obtener datos y lograr comunicación asincrónica. A menudo se usa en el desarrollo AJAX.

BOM (modelo de objetos del navegador) se refiere al conjunto de objetos y métodos utilizados en el entorno del navegador para interactuar con la ventana del navegador. BOM proporciona la capacidad de acceder y operar ventanas del navegador y contenido de páginas. Los objetos BOM comunes incluyen:

1. Objeto de ventana: representa la ventana completa del navegador y es el objeto de nivel superior de la lista de materiales. Contiene muchas propiedades y métodos, como abrir nuevas ventanas, cerrar ventanas, temporizadores, etc. El objeto de ventana es un objeto global y sus propiedades y métodos se pueden utilizar directamente.

2. Objeto de documento: representa el documento de la página web actualmente cargado y proporciona métodos y propiedades para acceder y manipular el contenido de la página web. Por ejemplo, puede obtener elementos de la página, modificar el contenido del elemento, crear nuevos nodos y otras operaciones a través del objeto del documento.

3. Objeto del navegador: proporciona información sobre el navegador, como el nombre del navegador, la versión, el agente de usuario, etc. El objeto de navegador se puede utilizar para determinar el tipo de navegador, las características y las funciones admitidas para poder escribir código de compatibilidad.

4. Objeto de ubicación: proporciona métodos y propiedades para acceder y manipular la URL en la barra de direcciones del navegador. La información de la URL de la página actual se puede obtener a través del objeto de ubicación, y la URL también se puede modificar para realizar un salto o actualización de página.

5. Objeto de historial: utilizado para gestionar el historial del navegador. Operaciones como avanzar, retroceder y saltar a una página específica se pueden implementar a través del objeto de historial.

6. Objeto de pantalla: proporciona información sobre la pantalla del usuario, como el ancho, la altura, la profundidad del color, etc. Puede utilizar el objeto de pantalla para ajustar el diseño y la visualización de la página de acuerdo con las características de la pantalla del usuario.

Estos son objetos BOM comunes que permiten a los desarrolladores obtener y manipular ventanas, documentos, barras de direcciones y cierta información sobre el navegador en el navegador para lograr interacciones ricas y funciones personalizadas.

3.¿Cuáles son los métodos de almacenamiento local de Javascript? ¿Diferencias y escenarios de aplicación?

JavaScript proporciona una variedad de métodos de almacenamiento local, incluidos los siguientes:

1. Cookies (Cookies): es el primer mecanismo de almacenamiento local introducido, que puede transferir datos entre el navegador y el servidor y guardarlos en el cliente en forma de pares clave-valor. Las cookies se caracterizan por su pequeña capacidad (normalmente no más de 4 KB). Las cookies de cada nombre de dominio se enviarán automáticamente al servidor con la solicitud y se puede establecer el tiempo de caducidad.

2. Almacenamiento web (Almacenamiento web): consta de almacenamiento local y almacenamiento de sesión, lo que proporciona un espacio de almacenamiento más grande (generalmente hasta 5 MB o más).

   • localStorage: proporciona almacenamiento local persistente que persiste después de cerrar el navegador y se comparte bajo el mismo nombre de dominio.

   • sessionStorage: también es un método de almacenamiento local, pero los datos solo son válidos en la sesión actual (ventana o pestaña) y los datos se borrarán después de cerrar la sesión.

3. IndexedDB (base de datos indexada): es una base de datos no relacional incorporada que permite el almacenamiento de grandes cantidades de datos estructurados y admite índices y transacciones. IndexedDB funciona de forma asincrónica y su uso requiere escribir código asincrónico complejo.

4. WebSQL (base de datos Web SQL): en desuso y ya no se recomienda. Es una base de datos relacional basada en una base de datos SQLite y proporciona un lenguaje de consulta similar a SQL para operaciones de datos.

Estos métodos de almacenamiento local difieren en los escenarios de aplicación y las características:

• Las cookies transfieren datos entre el cliente y el servidor y tienen un cierto grado de seguridad, pero tienen una capacidad pequeña y son adecuadas para almacenar una pequeña cantidad de información de identificación del usuario o del estado de la sesión.

• Web Storage proporciona un gran espacio de almacenamiento y puede almacenar una gran cantidad de datos. Es adecuado para guardar preferencias del usuario, datos en caché local, etc.

• IndexedDB es un potente sistema de base de datos adecuado para procesar datos estructurados complejos, como sincronización, adición, eliminación, modificación y consulta de grandes cantidades de datos fuera de línea.

• WebSQL era adecuado para algunos escenarios de consulta y almacenamiento de datos relacionales simples antes de ser abandonado y ya no se recomienda.

Dependiendo de las necesidades específicas y el tamaño de los datos, elegir el método de almacenamiento local adecuado puede proporcionar una mejor experiencia de usuario y gestión de datos.

4. ¿Qué son las funciones antivibración y estrangulación? ¿Cual es la diferencia? ¿Como alcanzar?

Debounce y Throttle son dos tecnologías de optimización comúnmente utilizadas para controlar la frecuencia de activación de eventos y mejorar el rendimiento y la experiencia del usuario.

1. Rebote:

   • El principio de antivibración es realizar solo la última operación activada dentro de un período de tiempo cuando los eventos se activan continuamente.
   • Después de que se active el evento, espere un cierto tiempo de retraso. Si el evento se activa nuevamente dentro del tiempo de retraso, el tiempo se restablecerá y la operación se realizará después de esperar el tiempo de retraso.
   • Se utiliza principalmente en escenarios donde es necesario evitar envíos duplicados, búsquedas en tiempo real, etc.

2. Acelerador:

   • El principio de limitación es realizar una operación sólo una vez dentro de un intervalo de tiempo determinado.
   • Cuando se activa el evento, la operación se realiza inmediatamente y se establece un intervalo de tiempo fijo. Si el evento se activa varias veces dentro de este intervalo, solo se realizará la primera operación y se ignorarán los activadores posteriores.
   • Se utiliza principalmente en escenarios donde la frecuencia de las llamadas a funciones debe ser limitada, como carga continua, ajuste de ventanas, clics de botones, etc.

la diferencia:

• La diferencia principal entre estabilización y estrangulación es el momento y la frecuencia de realización de las operaciones. Anti-vibración consiste en esperar a que se realice la última operación después de que se activa el evento, y la limitación consiste en realizar una operación dentro de un intervalo de tiempo fijo.
• La antivibración es adecuada para procesar eventos que se activan con frecuencia en un corto período de tiempo, mientras que la limitación es adecuada para procesar eventos que se activan con frecuencia pero que necesitan controlar la frecuencia.

Método para realizar:

• Anti-vibración puede retrasar la ejecución de operaciones configurando un temporizador y borrar el temporizador anterior antes de cada evento desencadenante para garantizar que la operación solo se ejecute después del último desencadenante.
• La limitación puede registrar la marca de tiempo de la última operación y determinar si el tiempo desde la última operación excede el intervalo de tiempo establecido cada vez que se activa un evento. Si es así, realice la operación y actualice la marca de tiempo.

Código de muestra (JavaScript):

// 防抖
function debounce(func, delay) {
    
    
  let timer;
  return function (...args) {
    
    
    clearTimeout(timer);
    timer = setTimeout(() => {
    
    
      func.apply(this, args);
    }, delay);
  };
}

// 节流
function throttle(func, interval) {
    
    
  let lastTime = 0;
  return function (...args) {
    
    
    const currentTime = Date.now();
    if (currentTime - lastTime > interval) {
    
    
      func.apply(this, args);
      lastTime = currentTime;
    }
  };
}

Lo anterior es un método de implementación simplificado, que debe ajustarse y optimizarse según las necesidades.

5. Cómo determinar una matriz a través de JS

En JavaScript, puede utilizar varios métodos para determinar si una variable es una matriz. Los siguientes son algunos métodos comúnmente utilizados:

1. Utilice el método Array.isArray():

Array.isArray(variable);

Este método recibe un parámetro y devuelve un valor booleano que indica si el parámetro es de tipo matriz. Si se devuelve verdadero, significa que el parámetro es una matriz; de lo contrario, no es una matriz.

2. Utilice el operador instancia de:

variable instanceof Array;

El operador instancia de se utiliza para comprobar si un objeto pertenece a una clase o tipo específico. Esta expresión devolverá verdadero cuando la variable sea una matriz, falso en caso contrario.

Tenga en cuenta que el uso del operador instancia de puede causar problemas, especialmente al compartir datos entre múltiples ventanas o marcos, ya que cada ventana o marco tiene su propio entorno de ejecución global.

3. Utilice el método Object.prototype.toString.call():

Object.prototype.toString.call(variable) === '[object Array]';

Este enfoque utiliza toString()un método que devuelve [[class]]una representación de cadena de una propiedad interna. Para las matrices, [object Array]la cadena representa el tipo de matriz.

Este método es relativamente general y adecuado para juzgar otros tipos de objetos, como [object Object]representar tipos de objetos.
Por supuesto, existen otras formas de determinar si una variable es una matriz:

4. Polyfill usando el método Array.prototype.isArray():

if (!Array.isArray) {
    
    
  Array.isArray = function(variable) {
    
    
    return Object.prototype.toString.call(variable) === '[object Array]';
  };
}

Si necesita admitir algunas versiones anteriores de entornos JavaScript, puede utilizar este polyfill para proporcionar Array.isArray()compatibilidad de métodos.

5. Utilice el método ES6 Array.from() combinado con Array.isArray():

Array.isArray(Array.from(variable));

Array.from()Método utilizado para convertir un objeto similar a una matriz o un objeto iterable en una matriz real. Al pasar la variable al Array.from()método y luego usar Array.isArray()el método para juzgar, puede determinar si la variable se puede convertir exitosamente en una matriz.

Por supuesto, hay más formas de determinar si una variable es una matriz:

6. Detección de tipos utilizando el método Array.from():

Array.from(variable) instanceof Array;

Determine si la variable es una matriz pasándola al Array.from()método y usando instanceofel operador para verificar el tipo.

7. Utilice las características de las matrices para emitir juicios:

variable && typeof variable === 'object' && variable.constructor === Array;

Este método determina si la variable es una matriz determinando si la variable existe, si el tipo es un objeto y si el constructor es una matriz.

Cabe señalar que, en algunos casos, los métodos anteriores pueden tener algunas limitaciones o imprecisiones. Por ejemplo, en un entorno de ventanas o marcos cruzados, el uso instanceofde operadores para emitir juicios puede fallar. Por lo tanto, al elegir un método, se deben tener en cuenta los escenarios de aplicación y las necesidades específicas.

En resumen, los anteriores son algunos métodos comunes para determinar si una variable es una matriz. Simplemente elija el método apropiado para juzgar según la situación real.

6. Cuénteme sobre su comprensión de la cadena de alcance.

Cuando se trata de los detalles específicos de la cadena de alcance, aquí hay algunas explicaciones y explicaciones más detalladas:

1. Formación de cadena de alcance:

   • En JavaScript, cada vez que se crea una función, se crea un nuevo contexto de ejecución y se guarda en la pila de contexto de ejecución.
   • Cada objeto de contexto de ejecución tiene un objeto interno llamado "objeto variable" que almacena las variables, funciones y parámetros definidos en ese contexto de ejecución.
   • Cuando se llama a una función, se crea un nuevo objeto variable que incluye los parámetros de la función, las variables declaradas dentro de la función y referencias al entorno externo.
   • Esta referencia al entorno externo es la parte clave de la cadena de alcance, que apunta al objeto variable de la función principal.

2. Orden de acceso a la cadena de alcance:

   • Al acceder a una variable, el motor JavaScript primero busca la variable en el objeto variable del contexto de ejecución actual.
   • Si no se encuentra una variable, el motor JavaScript buscará en la cadena de alcance hasta que encuentre la variable o alcance el alcance global.
   • Si la variable aún no se encuentra en el ámbito global de nivel superior, se considera que la variable no está definida y se genera un error de referencia.

3. Cierres y cadenas de alcance:

   • El cierre significa que una función puede recordar y acceder a su alcance léxico incluso después de haber sido definida y ejecutada.
   • Un cierre se forma cuando una función define una función interna y la función interna hace referencia al objeto variable de la función externa a través de la cadena de alcance.
   • La cadena de alcance en el cierre mantiene una referencia al objeto variable de la función externa para que las variables de la función externa permanezcan accesibles mientras se ejecuta la función interna.

4. Cadena de alcance y gestión de memoria:

   • Los objetos variables en la cadena de alcance se destruirán después de ejecutar la función, lo que puede liberar la memoria ocupada.
   • Por lo tanto, al escribir código, tenga cuidado de evitar cierres innecesarios y referencias circulares para evitar pérdidas de memoria.

En resumen, la cadena de alcance es el mecanismo utilizado para encontrar variables en JavaScript. Al buscar a lo largo de la cadena de alcance, la variable requerida se encuentra en el objeto variable correspondiente. Es el resultado del anidamiento de funciones y del anidamiento de alcance, y se determina cuando se define la función, asegurando la accesibilidad y encapsulación de las variables. Comprender las cadenas de alcance es importante para escribir código JavaScript eficiente y mantenible.