100 preguntas teóricas de JavaScript

¡Buen dia amigos!



Aquí hay una lista de las 100 preguntas básicas sobre JavaScript de este repositorio con respuestas breves y enlaces al Tutorial de JavaScript moderno (JSR) de Ilya Kantor y MDN.



Esta lista y más de 300 preguntas de práctica están disponibles en mi aplicación .



La aplicación implementa un mecanismo para memorizar la pregunta estudiada y también proporciona trabajo fuera de línea.



Pido disculpas por los posibles errores y errores tipográficos. Se agradece cualquier forma de retroalimentación.



Edición de 14.09.2019



Vea la continuación aquí .

1. ¿Cómo crear un objeto?

Hay varias formas de hacer esto. Algunos de ellos son:

Objeto literal:

const object = {}

Constructor de objetos (no recomendado):

const object = new Object()

Método Object.create ()

Cuando se utiliza este método, se le pasa un objeto como argumento, que se convertirá en el prototipo del nuevo objeto.

//     -  
const object = Object.create(null)

Función constructora Creamos una función constructora y usamos el operador "nuevo" para crear una instancia de esta función - un objeto:

function Person (name) {
    const object = {}
    object.name = name
    object.age = 30
    return object
}
const user = new Person('')

Clase:

class Person {
    constructor(name) {
        this.name = name
    }
}

const user = new Person('')

JSR

MDN

2. ¿Qué son los prototipos?

Los prototipos se utilizan para crear nuevos objetos basados ​​en los existentes. Esta técnica se llama herencia prototípica. El prototipo de una instancia de un objeto está disponible a través de Object.getPrototypeOf (object) o la propiedad __proto__ ([[Prototype]] propiedad interna oculta).







JSR

MDN

3. ¿Cuál es la diferencia entre call (), apply () y bind ()?

La diferencia entre estos métodos es más fácil de explicar con ejemplos.

El método call () llama a una función con este valor especificado y los argumentos separados por comas.

const employee1 = { firstName: '', lastName: '' }
const employee2 = { firstName: '', lastName: '' }

function invite (greet1, greet2) {
    console.log(\`${greet1}, ${this.firstName} ${this.lastName}. ${greet2}\`)
}

invite.call(employee1, '', ' ?') // ,  .  ?
invite.call(employee2, '', ' ?') // ,  .  ?

El método apply () llama a una función con el valor especificado y los argumentos de la matriz.

const employee1 = { firstName: '', lastName: '' }
const employee2 = { firstName: '', lastName: '' }

function invite (greet1, greet2) {
    console.log(\`${greet1}, ${this.firstName} ${this.lastName}. ${greet2}\`)
}

invite.apply(employee1, ['', ' ?']) // ,  .  ?
invite.apply(employee2, ['', ' ?']) // ,  .  ?

El método bind () devuelve una nueva función con este valor especificado y le permite pasar una matriz o cualquier número de argumentos separados por comas.

const employee1 = { firstName: '', lastName: '' }
const employee2 = { firstName: '', lastName: '' }

function invite (greet1, greet2) {
    console.log(\`${greet1}, ${this.firstName} ${this.lastName}. ${greet2}\`)
}

const inviteEmployee1 = invite.bind(employee1)
const inviteEmployee2 = invite.bind(employee2)
inviteEmployee1('', ' ?') // ,  .  ?
inviteEmployee2('', ' ?') // ,  .  ?

Por lo tanto, los métodos call () y apply () llaman a la función después de que se ha vinculado a un objeto. La diferencia entre los dos es la forma en que se pasan los argumentos. Esta diferencia es fácil de recordar con las primeras letras de los métodos: llamar es una coma (coma, c), aplicar es una matriz (matriz, a). El método bind () devuelve una nueva función vinculada al objeto especificado.



JSR - Llamar / Aplicar

JSR - Vincular

MDN - Llamar

MDN - Aplicar

MDN - Vincular

4. ¿Qué es JSON y qué métodos tiene?

JSON es un formato de datos textuales basado en la sintaxis de objetos JavaScript inventado por Douglas Crockford. Se utiliza para transferir datos a través de la red y suele tener la extensión .json y el tipo MIME application / json.

Análisis: convierte una cadena JSON en un objeto.

JSON.parse(text)

Cadena de caracteres: convierte un objeto en una cadena JSON para su transmisión a través de la red.

JSON.stringify(object)

JSR

MDN

5. ¿Qué hace el método Array.slice ()?

El método slice () devuelve los elementos de la matriz seleccionados como una nueva matriz. Devuelve elementos que comienzan en el índice especificado en el primer argumento y terminan con, pero sin incluir, el índice especificado en el segundo argumento opcional. Si el segundo argumento está ausente, se recuperarán todos los elementos que comiencen en el índice especificado en el primer argumento.

const arrayIntegers = [1, 2, 3, 4, 5]
const arrayIntegers1 = arrayIntegers.slice(0, 2) // [1, 2]
const arrayIntegers2 = arrayIntegers.slice(2, 3) // [3]
const arrayIntegers3 = arrayIntegers.slice(4) // [5]

Tenga en cuenta que este método no modifica la matriz original, sino que solo devuelve un subconjunto de ella como una nueva matriz.



JSR

MDN

6. ¿Qué hace el método Array.splice ()?

El método splice () se utiliza para agregar o eliminar elementos de una matriz. El primer argumento especifica la posición inicial para agregar o eliminar elementos, el segundo argumento opcional especifica el número de elementos que se eliminarán. Cada argumento posterior (tercero, etc.) se agrega a la matriz:

let arrayOriginal1 = [1, 2, 3, 4, 5]
let arrayOriginal2 = [1, 2, 3, 4, 5]
let arrayOriginal3 = [1, 2, 3, 4, 5]

let array1 = arrayOriginal1.splice(0, 2) //  [1, 2];   = [3, 4, 5]
let array2 = arrayOriginal2.slice(3) //  [4, 5];   = [1, 2, 3]
let array3 = arrayOriginal3.slice(3, 1, 'a', 'b', 'c') //  [4];   = [1, 2, 3, 'a', 'b', 'c']

Tenga en cuenta que el método splice () modifica la matriz original y devuelve una matriz de los elementos extraídos.



JSR

MDN

7. ¿Cuál es la diferencia entre slice () y splice ()?

Las principales diferencias son las siguientes:



JSR

MDN - Slice

MDN - Empalme

8. ¿Cómo se comparan los objetos y los mapas?

Los objetos son similares a los mapas en que ambos le permiten establecer claves en valores, recuperar valores, eliminar claves y determinar si un valor está presente por clave. Por esta razón, los objetos solían usarse como mapas. Sin embargo, existen algunas diferencias entre ellos que hacen que el uso de tarjetas sea más preferible en determinados casos.

• Las claves de objeto solo pueden ser cadenas y símbolos, y las claves de mapa pueden ser cualquier valor, incluidas funciones y objetos
• Las claves de mapa están ordenadas, pero las claves de objeto no. Entonces, al iterar, las claves del mapa se devuelven en el orden en que se agregaron
• Puede obtener el tamaño del mapa utilizando la propiedad de tamaño y el número de propiedades del objeto se define manualmente
• Un mapa es una entidad iterable, y para iterar sobre un objeto, primero debe obtener sus claves de alguna manera y luego iterar sobre ellas
• Cuando utilice un objeto como mapa, recuerde que cualquier objeto tiene un prototipo, por lo que las propias claves del mapa pueden superponerse con claves definidas por el usuario. Por lo tanto, Object.create (null) debe usarse para crear un objeto de mapa, pero ahora este método rara vez se usa.
• El objeto es inferior al mapa en términos de rendimiento cuando se trata de agregar / eliminar claves rápidamente

JSR

MDN

9. ¿Cuál es la diferencia entre los operadores "==" y "==="?

JavaScript proporciona dos formas de comparar valores: estricto (=== ,! ==) y abstracto (== ,! ==). En una comparación estricta, los valores se comparan como son, y en una comparación laxa, si es necesario, se realiza una conversión implícita (casting) de tipos de valor. Los operadores estrictos utilizan las siguientes reglas para comparar diferentes tipos de valores:

• Dos cadenas son estrictamente iguales cuando tienen el mismo conjunto de caracteres, la misma longitud y los mismos caracteres en las mismas posiciones
• Dos números son estrictamente iguales si sus valores son iguales. Hay dos casos especiales:
  
  
  
  
  • NaN es igual a nada, incluido NaN
  • Los ceros positivos y negativos son iguales entre sí
  
  
  
• Los valores booleanos son estrictamente iguales cuando ambos son verdaderos o falsos, es decir, verdadero o falso
• Dos objetos son estrictamente iguales si se refieren al mismo objeto (ubicación de memoria)
• nulo === indefinido devuelve falso y nulo == indefinido devuelve verdadero

Algunos ejemplos:

0 == false // true
0 === false // false
1 == "1" // true
1 === "1" // false
null == undefined // true
null === undefined // false
'0' == false // true
'0' === false // false
[] == [] // 
[] === [] // false,      
{} == {} // 
{} === {} // false,      

JSR

MDN

10. ¿Qué son las funciones lambda o flecha?

Las funciones de flecha son una forma abreviada de escribir expresiones funcionales. No tienen sus propios argumentos, super y nuevos objetivos. Estas funciones sirven como una buena alternativa a las funciones que no tienen métodos, pero que no pueden usarse como constructores.

function regularSum (x, y) {
    return x + y
}

const arrowSum = (x, y) => x + y

JSR

MDN

11. ¿Por qué las funciones se denominan objetos de primera clase?

En JavaScript, las funciones son objetos de primera clase. Esto significa que las funciones se pueden utilizar como variables regulares.

Por ejemplo, una función puede pasarse como argumento a otra función, devolverse como un valor de otra función y asignarse a una variable. El siguiente ejemplo asigna una función a un controlador:

const handler = () => console.log(' -   ')
document.addEventListener('click', handler)

JSR

MDN

12. ¿Qué es una función de primer orden?

Una función de primer orden es una función que no toma otra función como argumento y no devuelve una función como valor:

const firstOrder = () => console.log(' -   ')

JSR

MDN

13. ¿Qué es una función de orden superior?

Una función de orden superior es una función que toma otra función como argumento o devuelve otra función como valor:

const firstOrderFun = () => console.log(' -   ')
const higherOrder = returnFirstOrderFun => returnFirstOrderFun()
higherOrder(firstOrderFunc)

JSR

MDN

14. ¿Qué es una función unaria?

Una función unaria (función de mónada) es una función que toma solo un argumento:

const unaryFun = a => console.log(a + 10) //  10        

JSR

MDN

15. ¿Qué es curry?

Currying es el proceso de convertir una función con múltiples parámetros en múltiples funciones con un parámetro. Este proceso lleva el nombre del matemático Haskell Curry. Curry convierte una función n-aria en varias funciones unarias (reduce la aridad de la función):

const sum = (a, b, c) => a + b + c
const currySum = a => b => c => a + b + c

currySum(1) //  : b => c => 1 + b + c
currySum(1)(2) //  : c => 3 + c
currySum(1)(2)(3) //   6

El curry se utiliza para permitir la reutilización de código (aplicación de función parcial) y para componer funciones.



JSR

16. ¿Qué es una función pura?

Una función pura es una función cuyo valor de retorno depende solo de los argumentos pasados, sin efectos secundarios. En pocas palabras, si llama a una función n veces con n argumentos, y la función siempre devuelve el mismo valor, entonces está limpia:

//  
let numberArray = []
const impureAddNumber = number => numberArray.push(number)
// 
const pureAddNumber = number => argNumberArray => argNumberArray.concat([number])

console.log(impureAddNumber(1)) // 1
console.log(numberArray) // [1]
console.log(pureAddNumber(2)(numberArray)) // [1, 2]
console.log(numberArray) // [1]

En el ejemplo anterior, impureAddNumber no es una función pura porque el método push () devuelve la nueva longitud de la matriz, que es independiente del argumento pasado. La segunda función es pura porque el método concat () concatena las dos matrices sin efectos secundarios y devuelve una nueva matriz. Las funciones puras son esenciales para las pruebas unitarias y no necesitan inyección de dependencia. La ausencia de efectos secundarios mejora la confiabilidad de la aplicación debido a las conexiones más débiles entre sus elementos. Una de las encarnaciones de este principio es el concepto de inmutabilidad, introducido en ES6, que prefiere const sobre let.



JSR

MDN

17. ¿Para qué se utiliza la palabra clave "dejar"?

La palabra clave let declara una variable local de ámbito de bloque. El alcance de dicha variable está limitado por el bloque, operador o expresión en el que se utiliza. Las variables declaradas con la palabra clave "var" tienen el alcance global o de función en el que están definidas:

let counter = 1
if (counter === 1) {
    let counter = 2
    console.log(counter) // 2
}
console.log(counter) // 1 ( counter,   ,   )

JSR

MDN

18. ¿Cuál es la diferencia entre let y var?

Las principales diferencias son las siguientes:



Algunos ejemplos:

function userDetails(username) {
    if (username) {
        console.log(salary)
        console.log(age)
        let age = 30
        var salary = 10000
    }
    console.log(salary) // 10000 (  )
    console.log(age) // SyntaxError: "age" is not defined (  )
}

JSR

MDN - deje

MDN - var

19. ¿Por qué se eligió la palabra "dejar" como palabra clave?

Let es un operador matemático que fue utilizado por los primeros lenguajes de programación como Scheme y Basic. Hoy en día let es utilizado por una gran cantidad de lenguajes de programación, por lo que esta palabra es la alternativa más cercana a la abreviatura "var" (variable).



JSR

MDN

20. ¿Cómo anular una variable en un bloque de interruptores?

Si intenta anular una variable declarada con la palabra clave "dejar" en un bloque de cambio, obtendrá un error:

let counter = 1
switch(x) {
    case 0:
        let name
        break
    case 1:
        let name // SyntaxError
        break
}

Para resolver este problema, debe crear un nuevo bloque dentro del caso: un nuevo alcance léxico:

let counter = 1
switch(x) {
    case 0: {
        let name
        break
    }
    case 1: {
        let name
        break
    }
}

JSR

MDN

21. ¿Qué es una zona muerta temporal?

Si intenta acceder a las variables declaradas con la palabra clave "let" o "const" (pero no "var") antes de que se definan (es decir, antes de que se les asigne un valor dentro del alcance actual), se lanzará una excepción ReferenceError. ). En otras palabras, la zona muerta de tiempo es el tiempo entre la creación del contexto (alcance) de una variable y su definición:

function someMethod () {
    console.log(counter1) // undefined
    console.log(counter2) // ReferenceError
    var counter1 = 1
    const counter2 = 2
}

MDN

22. ¿Qué es una expresión de función invocada inmediatamente (IIFE)?

IIFE es una función que se llama inmediatamente después de la definición. La sintaxis de dicha función puede verse así (una de las opciones, la más común):

(function () {
    // 
})()

// ,      
(() => {
    // 
})()

La razón principal para usar el IIFE es mantener las variables privadas, ya que no se puede acceder a las variables declaradas dentro del IIFE desde el entorno externo:

(function () {
    var message = 'IIFE'
    console.log(message)
})()
console.log(message) // SyntaxError: "message" is not defined

JSR

MDN

23. ¿Cuáles son los beneficios de utilizar módulos?

Entre otros, se pueden mencionar los siguientes:

• Mejorar la legibilidad y facilitar el mantenimiento del código
• Código reutilizable
• Mantener limpio el espacio de nombres global

JSR

MDN

24. ¿Qué es la memorización o memorización?

La memorización es una forma de mejorar el rendimiento de una función almacenando los resultados obtenidos previamente de esa función en la caché. Cada vez que se llama a la función, el argumento que se le pasa se convierte en el índice de caché. Si los datos están en la caché, se devuelven sin volver a ejecutar la función. De lo contrario, la función se ejecuta y el resultado se escribe en la caché:

const memoAdd = () => {
    let cache = {}
    return value => {
        if (value in cache) {
            console.log('   ')
            return cache[value] //   , cache.value        ,     JavaScript     .    
        } else {
            console.log(' ')
            let result = value + 20
            cache[value] = result
            return result
        }
    }
}
//    memoAdd
const add = memoAdd()
console.log(add(20)) //   40
console.log(add(20)) //     40

25. ¿Qué es izar?

Elevar es el proceso de mover variables y expresiones de función al comienzo de su alcance antes de ejecutar el código. Recuerde: solo se levantan las variables y expresiones en sí mismas, no su inicialización (es decir, se levanta la declaración de variable, no la asignación de un valor):

console.log(message) // undefined
var message = '!'

Para el intérprete, este código se ve así:

var message
console.log(message)
message = '!'

JSR

MDN

26. ¿Qué es una clase?

Las clases introducidas en ES6 son azúcar sintáctico (envoltorio, abstracción o complemento) para herencia de prototipos (para prototipo de función de constructor). Ejemplo de función constructora:

function Bike(model, color) {
    this.model = model
    this.color = color
}

Bike.prototype.getDetails = function () {
    return ' ' + this.model + '   ' + this.color + ' .'
}

Mismo ejemplo usando clase:

class Bike {
    constructor (color, model) {
        this.color = color
        this.model = model
    }

    getDetails () {
        return \` ${this.model}   ${this.color} .\`
    }
}

JSR

MDN

27. ¿Qué es un cierre?

Un cierre es una combinación de una función y su entorno léxico. En pocas palabras, un cierre es cuando una función interna tiene acceso a las variables declaradas en una función externa. Un cierre tiene una cadena de tres ámbitos:

• Alcance propio
• Alcance de la función externa
• Alcance global

const welcome = name => {
    const greet = message => {
        console.log(\`${message}, ${name}!\`)
    }
    return greet
}

const fun = welcome('')
fun('') // , !

JSR

MDN

28. ¿Qué es un módulo?

Los módulos son pequeñas piezas de código independiente y reutilizable que subyacen a muchos patrones de diseño. La mayoría de los módulos se exportan como objetos, funciones o constructores.



JSR

MDN

29. ¿Qué es el alcance?

El alcance define la disponibilidad de variables, funciones y objetos en diferentes lugares del código durante su ejecución. En otras palabras, el alcance es la visibilidad de las variables y otros recursos en el contexto actual de ejecución del código.



MDN

30. ¿Qué es un trabajador de servicios?

Un trabajador de servicio es un script que se ejecuta independientemente de la página web en la que se ejecuta y de las acciones del usuario. De hecho, el trabajador del servicio actúa como un servidor proxy entre la aplicación y el navegador. Las principales capacidades de los trabajadores del servicio son las siguientes: garantizar que la aplicación esté fuera de línea, sincronización periódica en segundo plano, notificaciones push, interceptar y procesar solicitudes de red y administrar la caché mediante programación.



MDN

31. ¿Cómo interactúo con el Modelo de objetos de documento (DOM) utilizando trabajadores de servicio?

Los trabajadores del servicio no tienen acceso directo al DOM. Sin embargo, pueden interactuar con la página a través de la interfaz postMessage y la página puede modificar el DOM.



MDN - ServiceWorker

MDN - postMessage

32. ¿Cómo reutilizar la información al reiniciar un trabajador de servicio?

Uno de los problemas con los trabajadores del servicio es que dejan de ejecutar cuando no están en uso y se reinician cuando es necesario. Esto le impide agregar controladores de eventos de recuperación y mensajes de forma global. Para reutilizar la información, es necesario asegurarse de que los trabajadores del servicio interactúen con una base de datos indexada (IndexedDB) o almacenamiento local (almacenamiento local).



MDN

33. ¿Qué es una base de datos indexada (IndexedDB)?

IndexedDB es una API de bajo nivel para almacenar grandes cantidades de datos estructurados, incluidos archivos y blobs, en el lado del cliente. Esta interfaz utiliza índices para mejorar la velocidad de recuperación de datos.



JSR

MDN

34. ¿Qué es el almacenamiento web?

El almacenamiento web es una interfaz que le permite almacenar datos como pares clave / valor localmente, es decir, en el navegador del usuario, de una forma más cómoda que utilizando cookies. El almacenamiento web proporciona dos mecanismos de almacenamiento:

• Almacenamiento local (almacenamiento local): almacena los datos del usuario actual durante un período de tiempo ilimitado
• Almacenamiento de sesiones: almacena datos durante la sesión actual, es decir, al cerrar la pestaña del navegador, los datos se perderán

JSR

MDN

35. ¿Qué es postMessage?

postMessage es una forma de comunicarse entre diferentes fuentes de un objeto de ventana (por ejemplo, una página y la ventana emergente que genera (una ventana emergente) o una página y un iframe incrustado). Normalmente, los scripts de una página no tienen acceso a otra página si esa página sigue la Política de origen común o de origen único (origen: protocolo, host y puerto).



MDN - postMessage

36. ¿Qué son las cookies?

Una cookie es una pequeña porción de datos que se almacena en la computadora de un usuario para su uso posterior en un navegador. Las cookies se almacenan como pares clave / valor:

document.cookie = 'username='

JSR

MDN

37. ¿Por qué necesitamos cookies?

Las cookies se utilizan para guardar información sobre el usuario (no se recomienda utilizarlas para almacenar información confidencial). Por lo general, este proceso consta de dos etapas:

• En la primera visita a la página, el perfil de usuario se guarda en una cookie.
• Al volver a visitar la página, el perfil de usuario se recupera de la cookie.

JSR

MDN

38. ¿Cuáles son las capacidades de las cookies?

De forma predeterminada, las cookies se eliminan cuando se cierra el navegador, sin embargo, esto se puede cambiar configurando el vencimiento en UTC:

document.cookie = 'username=; expires=Sat, 5 Sep 2020 12:00:00 UTC'

Por defecto, las cookies pertenecen a la página actual, sin embargo, esto también se puede cambiar configurando la ruta:

document.cookie = 'username=; path=/services'

JSR

MDN

39. ¿Cómo elimino las cookies?

Puede eliminar las cookies configurando el tiempo transcurrido como vida útil. En este caso, no es necesario definir un valor de cookie:

document.cookie = 'username=; expires=Sat, 05 Jun 2020 00:00:00 UTC; path=/;'

Tenga en cuenta que en este caso es necesario determinar la ruta para eliminar la cookie correcta. Algunos navegadores no le permiten eliminar las cookies sin especificar este parámetro.



JSR

MDN

40. ¿Cuál es la diferencia entre cookies, almacenamiento local y almacenamiento de sesiones?

Las principales diferencias son las siguientes:



JSR - Cookies

MDN - Cookie

JSR - LocalStorage, SessionStotage

MDN - Almacenamiento web

41. ¿Cuál es la principal diferencia entre almacenamiento local y de sesión?

El almacenamiento local es el mismo que el almacenamiento de la sesión, excepto que en el primero, los datos se guardan incluso cuando cierra y reinicia el navegador, y en el segundo, los datos se eliminan al final de la sesión (cerrando la pestaña del navegador).



JSR

MDN

42. ¿Cómo accedo al almacenamiento web?

El objeto de ventana proporciona objetos WindowLocalStorage y WindowSessionStorage que tienen propiedades localStorage y sessionStorage, respectivamente. Estas propiedades crean una instancia de un objeto de almacenamiento, con el que puede escribir, recuperar y eliminar datos para un dominio y tipo de almacenamiento específicos (sesión o local):

//  
localStorage.setItem('data', document.querySelector('.data').value)
//  
localStorage.getItem('data')

JSR

MDN

43. ¿Qué métodos proporciona el almacenamiento de sesiones?

El almacenamiento de sesiones proporciona métodos para leer, escribir y eliminar datos:

//  
sessionStorage.setItem('key', 'value')

//  
const data = sessionStorage.getItem('key')

//   
sessionStorage.removeItem('key')

//   
sessionStorage.clear()

JSR

MDN

44. ¿Qué evento ocurre cuando se trabaja con el almacenamiento web?

Cuando el almacenamiento cambia en el contexto de otro documento, se genera el evento de almacenamiento:

window.onstorage = function () {}

Un ejemplo de cómo manejar este evento:

window.onstorage = event => {
    console.log(\`${event.key}  .
     : ${event.oldValue}.
     : ${event.newValue}.\`)
}

Este evento te permite implementar una especie de chat.



JSR

MDN

45. ¿Para qué se utiliza el almacenamiento web?

El almacenamiento web es más seguro y puede almacenar más datos que las cookies sin afectar el rendimiento. Además, no se envían datos al servidor (en el caso de las cookies, los datos se incluyen en los encabezados de solicitud y respuesta cada vez que el cliente accede al servidor). Por tanto, esta forma de almacenar datos es preferible a las cookies.



JSR

MDN

46. ​​¿Cómo puedo determinar si un navegador es compatible con Web Storage?

Antes de usar el almacenamiento web, se recomienda verificar la compatibilidad del navegador con esta interfaz:

if (typeof(Storage) !== 'undefined') {
    // 
} else {
    // -  
}

// 
if ('Storage' in window) {
    console.log('ok')
} else {
    console.warn(' ok')
}

Según CanIUse , el soporte de almacenamiento web es del 98% en la actualidad.



JSR

MDN

47. ¿Cómo puedo determinar si un navegador es compatible con los trabajadores del servicio?

Antes de utilizar los trabajadores del servicio, se recomienda comprobar la compatibilidad del navegador con esta interfaz:

if (typeof(Worker) !== undefined) {
    // 
} else {
    // -  
}
// 
if ('Worker' in window) {
    console.log('ok')
} else {
    console.warn(' ok')
}

Según CanIUse , el apoyo de los trabajadores de servicios es del 94% en la actualidad.



MDN

48. Da un ejemplo de un trabajador web

Para utilizar el trabajador web, debe hacer lo siguiente.

Cree un archivo para el trabajador, por ejemplo, get-current-time.js:

const getCurrentTime = () => {
    let time = new Date().toLocaleTimeString()
    postMessage(time)
    setTimeout(() => getCurrentTime(), 1000)
}

getCurrentTime()

El método postMessage () se utiliza para enviar mensajes a la página.

Crea un objeto trabajador:

const worker = new Worker('get-current-time.js')

Posteriormente, procesamos la recepción de mensajes del trabajador:

<output></output>
<button></button>

worker
    .addEventListener('message', event => document.querySelector('output')
    .textContent = event.data)

El trabajador continuará procesando el evento de mensaje incluso después de que el script externo haya completado su trabajo, por lo que debe detenerse forzosamente:

document.querySelector('button')
    .addEventListener('click', () => worker.terminate())

Si configura el trabajador como indefinido, puede reutilizarlo:

worker = undefined

MDN

49. ¿Cuáles son las limitaciones de los trabajadores web para trabajar con DOM?

Dado que los trabajadores web se crean en un archivo separado, no tienen acceso a los siguientes objetos:

• ventana
• Documento
• Objeto padre: el objeto que inició el trabajador

MDN

50. ¿Qué es una promesa?

Una promesa (comunicación) es un objeto que se ejecuta con algún valor o se rechaza con un error. Las promesas se resuelven después de que haya transcurrido cierto tiempo o después de que ocurra un cierto evento. Una promesa puede tener uno de tres estados: pendiente, cumplida y rechazada.

Sintaxis de promesa:

const promise = new Promise((resolve, reject) => {
    // 
})

// ,   ,    
const promise = Promise.resolve(value)
promise.then(value => {
    // 
})

Un ejemplo de uso de una promesa:

const promise = new Promise(resolve => {
    const timer = setTimeout(() => {
        resolve('  !')
        clearTimeout(timer)
    }, 5000);
}, reject => {
    reject('-   ')
})

promise
    .then(value => console.log(value))
    .catch(error => console.error(error))
    .finally(() => console.log(' ')) //     "  !"  5    " "

Algoritmo de resolución de promesas:







JSR

MDN

51. ¿Por qué se necesitan las promesas?

Las promesas se utilizan para trabajar con código asincrónico. Son una alternativa a las funciones de devolución de llamada, evitando el llamado "infierno de devolución de llamada", haciendo que el código sea más limpio y legible.



JSR

MDN

52. Nombra tres posibles estados de una promesa.

Las promesas tienen tres estados:

• Pendiente: etapa antes de iniciar la operación
• Cumplido: operación completada con éxito
• Rechazado: la operación falló. Se lanza una excepción

JSR

MDN

53. ¿Qué es una función de devolución de llamada?

Una devolución de llamada es una función que se pasa a otra función como argumento. Esta función (interna) se llama dentro del padre (externo) para realizar una operación cuando ocurre un evento específico. Veamos un ejemplo simple:

function callback(name) {
    alert(\`, ${name}!\`)
}

function outer(cb) {
    const name = prompt(',   ')
    cb(name)
}
outer(callback)

En el ejemplo anterior, la función externa solicita el nombre del usuario y lo almacena en la variable de nombre. Esta función luego pasa el nombre a la función de devolución de llamada, que genera un saludo con el nombre del usuario.



JSR

MDN

54. ¿Por qué se necesitan devoluciones de llamada?

Las devoluciones de llamada son necesarias porque JavaScript es un lenguaje impulsado por eventos. Esto significa que, por ejemplo, en lugar de esperar una respuesta a una solicitud o que se procese un evento en particular, JavaScript continúa respondiendo a otros eventos. Considere un ejemplo en el que una función accede a la interfaz y la otra imprime un mensaje en la consola:

function first () {
    //    API
    setTimeout(() => console.log('  '), 1000)
}

function second () {
    console.log('  ')
}

first()
second()
//    "  ",  "  "

Como puede ver, JavaScript no espera a que se complete la primera función, sino que continúa ejecutando el código. Por lo tanto, las devoluciones de llamada se utilizan para simular la asincronía, evitando el bloqueo del hilo principal del programa.



JSR

MDN

55. ¿Qué es el infierno de devolución de llamada?

El infierno de devolución de llamada es un anti-patrón en el que muchas funciones de devolución de llamada están anidadas entre sí para implementar lógica asincrónica. Esta estructura de código es difícil de entender y mantener. Podría verse así:

function first () {
    return function second () {
        return function third () {
            return function fourth () {
                //  ..
            }
        }
    }
}

Este enfoque de la codificación se considera una mala práctica, excepto en los casos de curación, aplicación parcial o composición de funciones.



JSR

MDN

56. ¿Qué son los eventos enviados por el servidor (SSE)?

Eventos enviados por el servidor es una tecnología de notificación automática que permite a los navegadores recibir datos actualizados del servidor a través de una conexión HTTP sin enviar una solicitud. Esta es una de las formas de comunicación entre el cliente y el servidor, cuando los mensajes son enviados solo por el servidor. Esta tecnología se utiliza para actualizar Facebook / Twitter, precios de tiendas, feeds de noticias, etc.



JSR

MDN

57. ¿Cómo recibir mensajes (notificaciones o eventos) enviados por el servidor?

El objeto EventSource se utiliza para esto:

if('EventSource' in window) {
    const source = new EventSource('sse.js')
    source.addEventListener('message', event => document.querySelector('output')
        .textContent = event.data)
}

JSR

MDN

58. ¿Cómo puedo comprobar la compatibilidad del navegador con SSE?

Esto se hace así:

if (typeof EventSource !== 'undefined') {
    // 
} else {
    // SSE  
}

// 
('EventSource' in window)
    ? console.log('ok')
    : console.warn('! ok')

Según CanIUse, el 95% de los navegadores son actualmente compatibles con SSE.



JSR

MDN

59. ¿Qué eventos ocurren al trabajar con SSE?

Aquí hay una lista de estos eventos:



JSR

MDN

60. ¿Cuáles son las reglas básicas para trabajar con promesas?

Las reglas básicas para trabajar con promesas son las siguientes:

• Una promesa es un objeto que contiene un método then () integrado o estándar
• La etapa de esperar una promesa, generalmente termina con una etapa de su cumplimiento o rechazo.
• El estado de una promesa cumplida o rechazada no debe cambiar una vez que se ha resuelto
• Después de resolver una promesa, su valor tampoco debería cambiar.

JSR

MDN

61. ¿Qué es una devolución de llamada en una devolución de llamada?

Puede anidar devoluciones de llamada entre sí para realizar secuencialmente ciertas operaciones:

loadScript('/script1.js', script => {
    console.log(\` ${script} \`)

    loadScript('/script2.js', script => {
        console.log(\` ${script} \`)

        loadScript('/script3.js', script => {
            console.log(\` ${script} \`)
        })
    })
})

JSR

MDN

62. ¿Qué es una cadena de promesas?

La ejecución secuencial de múltiples tareas asincrónicas mediante promesas se denomina cadena de promesas. Consideremos un ejemplo:

new Promise((resolve, reject) => {
    const id = setTimeout(() => {
        resolve(1)
        clearTimeout(id)
    }, 1000)
}).then(result => {
    console.log(result) // 1
    return result * 2
}).then(result2 => {
    console.log(result2) // 2
    return result2 * 3
}).then(result3 => {
    console.log(result3) // 6
}).catch(error => console.error(error))

Algoritmo de ejecución:

• La primera promesa se resuelve con un valor de 1
• Después de eso, el primer método then () imprime este valor en la consola y lo devuelve multiplicado por 2
• El segundo then () imprime el resultado del primero then () en la consola (2) y devuelve el resultado multiplicado por 3
• El último then () imprime el resultado del segundo then () en la consola (6)
• El bloque de captura se usa para manejar errores

JSR

MDN

63. ¿Qué es Promise.all ()?

Promise.all () es una promesa que toma una serie de otras promesas como argumento y devuelve los resultados de las promesas cumplidas o un error si una es rechazada. Sintaxis:

Promise.all([Promise1, Promise2, Promise3])
    .then(results => console.log(results))
    .catch(error => console.error(error))

Recuerde, el orden en el que se disparan los resultados depende del orden de las promesas en la matriz.



JSR

MDN

64. ¿Qué es Promise.race ()?

Promise.race () devuelve el resultado de la primera promesa cumplida o rechazada que se pasa como una matriz de promesas:

const promise1 = new Promise((resolve, reject) => setTimeout(resolve, 500, ''))

const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, ''))

Promise.race([promise1, promise2]).then(value => console.log(value)) // ""

JSR

MDN

65. ¿Qué es el régimen estricto?

Para habilitar el modo estricto, use la declaración 'use estricto' (o 'use estricto') al comienzo de todo el código o una función individual. El modo estricto se introdujo en ES5. En este modo, algunas acciones están prohibidas y se lanzan más excepciones.



JSR

MDN

66. ¿Por qué necesita un régimen estricto?

El modo estricto le permite escribir código más seguro al evitar que se produzcan muchos errores. Por ejemplo, no permite la creación accidental de variables globales (sin la palabra clave, variable = valor), la asignación de un valor a una propiedad de solo lectura, una propiedad que solo se puede obtener con un getter, una propiedad inexistente y una variable u objeto inexistente. En el modo no estricto, no se lanza ninguna excepción en todos estos casos.



JSR

MDN

67. ¿Cómo habilito la seguridad estricta?

El modo estricto está habilitado por la declaración 'use estricto' (o 'use estricto') al comienzo de un código o función. Por lo general, esta instrucción se indica al principio del guión, es decir, en el espacio de nombres global:

'use strict'
x = 3.14 // ReferenceError: "x" is not defined

Si se especifica 'usar estricto' en una función, entonces el modo estricto se aplica solo a esa función:

x = 3.14 //   
f() // ReferenceError: "y" is not defined

function f () {
    'use strict'
    y = 3.14
}

JSR

MDN

68. ¿Para qué se usa la doble negación?

La doble negación (!!) convierte el valor en booleano. Si el valor es falso, se devuelve falso; de lo contrario, verdadero:

const x = 1
console.log(x) // 1
console.log(!!x) // true
const y = ''
console.log(y) // ''
console.log(!!str) // false

Nota:!!! ¡No es un operador separado, sino dos operadores! ..



MDN

JSR

69. ¿Para qué se utiliza el operador de eliminación?

Este operador se utiliza para eliminar propiedades de objetos y los valores de estas propiedades:

'use strict'
const user = {
    name: '',
    age: 30
}

delete user.age

console.log(user) // { name: "" }

delete user // SyntaxError: Delete of an unqualified identifier in strict mode

Tenga en cuenta que en el modo no estricto, un intento de eliminar un objeto fallará silenciosamente.

Dado que una matriz también es un objeto, la aplicación de eliminar a un elemento de la matriz eliminará su valor y le escribirá indefinido, es decir, el índice del elemento eliminado de la matriz se conservará y la longitud de la matriz no cambiará.



JSR

MDN

70. ¿Para qué se utiliza el tipo de operador?

Este operador se utiliza para definir el tipo de variable o expresión:

typeof 1 // number
typeof [] // object
typeof '' // string
typeof (1 + 2) // number

typeof null // object
typeof NaN // number

JSR

MDN

71. ¿Qué es indefinido?

indefinido es el valor estándar indefinido (pero no faltante) (valor predeterminado) de una variable a la que no se le ha asignado un valor, así como una variable no declarada. Este es uno de los tipos de datos primitivos:

let name
console.log(typeof name) // undefined
console.log(typeof age) // undefined

Este valor se puede asignar a una variable de forma explícita:

user = undefined

JSR

MDN

72. ¿Qué es nulo?

null es un valor que representa la ausencia de un valor establecido explícitamente. Este es uno de los tipos de datos primitivos. Usando nulo, puede eliminar el valor de una variable:

const user = null
console.log(typeof user) // object

JSR

MDN

73. ¿Cuál es la diferencia entre nulo e indefinido?

Las principales diferencias son las siguientes:



JSR - JSR no definido

- nulo

MDN - MDN no definido

- nulo

74. ¿Qué es eval?

La función eval () evalúa la cadena que se le pasa. Una cadena puede ser una expresión, una variable, uno o más operadores:

console.log(eval('1 + 2')) // 3

//   
const curryCalc = x => operator => y =>
    new Promise((resolve, reject) =>
        resolve(eval(\`x${operator}y\`))
    ).then(
        result => console.log(result),
        error => console.error(' !')
    )

curryCalc(1)('+')(2) // 3
curryCalc(4)('-')(3) // 1
curryCalc(5)('x')(6) //  !

No recomendado para su uso.



JSR

MDN

75. ¿Cómo acceder al historial del navegador?

La información sobre el historial de movimientos entre páginas en el navegador contiene la propiedad de historial del objeto de ventana. Para ir a la página anterior o siguiente, use los métodos back (), next () o go ():

const goBack = () => {
    history.back()
    // 
    history.go(-1)
}

const goForward = () => history.forward()

MDN

76. ¿Qué tipos de datos existen en JavaScript?

Hay 8 tipos principales en JavaScript:

• número para cualquier número: entero o punto flotante, los valores enteros están limitados a ± 2 ⁵³
• bigint para enteros de longitud arbitraria
• cuerda para cuerdas. Una cadena puede contener uno o más caracteres, no hay un tipo de carácter separado
• booleano para verdadero / falso
• nulo para valores desconocidos: un tipo distinto con un solo valor nulo
• indefinido para valores no asignados: un tipo separado que tiene un valor indefinido
• objeto para estructuras de datos más complejas
• símbolo para identificadores únicos

JSR

MDN

77. ¿Qué hace isNaN ()?

La función isNaN () convierte el valor en un número y comprueba si es NaN.

isNaN('hello') // true
isNaN(100) // false

Una versión más robusta de esta funcionalidad es el método Number.isNaN () introducido en ES6.



JSR

MDN

78. ¿Cuál es la diferencia entre variables no declaradas y no definidas?

Las principales diferencias son las siguientes:



JSR

MDN

79. ¿Qué son las variables globales?

En el navegador, las funciones y variables globales declaradas con la palabra clave "var", o sin la palabra clave (en modo laxo), se convierten en propiedades del objeto de ventana global (no funciona en módulos). Estas variables son accesibles desde cualquier lugar del programa. No se recomienda utilizar variables globales. Si necesita crear una variable global, es mejor hacerlo explícitamente:

window.currentUser = {
    name: ''
}

// 
globalThis.currentUser = {
    name: ''
}

console.log(currentUser.name) // 

JSR

80. ¿Qué problemas conlleva la creación de variables globales?

La creación de variables globales contamina el espacio de nombres global, lo que puede provocar conflictos entre los nombres de las variables. También dificulta la depuración y prueba de su código.



JSR

81. ¿Qué es NaN?

La propiedad global de NaN es un valor Not-a-Number. Más precisamente, NaN indica que el valor es incorrecto, pero sigue siendo un número. Por lo tanto typeof NaN devuelve número.

parseInt('bla') // NaN
Math.sqrt(-1) // NaN

MDN

82. ¿Qué hace isFinite ()?

La función global isFinite () convierte el argumento en un número y devuelve verdadero si es un número ordinario (finito), es decir no NaN, Infinito (infinito positivo), -Infinito (infinito negativo). De lo contrario, se devuelve falso.

isFinite(Infinity) // false
isFinite(-Infinity) // false
isFinite(NaN) // false

isFinite(100) // true

También hay un método Number.isFinite (), que, a diferencia de isFinite (), no convierte el argumento en un número antes de verificarlo.



MDN

JSR

83. ¿Qué es el flujo / propagación de eventos?

El flujo de eventos (propagación de eventos) es el orden en el que ocurre el evento en la página. Cuando hace clic en un elemento anidado dentro de otros elementos, antes de que el evento alcance el elemento de destino, pasará secuencialmente por todos sus antepasados, comenzando por el objeto de ventana global. Hay tres etapas de propagación de eventos:

• De arriba a abajo: etapa de captura o inmersión
• Etapa objetivo
• De abajo hacia arriba: la etapa de ascenso o ascenso (no debe confundirse con las variables de elevación: elevación)

JSR

84. ¿Qué es el evento burbujeante?

El burbujeo es la etapa de propagación de un evento, cuando el evento se registra por primera vez en el elemento de destino y luego asciende en la cadena desde los antepasados ​​de este elemento hasta el elemento superior (exterior): el objeto de ventana global.



JSR

85. ¿Qué es inmersión o captura de eventos?

La inmersión es la etapa en la que ocurre un evento cuando se registra por primera vez en el elemento superior (exterior) (el objeto de ventana global) y luego desciende por la cadena de ancestros hasta el elemento de destino.



JSR

86. ¿Cómo enviar un formulario para su procesamiento?

Esto se puede hacer de diferentes maneras:

function submitForm() {
    document.forms[0].submit()
}

form.onsubmit = function(event) {
    event.preventDefault()
    // 
}

form.addEventListener('submit', event => {
    event.preventDefault()
    // 
})

Cualquier botón de un formulario se envía de forma predeterminada, es decir, sirve para enviar un formulario.



JSR

MDN

87. ¿Cómo puedo obtener información sobre el sistema operativo?

Esta información está contenida en el objeto del navegador global. Parte de esta información se puede obtener a través de su propiedad de plataforma:

console.log(navigator.platform)

MDN

88. ¿Cuál es la diferencia entre DOMContentLoaded y eventos de carga?

El evento DOMContentLoaded se genera cuando el documento HTML original se ha cargado y analizado por completo sin esperar a que las hojas de estilo, las imágenes o los marcos se carguen por completo. El evento de carga se activa después de que la página se haya cargado por completo, incluidos los recursos adicionales.



JSR

MDN - DOMContentLoaded

MDN - cargar

89. ¿Cuál es la diferencia entre los objetos nativos, host (propiedad del tiempo de ejecución del código) y personalizados?

Los objetos nativos son parte del lenguaje y se definen en la especificación ECMAScript. Dichos objetos son, por ejemplo, Número, Cadena, Función, Objeto, Matemáticas, RegExp, Fecha, etc. Los objetos de host los proporciona el navegador u otro tiempo de ejecución como Node.js. Dichos objetos son, por ejemplo, ventana, documento (DOM), XMLHttpRequest, API web (pila de llamadas, cola de tareas), etc. Los objetos de usuario son cualquier objeto creado en código, por ejemplo, un objeto que contiene información sobre el usuario:

const user = {
    name: '',
    age: 30
}

JSR

MDN

90. ¿Qué herramientas se utilizan para posponer el código?

Tales medios son:

• Herramientas de desarrollo en el navegador como Chrome DevTools
• Expresión del depurador
• Buen viejo console.log ()

JSR

MDN - depurador

MDN - Consola

91. ¿Cuáles son las ventajas y desventajas de las promesas frente a las devoluciones de llamada?

Beneficios:

• Evite el infierno de devoluciones de llamada
• Le permite ejecutar código asincrónico secuencialmente usando then ()
• Permita que el código asincrónico se ejecute en paralelo usando Promise.all ()
• Resuelve muchos problemas de devolución de llamada (llamar demasiado tarde o demasiado temprano, varias llamadas en lugar de una, ocultación de errores)

desventajas

• El código se vuelve más difícil de escribir
• Para proporcionar compatibilidad con los navegadores más antiguos, se necesita un polyfill (hoy en día casi no quedan esos navegadores)

JSR - Promesas

JSR - Devolución de llamada

MDN - Promesa

MDN - Devolución de llamada

92. ¿Cuál es la diferencia entre un atributo y una propiedad de un elemento?

Cuando el navegador carga la página, analiza el HTML y genera objetos DOM a partir de él. Para los nodos de elementos, la mayoría de los atributos HTML estándar se convierten automáticamente en propiedades de los objetos DOM. Aquellos. el atributo de un elemento se especifica en el marcado y su propiedad se especifica en el DOM. Por ejemplo, para una etiqueta de cuerpo con un atributo id = "page", el objeto DOM tendrá una propiedad body.id = "page".

<input type="text" value=" !">
//     : type  value

const input = document.querySelector('input')
//  
console.log(input.getAttribute('value'))
//  
console.log(input.value)

//   
input.setAttribute('value', ' !')
//   
input.value = ' !'

Tenga en cuenta que la especificación ECMAScript también define los atributos de las propiedades del objeto: [[Valor]], [[Escriturable]], [[Enumerable]] y [[Configurable]].



JSR

93. ¿Qué es una póliza del mismo origen (SOP)?

La política de origen compartido (misma fuente) bloquea el acceso a los datos de otra fuente. La fuente es una combinación de protocolo, host y puerto. De forma predeterminada, el uso compartido de recursos de origen cruzado (CORS) está prohibido, es decir, los datos se proporcionan solo en respuesta a una solicitud de la misma fuente en la que se encuentran. Este comportamiento se puede cambiar utilizando encabezados HTTP especiales.



JSR

MDN - SOP

MDN - CORS

94. ¿Qué hace el vacío 0?

El operador void evalúa la expresión pasada y devuelve undefined. Por lo general, cuando hacemos clic en un enlace, el navegador carga una nueva página o vuelve a cargar la actual. Puede evitar esto usando la expresión "void (0)":

<a href="javascript:void(0)" onclick="alert('!')">  !
</a>

Las recargas de página también se pueden evitar con un simple código auxiliar:

<a href="#"> </a>
//     "#"   URL   

MDN

95. ¿JavaScript es un lenguaje de programación compilado o interpretado?

JavaScript en sí es un lenguaje de programación interpretado. El motor analiza el código, interpreta cada línea y la ejecuta. Sin embargo, los navegadores modernos utilizan una tecnología llamada Just-In-Time (compilación JIT) donde el código se compila (optimiza) antes de la ejecución. Esto aumenta el tiempo de preparación para la ejecución del código, pero acelera significativamente la ejecución en sí. Por ejemplo, V8, el motor utilizado en Chrome y Node.js, utiliza el intérprete de Ignition para analizar el código y el compilador TurboFan para optimizar el código.



JSR

MDN

96. ¿JavaScript distingue entre mayúsculas y minúsculas?

Sí, JavaScript distingue entre mayúsculas y minúsculas. Por tanto, las palabras clave, los nombres de las variables, las funciones y los objetos deben ser idénticos al utilizarlos. Por ejemplo, const somename y const someName son variables diferentes, typeof (1) es número y typeOf 1 es ReferenceError: typeOf no está definido.



JSR

MDN

97. ¿Están relacionados Java y JavaScript?

No, son dos lenguajes de programación diferentes. Sin embargo, ambos pertenecen a lenguajes orientados a objetos y, como muchos otros lenguajes, utilizan una sintaxis similar (if, else, for, switch, break, continue, etc.). Básicamente, Java to JavaScript es una estrategia de marketing.



JSR

MDN

98. ¿Qué es un evento?

Un evento es una reacción del navegador a una acción específica. Esta acción puede ser una acción del usuario, por ejemplo, hacer clic en un botón o ingresar texto, cargar una página, recibir una respuesta a una solicitud, etc. (Las acciones que desencadenan eventos no son necesariamente específicas del usuario). Los eventos se registran para su posterior procesamiento.

button.onclick = () => alert('!')

input.addEventListener('change', function() {
    p.textContent = this.value
})

window.onload = () => console.log('  ')

MDN

JSR

99. ¿Quién inventó JavaScript?

JavaScript fue creado por Brendan Eich durante su tiempo en Netscape Communications. El lenguaje originalmente se llamaba Mocha, luego pasó a llamarse LiveScript y estaba destinado tanto para la programación del lado del cliente como para la programación del lado del servidor (donde debería llamarse LiveWire).



JSR

MDN