Preguntas de la entrevista JS de alta frecuencia (con respuestas + explicación en video)

var define variables y se puede declarar repetidamente var alcance global o alcance de función con promoción de variables
let define variables y no se puede declarar repetidamente, el alcance a nivel de bloque no tiene promoción variable

2. ¿Cuáles son los tipos de datos básicos en JavaScript?

Tipos de datos básicos Cadena, Número, Booleano, Indefinido, Nulo
Tipos de datos de referencia: objeto, matriz, función, fecha, etc.
Symbol y BigInt son tipos de datos básicos recién agregados después de ES6.
- Símbolo

se refiere a un valor único

- Empezando

es un tipo numérico de datos que puede representar números enteros en formato de precisión arbitraria

3. La diferencia entre nulo e indefinido

En primer lugar, Indefinido y Nulo son tipos de datos básicos. Cada uno de estos dos tipos de datos básicos tiene un solo valor, que es indefinido y nulo.
El significado de indefinido es

Indefinido: Generalmente, se devolverá indefinido cuando se declara una variable pero aún no está definida.

El significado de nulo es

Objeto vacío. Null se utiliza principalmente para asignar valores a algunas variables que pueden devolver objetos como inicialización.

4. ¿Cuál es la diferencia entre == y ===?

Cuando se utiliza el doble signo igual (==) para juzgar la igualdad, si los tipos en ambos lados son inconsistentes, se forzará la conversión de tipos antes de la comparación.
Cuando se usa el triple signo igual (===) para determinar la igualdad, si los tipos en ambos lados son inconsistentes, la conversión de tipos no se fuerza y se devuelve falso directamente.

Objeto.is()

[]==[]

5. ¿Qué datos en js son falsos cuando se juzga por if?

0, "", falso, nulo, indefinido, NaN se consideran falsos (6)
Todo lo demás es verdad

[]==falso y ![]==falso verdadero

El primer []==falso se convierte al número 0==0

El segundo ![]==false se convierte a booleano false==false

[]==[] -->falso

Seis situaciones en las que el valor booleano es falso en js

Cuando los siguientes 6 valores se convierten en valores booleanos, son falsos y otras conversiones son verdaderas.

1. indefinido (indefinido, aparece cuando no se puede encontrar el valor)

2. nulo (representa valor nulo)

3. falso (el valor booleano es falso, la cadena "falso" el valor booleano es verdadero)

4. 0 (número 0, cadena "0", el valor booleano es verdadero)

5. NaN (ocurre cuando el resultado no se puede calcular, lo que indica "valor no numérico"; pero tipo de NaN=== "número")

6. "" (comillas dobles) o '' (comillas simples) (cadena vacía, también es cierto cuando hay espacios en el medio)

Tenga en cuenta que las matrices vacías son objetos vacíos y los valores negativos se convierten en valores booleanos para que sean verdaderos.

6. ¿Cuáles son los métodos para determinar el tipo de datos y cuáles son las diferencias?

Cómo determinar el tipo de datos	describir
tipo de	Determine el tipo de datos básico (matriz, objeto, nulo se considerará objeto)
en vez de	Determinar el tipo de datos de referencia, no puede determinar el tipo de datos básicos
constructor	Determinar el tipo de datos.
Objeto.prototipo.toString.call()	Utilice el método prototipo toString del objeto Object para determinar el tipo de datos

Cuatro métodos de determinación del tipo de JavaScript

uno, tipo de

typeof es un operador en lugar de una función. Su lado derecho va seguido de una expresión unaria y devuelve el tipo de datos de esta expresión.

El resultado devuelto es una cadena de este tipo (todas las letras minúsculas)

Se utiliza para determinar el tipo de datos y el valor de retorno es 6 [cadenas], que son cadena, booleano, número, función, objeto e indefinido.

console.log(typeof undefined) // undefind
console.log(typeof null)   // object
console.log(typeof true)   // boolean
console.log(typeof 43)    // number
console.log(typeof '21')   // string
console.log(typeof {a:1})   // object
console.log(typeof Symbol()) // symbol
console.log(typeof 123n)   // bigint
function a() {}
console.log(typeof a)     // function
var date = new Date()
var error = new Error()
console.log(typeof date)   // object
console.log(typeof error)   // object

2.instancia de

instancia de se utiliza para determinar si A es una instancia de B. La expresión es: Una instancia de B. Si A es una instancia de B, devuelve verdadero; de lo contrario, devuelve falso. Lo que necesita especial atención aquí es: instancia de detecta el prototipo

Instanceof se utiliza para determinar el objeto. El formato del código es obj1, instancia de obj2 (si obj1 es una instancia de obj2). Obj2 debe ser un objeto; de lo contrario, se informará un error. Su valor de retorno es un valor booleano.

En términos sencillos, instancia de se utiliza para comparar si un objeto es una instancia de un determinado constructor. Tenga en cuenta que instancia de puede determinar con precisión tipos de datos complejos, pero no puede determinar correctamente tipos de datos básicos.

console.log(12 instanceof Number) // false
console.log('22' instanceof String) // false
console.log(true instanceof Boolean) // false
console.log(null instanceof Object) // false
console.log(undefined instanceof Object) // false
console.log([] instanceof Array)  // true
console.log({a: 1} instanceof Object) // true
console.log(json instanceof Object) // true
function a() { }
console.log(a instanceof Function) // true
console.log(new Date() instanceof Date) //true
let reg=new RegExp()
console.log(reg instanceof RegExp) //true
let error=new Error()
console.log(error instanceof Error) // true

三、Object.prototype.toString.call()

toString() es el método prototipo de Object. Cuando se llama a este método, la [[Clase]] del objeto actual se devuelve de forma predeterminada. Esta es una propiedad interna con el formato [objeto Xxx], donde Xxx es el tipo de objeto.

Para los objetos Object, llamar directamente a toString() devolverá [object Object]. Para otros objetos, debe llamar/aplicar para devolver la información del tipo correcto.

console.log(Object.prototype.toString.call(1))     // [object Number]
console.log(Object.prototype.toString.call(1n))     // [object BigInt]
console.log(Object.prototype.toString.call('123'))   // [object String]
console.log(Object.prototype.toString.call(true))    // [object Boolean]
console.log(Object.prototype.toString.call(undefined)) // [object Undefined]
console.log(Object.prototype.toString.call(null))    // [object Null]
console.log(Object.prototype.toString.call({}))     // [object Object]
console.log(Object.prototype.toString.call([]))     // [object Array]
console.log(Object.prototype.toString.call(function a() {})) // [object Function]
console.log(Object.prototype.toString.call(Symbol()))     // [object Symbol]
console.log(Object.prototype.toString.call(Math))       // [object Math]
console.log(Object.prototype.toString.call(JSON))       // [object JSON]
console.log(Object.prototype.toString.call(new Date()))    // [object Date]
console.log(Object.prototype.toString.call(new RegExp()))   // [object RegExp]
console.log(Object.prototype.toString.call(new Error))    // [object Error]
console.log(Object.prototype.toString.call(window)      // [object Window]
console.log(Object.prototype.toString.call(document)     // [object HTMLD

四、constructor

El atributo del constructor, puede saber qué constructor generó un objeto de instancia. El atributo constructor representa la relación entre el objeto prototipo y la función constructora. Si se modifica el objeto prototipo, el atributo constructor generalmente se modificará al mismo tiempo para evitar errores al hacer referencia. Por lo tanto, al modificar el objeto prototipo, generalmente es necesario modificar el apuntamiento del atributo del constructor al mismo tiempo.

constructor属性，可以得知某个实例对象，到底是哪一个构造函数产生的。
constructor属性表示原型对象与构造函数之间的关联关系，如果修改了原型对象，一般会同时修改constructor属性，防止引用的时候出错。所以，修改原型对象时，一般要同时修改constructor属性的指向。
console.log('22'.constructor === String)       // true
console.log(true.constructor === Boolean)      // true
console.log([].constructor === Array)        // true
console.log(document.constructor === HTMLDocument)  // true
console.log(window.constructor === Window)      // true
console.log(new Number(22).constructor === Number)  // true
console.log(new Function().constructor === Function) // true
console.log((new Date()).constructor === Date)    // true
console.log(new RegExp().constructor === RegExp)   // true
console.log(new Error().constructor === Error)    // true

Aviso:

1. Nulo e indefinido son objetos no válidos, por lo que no habrá constructor. Estos dos tipos de datos deben juzgarse mediante otros métodos.

2. El constructor de una función es inestable. Esto se refleja principalmente en los objetos personalizados. Cuando el desarrollador reescribe el prototipo, la referencia del constructor original se perderá y el constructor pasará a ser Objeto de forma predeterminada.

7. Recolección de basura JS

Hay dos estrategias de recolección de basura:

Marcar claro:

La fase de marcado marca todos los objetos activos y la fase de limpieza destruye los no marcados (es decir, los objetos inactivos).

Recuento de referencias:

Simplifica la definición de si un objeto ya no necesita ser un objeto: si hay otros objetos que hacen referencia a él. Si no hay referencias al objeto (el recuento de referencias es 0), el objeto se recolectará como basura.

8.Esta orientada

9. llamar, aplicar, vincular

La diferencia entre los tres

Los tres pueden cambiar este objeto al que apunta la función.
El primer parámetro de los tres es el objeto al que apunta esto. Si no existe tal parámetro o el parámetro no está definido o es nulo, apuntará a la ventana global de forma predeterminada.
Los tres pueden pasar parámetros,
- llamar es una lista de parámetros, aplicar es una matriz, llamar y aplicar son parámetros entrantes únicos,
- bind es una lista de parámetros, pero se puede dividir en múltiples parámetros entrantes
vincular es devolver la función después de vincular esto, y aplicar y llamar se ejecutan inmediatamente

Escenarios de aplicación

La llamada a menudo hace herencia.
Aplicar a menudo está relacionado con matrices, como realizar los valores máximo y mínimo de una matriz con la ayuda de objetos matemáticos.
bind no llama a la función, pero aún quiere cambiar este punto, como cambiar este punto dentro del temporizador.

10. Cierres y escenarios de uso de cierres.

El concepto de cierre:

Cierre: se refiere a una función que tiene acceso a variables en el alcance de otra función. La forma más común de crear un cierre es crear otra función dentro de una función y acceder a las variables locales de esta función a través de otra función. Usar cierres Puedes romper la cadena de alcance y pasar variables y métodos dentro de la función al exterior.

Propiedades de los cierres

1. Las funciones están anidadas dentro de funciones 2. Las funciones internas pueden hacer referencia a parámetros y variables externos 3. Los parámetros y variables no serán reciclados por el mecanismo de recolección de basura

Ventajas y desventajas de los cierres

Ventajas: ampliar el ciclo de vida de las variables, privatizar las variables.
Desventajas: demasiados cierres pueden provocar pérdidas de memoria

Escenarios de aplicación de cierres.

Devolución de llamada exitosa para solicitud ajax
Método de devolución de llamada de enlace de eventos
Retrasar la devolución de llamada de setTimeout
Dentro de la función devuelve otra función anónima.
Función de estrangulación, módulo de embalaje antivibración.

11. ¿Qué es el proxy de evento/delegación de evento?

El proxy de eventos/delegación de eventos utiliza la función de propagación de eventos para vincular eventos que deberían estar vinculados a múltiples elementos a sus elementos antecesores. Especialmente cuando se agregan elementos secundarios dinámicamente, puede ser muy conveniente mejorar el rendimiento del programa y reducir el espacio de memoria.

12. ¿Cómo prevenir la propagación de eventos?

El método w3c es e.stopPropagation(),

e.stopPropagation();

¿Cómo prevenir un evento predeterminado?

El método de w 3c es e.preventDefault()

función stopDefault( e ) { e.preventDefault(); }

13. Principio de implementación del nuevo operador.

Primero se crea un nuevo objeto vacío.
Configure el prototipo y establezca el prototipo del objeto en el objeto prototipo de la función.
Deje que this de la función apunte a este objeto y ejecute el código del constructor (agregue atributos a este nuevo objeto)
Determine el tipo de valor de retorno de la función. Si es un tipo de valor, devuelva el objeto creado. Si es un tipo de referencia, se devuelve un objeto de este tipo de referencia.

14. Refluir y volver a dibujar

Cuando es necesario reconstruir una parte (o la totalidad) del árbol de renderizado debido a cambios en el tamaño, diseño, ocultación, etc. de los elementos. Esto se llama reflujo. Cada página requiere al menos un reflujo, que es cuando la página se carga por primera vez. Al redistribuir, el navegador invalida la parte afectada del árbol de renderizado y reconstruye esa parte del árbol de renderizado. Después de completar el reflujo, el navegador volverá a dibujar la parte afectada en la pantalla; este proceso se llama redibujar

15. Cadena de prototipos de Javascript

Primero comprenda tres conceptos:

Prototipo: objeto prototipo. Cada función tiene un atributo prototipo. Cuando se utiliza el nuevo comando para crear una instancia del objeto, este atributo se convertirá en el objeto prototipo de la instancia.
constructor: constructor. constructor que apunta al objeto prototipo
__proto__: prototipo del objeto de instancia

En JavaScript, el vínculo entre el objeto de instancia y el prototipo se llama cadena de prototipo. Cuando el motor de análisis de Javascript lee el valor de una propiedad del objeto, buscará hacia arriba a lo largo de la cadena del prototipo. Si no se encuentra al final, el valor de la propiedad no está definido; si finalmente se encuentra el valor de la propiedad, se devuelve el resultado.

16. Copia profunda y copia superficial

La copia superficial solo copia el puntero a un objeto, no el objeto en sí, y los objetos nuevos y antiguos aún comparten la misma memoria. Sin embargo, la copia profunda creará un objeto idéntico. El nuevo objeto no comparte memoria con el objeto original y las modificaciones al nuevo objeto no cambiarán el objeto original.

Copia superficial

//El primer nivel es copia profunda Object.assign() Array.prototype.slice() //Operador extendido...

copia profunda

JSON.parse(JSON.stringify())

función recursiva

let obj = {
    a: 'hello',
    b: [10, 20],
    c: { name: 'admin',age:{xx:''} }
}

//定义函数实现深层拷贝
function deepCopy(obj) {
    //1. 先判断obj是否存在 是否是对象格式 
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }
    //2. 创建一个新的容器存储拷贝的数据 
    let newObj = Array.isArray(obj) ? [] : {};
    //3. 遍历对象for循环可以 获取所有的下标keys 
    let temp=null;// temp键值
    //遍历下标 --获取元素的值
    for(let key in obj){
        temp=obj[key];//键值
        //获取键值 存储新的容器里--需要判断当前的键值的类型是不是对象 
        if(temp && typeof temp ==='object'){
            newObj[key]=deepCopy(temp)
            //newObject={a:hello,b}
        }else{
            //键值是基本数据类型可以直接存储
            newObj[key]=temp;
        }
    }
    return newObj;
}

let obj2=deepCopy(obj)

17. Deduplicación de matrices

Utilice el método de configuración es6

[...nuevo conjunto(arr)]

sea arr = [1,2,3,4,3,2,3,4,6,7,6]; let único =(arr)=>[...newSet(arr); único(arr);//[1,2,3,4,6,7]

Utilice la nueva matriz indexOf para encontrar el método indexOf() para devolver la primera aparición de un elemento específico en la matriz. Si no, devuelve -1.
El bucle doble for determina si el bucle de segundo nivel contiene el elemento en la matriz deduplicada. Si es así, salga del bucle de segundo nivel. Si no hay j==result.length, será igual y luego agregará el correspondiente elemento a la matriz final.

18. Métodos de matriz

Métodos de matriz	describir
mapa	Recorre la matriz y devuelve una nueva matriz compuesta por valores de devolución de llamada
para cada	No se puede romper, puedes usar throw new Error en try/catch para detener
filtrar	filtrar
alguno	Si un elemento devuelve verdadero, el conjunto es "verdadero".
cada	Si un elemento devuelve falso, el conjunto es "falso".
unirse	Generar una cadena especificando el carácter de concatenación
empujar / hacer estallar	Empuje y haga estallar al final, cambiando la matriz original. push devuelve la longitud de la matriz, pop devuelve el último elemento de la matriz original;
desaplazar / cambiar	Empuje y haga estallar la cabeza, cambie la matriz original, unshift devuelve la longitud de la matriz y shift devuelve el primer elemento de la matriz original;
ordenar(fn)/revertir	Ordenar e invertir, cambiar la matriz original
concat	Únase a la matriz sin afectar la matriz original, copia superficial
rebanada (inicio, fin)	Devuelve una nueva matriz truncada sin cambiar la matriz original
empalme(inicio, número, valor...)	Devuelve una matriz compuesta por elementos eliminados, el valor es el elemento insertado y cambia la matriz original
indexOf / lastIndexOf(valor, fromIndex)	Encuentre un elemento de matriz y devuelva el subíndice correspondiente
reducir / reducirDerecha(fn(prev, cur)， defaultPrev)	Ejecutar en pares, prev es el valor de retorno de la última función simplificada, cur es el valor actual. Cuando se pasa defaultPrev, comienza desde el primer elemento; cuando no se pasa, comienza con el segundo elemento.

19. La diferencia entre funciones de flecha y funciones ordinarias.

Las funciones de flecha son más concisas que las funciones ordinarias
Las funciones de flecha no tienen su propio esto.
Este punto heredado por la función de flecha nunca cambiará.
Las funciones de flecha no se pueden utilizar como constructores.
Las funciones de flecha no tienen sus propios argumentos.
La función de flecha no tiene prototipo
Los métodos como call(), apply() y bind() no pueden cambiar la dirección de esto en la función de flecha.

20. ¿Cuál es la diferencia entre los métodos forEach y map?

El método forEach() ejecutará la función proporcionada para cada elemento y la operación sobre los datos cambiará la matriz original. Este método no tiene valor de retorno;
El método map() no cambia el valor de la matriz original y devuelve una nueva matriz. Los valores en la nueva matriz son los valores de la matriz original después de llamar a la función;

Aviso:

forEach() cambiará el método de la matriz original
Parámetros: el elemento actual en la matriz de elementos, el índice del elemento actual y la matriz original de la matriz;
Hay varios elementos en la matriz, por lo que la función de devolución de llamada anónima pasada debe ejecutarse varias veces

Escenario de uso: cuando procesamos los elementos de la matriz (por ejemplo: agregar elementos, cambiar valores de elementos), podemos usar esta función

Aviso:

El elemento actual en la matriz de elementos, indexa el índice del elemento actual, forma la matriz original

La función de devolución de llamada del mapa admite el valor de retorno. Lo que se devuelve es equivalente a cambiar el elemento en la matriz (no afecta la matriz original, pero es equivalente a clonar la matriz original. El elemento clonado es El elemento correspondiente en la matriz de las copias han cambiado);

map cambiará el método de la matriz original,

La velocidad de ejecución del mapa es más rápida, un 70% más rápida que la de forEach;

escenas a utilizar:

Map es adecuado cuando desea cambiar valores de datos. No solo es más rápido, sino que también devuelve una nueva matriz, que puede mejorar la reutilización (map(), filter(), reduce()) y otras combinaciones.

vararr = [1, 2, 3, 4, 5]; var newArr = arr.map(núm => núm * 2).filter(núm => núm > 5); // nuevaArr = [6, 8, 10]

Resumir:

Lo que se puede hacer con forEach(), también se puede utilizar map(). Viceversa también es cierto
map() asignará espacio de memoria para almacenar la nueva matriz y la devolverá, pero forEach() no devolverá la matriz.
forEach() permite que la devolución de llamada cambie los elementos de la matriz original. Y map() devuelve una nueva matriz

21. La diferencia entre para...en y para...de

for...of atraviesa para obtener el valor clave del objeto, y for...in obtiene el nombre clave del objeto;
for... in atravesará toda la cadena prototipo del objeto, el rendimiento es muy pobre y no se recomienda su uso, mientras que for... of solo atraviesa el objeto actual y no atraviesa la cadena prototipo;
Para el recorrido de la matriz, for...in devolverá todos los atributos enumerables de la matriz (incluidos los atributos enumerables en la cadena del prototipo), mientras que for...of solo devuelve el valor del atributo correspondiente al subíndice de la matriz;