200 preguntas teóricas de JavaScript

¡Buen dia amigos!



Aquí hay una lista de las segundas cien preguntas básicas de 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 las primeras 100 preguntas aquí .

101. ¿Para qué se utiliza stopPropagation ()?

Este método se utiliza para evitar que el evento suba o suba en la cadena desde los ancestros del elemento de destino. En otras palabras, deja de enviar el evento desde el elemento de destino a sus ancestros. Consideremos un ejemplo:

<div onclick="f2()">
    <div onclick="f1()"></div>
</div>

function f1(event) {
    event.stopPropagation()
    console.log(' ')
}

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

Al hacer clic en un contenedor anidado, se muestra el mensaje "Contenedor interno" en la consola. Si elimina event.stopPropagation (), cuando haga clic en el contenedor anidado, ambos mensajes se mostrarán en la consola.



JSR

MDN

102. ¿Qué hace return false?

Esta declaración se utiliza en controladores de eventos para:

• Cancelar el comportamiento predeterminado del navegador
• Evitar la propagación de eventos a través del DOM
• Detener la ejecución de la devolución de llamada y devolver el control a la función de llamada

Tenga en cuenta que sin especificar un valor de retorno, la declaración de retorno devuelve undefined.



JSR

MDN

103. ¿Qué es BOM?

La lista de materiales o (modelo de objetos del navegador) permite que JavaScript interactúe con el navegador. Este modelo incluye objetos como navegador, ubicación, historial, pantalla, XMLHttpRequest, etc. En otras palabras, las listas de materiales son objetos adicionales proporcionados por el navegador para trabajar con todo menos el documento.

Tenga en cuenta que la lista de materiales no está estandarizada, por lo que su implementación puede diferir en diferentes navegadores.







JSR

104. ¿Para qué se usa setTimeout ()?

Este método se utiliza para la ejecución diferida de una tarea. En otras palabras, permite ejecutar la ejecución de una función o la evaluación de una expresión después de un tiempo determinado (en milisegundos). En el siguiente ejemplo, imprimimos un mensaje en la consola después de 2 segundos:

setTimeout(() => console.log('!'), 2000)

//    ,   
const timer = setTimeout(() => {
    console.log('!')
    clearTimeout(timer)
}, 2000)

JSR

MDN

105. ¿Para qué se utiliza setInterval ()?

Este método se utiliza para ejecutar una tarea periódicamente. En otras palabras, le permite ejecutar la ejecución de una función o la evaluación de una expresión después de un cierto período de tiempo (en milisegundos). En el siguiente ejemplo, imprimimos un mensaje en la consola cada 2 segundos:

setInterval(() => console.log('!'), 2000)

//    ,    
//    
let i = 0
const timer = setInterval(() => {
    console.log('!')
    i++

    if (i == 2) {
        clearInterval(timer)
    }
}, 2000)

En el segundo ejemplo, el mensaje "¡Hola!" imprimirá en la consola dos veces, después de lo cual el temporizador se detendrá



JSR

MDN

106. ¿Por qué JavaScript se denomina de un solo hilo?

JavaScript es un lenguaje de programación síncrono o de un solo hilo. Esto significa que solo se puede ejecutar una tarea a la vez. Si la tarea es compleja, puede llevar mucho tiempo completarla y durante este tiempo se bloqueará el hilo principal de ejecución del código. Bloquear una secuencia, a su vez, significa que no hay interactividad en la página. El navegador deja de responder a las acciones del usuario y otros eventos. Para solucionar este problema, se utilizan devoluciones de llamada, promesas, async / await, trabajadores y otras herramientas para trabajar con código asincrónico. En JavaScript, a diferencia de, por ejemplo, Java, Go o C ++, no hay forma de crear subprocesos o procesos adicionales.



JSR

MDN

107. ¿Qué es la delegación de eventos?

La delegación de eventos es una técnica en la que se registra un evento en un padre para manejar los eventos generados por los hijos.

A menudo se usa para manejar clics en botones en un contenedor de agrupación o para modificar campos de entrada de texto en formularios, por ejemplo:

<form>
    <input type="text" class="first-input">
    <input type="text" class="second-input">
</form>

<div>
    <button class="first-button">click</button>
    <button class="second-button">click</button>
</div>

const form = document.querySelector('form')
const buttons = document.querySelector('div')

form.addEventListener('input', event => {
    console.log(event.target.className)
})

buttons.addEventListener('click', event => {
    console.log(event.target.className)
})

En el ejemplo anterior, en lugar de registrar controladores en los elementos secundarios, los registramos en los elementos principales. Ingresar texto en un campo o presionar un botón da como resultado la salida del nombre de clase del elemento correspondiente a la consola.



JSR

108. ¿Qué es ECMAScript?

ECMAScript es el lenguaje de programación detrás de JavaScript. Este es un tipo de patrón o modelo con el que se "construye" JavaScript. ECMAScript está estandarizado en la especificación ECMA-262 por la organización de estándares Ecma International.



JSR

MDN

109. Nombra las características de la sintaxis JSON

La sintaxis JSON tiene las siguientes características:

• Los datos son pares clave / valor
• La clave y el valor están entre comillas dobles, a menos que el valor sea un número ("clave": "valor")
• Los datos están separados por comas
• Los objetos están envueltos en llaves
• Matrices - para cuadrar

JSR

MDN

110. ¿Qué hace JSON.stringify ()?

Al enviar datos al servidor, debe tener un formato de cadena especial. El método JSON.stringify () se utiliza para convertir un objeto en una cadena JSON:

const user = { name: '', age: 30 }
const str = JSON.stringify(user)
console.log(str) // {"name":"","age":30}

JSR

MDN

111. ¿Qué hace JSON.parse ()?

Al recibir datos del servidor, tienen un formato de cadena especial. El método JSON.parse () se utiliza para convertir estos datos en un objeto JavaScript:

const str = { "name":"","age":30 }
const user = JSON.parse(str)
console.log(user) // {name: "", age: 30}

JSR

MDN

112. ¿Para qué sirve JSON?

Al intercambiar datos entre el cliente y el servidor, estos datos solo pueden ser cadenas. Dado que JSON es texto, es perfecto para esto. También puede ser utilizado como formato de datos por cualquier lenguaje de programación, junto con otros formatos como XML o Protobuf.



JSR

MDN

113. ¿Qué es PWA (aplicación web progresiva - aplicación web progresiva)?

En resumen, las PWA son sitios web que se comportan como aplicaciones nativas. Se pueden instalar en un teléfono o computadora y, por regla general, funcionan sin conexión. Para este último, se utilizan trabajadores del servicio y una interfaz de almacenamiento en caché. La ventaja de las PWA sobre las aplicaciones móviles es su tamaño y relativa facilidad de desarrollo. Además, no necesita gastar recursos en la creación de dos aplicaciones para un sitio: web y móvil. También mantiene una buena experiencia de usuario.



MDN

114. ¿Para qué se utiliza clearTimeout ()?

Este método se usa para detener un temporizador iniciado por setTimeout (). Para hacer esto, el identificador del temporizador se escribe en una variable, que luego se pasa a clearTimeout () como argumento.

const timer = setTimeout(() => {
    console.log('!')
    clearTimeout(timer)
}, 2000)

En el ejemplo anterior, dos segundos después, se muestra el mensaje “¡Hola!” En la consola, después de lo cual el temporizador se detiene. Esto se hace para que el recolector de basura pueda eliminar el temporizador que se ha ejecutado.



JSR

MDN

115. ¿Para qué se utiliza clearInterval ()?

Este método se utiliza para detener un temporizador iniciado con setInterval (). Para hacer esto, el identificador del temporizador se escribe en una variable, que luego se pasa a clearInterval () como argumento.

let i = 1
const timer = setInterval(() => {
    console.log(i)
    i++

    if (i === 3) clearInterval(timer)
}, 1000)

En el ejemplo anterior, el valor de la variable i se imprime en la consola cada segundo, que se incrementa en 1 (1, 2) cada vez. Cuando tengo 3, el temporizador se detiene.



JSR

MDN

116. ¿Cómo redirecciono?

Para hacer esto, puede usar la propiedad de ubicación del objeto de ventana:

location.href = 'newPage.html'
// 
location.replace('newPage.html')
// 
location.assign('newPage.html')

MDN

117. ¿Cómo comprobar si existe una subcadena en una cadena?

Hay al menos tres formas de hacer esto.

String.prototype.includes ()

const mainStr = 'hello'
const subStr = 'hel'
mainStr.includes(subStr) // true

String.prototype.indexOf ()

const mainStr = 'hello'
const subStr = 'hel'
mainStr.indexOf(subStr) !== -1 // true

RegExp

const mainStr = 'hello'
const regex = /hel/
regex.test(mainStr) // true

JSR

MDN - incluye

MDN - indexOf

MDN - prueba

118. ¿Cómo comprobar la exactitud de la dirección de correo electrónico?

Esto se puede hacer usando HTML estableciendo el tipo de campo de entrada en el valor email (<input type = "email">). Sin embargo, este método no se considera muy confiable. Por lo tanto, normalmente, el correo electrónico se valida con una expresión regular. Se recomienda hacer esto en el lado del servidor ya que JavaScript se puede deshabilitar en el cliente:

const validateEmail = email =>
    /\S+@\S+.\S+/
        .test(email.toString()
        .toLowerCase())
const email = 'myemail@example.com'
validateEmail(email) // true

Este ejemplo utiliza una de las expresiones regulares más simples para validar una dirección de correo electrónico. Una expresión más confiable se ve así (RFC 2822): [a-z0-9! # $% & '* + / =? ^ _ \ `{|} ~ -] + (?:. [A-z0-9! # $% & '* + / =? ^ _ \ `{|} ~ -] +) * @ (?: [a-z0-9] (?: [a-z0-9 -] * [a-z0- 9]) ?.) + [A-z0-9] (?: [A-z0-9 -] * [a-z0-9])?

119. ¿Cómo obtengo la URL actual?

Para hacer esto, puede usar la propiedad de ubicación del objeto de ventana o la propiedad de URL del objeto de documento:

console.log(' URL', location.href)
console.log(' URL', document.URL) //  Chrome     " URL chrome-search://local-ntp/local-ntp.html"

MDN - ubicación

MDN - document.URL

120. ¿Qué propiedades tiene el objeto de ubicación?

Las propiedades del objeto de ubicación se pueden utilizar para obtener partes de la URL de la página actual:

• href - URL completa
• origen: protocolo, host y puerto (origen, utilizado en la Política de origen común (SOP) y Uso compartido de recursos (CORS))
• protocolo
• host - host y puerto
• nombre de host - host
• Puerto
• nombre de ruta - ruta
• búsqueda: ¿la cadena de consulta después?
• hash - cadena de consulta después de # (ancla)
• nombre de usuario - nombre de usuario antes del dominio
• contraseña: contraseña antes del dominio

MDN

121. ¿Cómo obtener la cadena de consulta?

Puede usar el constructor de URL para esto:

const url = new URL('https://example.com?foo=1&bar=2')
console.log(url.search) // ?foo=1&bar=2
console.log(url.searchParams.get('foo')) // 1

MDN

122. ¿Cómo comprobar si existe una propiedad en un objeto?

Hay al menos tres formas de hacer esto.

En operador

const user = { name: '' }
console.log('name' in user) // true
console.log(!('age' in user)) // true

Método HasOwnProperty ()

const user = { name: '' }
console.log(user.hasOwnProperty('name')) // true
console.log(!user.hasOwnProperty('age')) // true

Comparación con indefinido

const user = { name: '' }
console.log(user.name !== undefined) // true
console.log(user.age === undefined) // true

JSR

MDN - para ... en

MDN - hasOwnProperty

123. ¿Cómo iterar sobre las propiedades enumeradas de un objeto?

Para hacer esto, puede usar un bucle for ... in junto con el método hasOwnProperty () para excluir propiedades heredadas.

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

for (key in user) {
    if (user.hasOwnProperty(key)) {
        console.log(\`${key}: ${user[key]}\`) // name:  age: 30
    }
}

JSR

MDN

124. ¿Cómo comprobar que el objeto está vacío?

Hay al menos tres formas de hacer esto.

Método Object.entries ()

const obj = {}
console.log(Object.entries(obj).length === 0) // true
//      Date
const obj2 = new Date()
console.log(Object.entries(obj2).length === 0 && obj2.constructor === Object) // false

Método Object.keys ()

const obj = {}
console.log(Object.keys(obj).length === 0) // true
//      Date
const obj2 = new Date()
console.log(Object.keys(obj2).length === 0 && obj2.constructor === Object) // false

For ... in loop y método Object.hasOwnProperty ()

const obj = {}
const obj2 = {key: 'value'}

const isEmpty = obj => {
    for (key in obj) {
        if (obj.hasOwnProperty(key)) return false
    }
    return true
}

console.log(isEmpty(obj)) // true
console.log(isEmpty(obj2)) // false

JSR - Objetos JSR

- Object.keys, valores, entradas

MDN - Object.entries

MDN - Object.keys

MDN - para ... en

MDN - Object.hasOwnProperty

125. ¿Qué es el objeto argumentos?

argumentos es un objeto similar a una matriz (pseudo-matriz) que contiene los argumentos pasados ​​a la función:

function sum () {
    let total = 0
    for (let i = 0; i < arguments.length; i++) {
        total += arguments[i]
    }
    return total

    // 
    let total = 0
    for (const i of arguments) {
        total += i
    }
    return total

    // 
    return Array.from(arguments).reduce((acc, cur) => acc + cur)

}

sum(1, 2, 3) // 6

Tenga en cuenta que las funciones de flecha no tienen argumentos. En lugar de argumentos, se recomienda utilizar el operador rest ... (otros parámetros), que funciona tanto en funciones ordinarias como en funciones de flecha:

const sum = (...rest) => rest.reduce((acc, cur) => acc + cur)

sum(1, 2, 3) // 6

JSR

MDN

126. ¿Cómo poner en mayúscula la primera letra de una cadena?

Esto se puede hacer usando los métodos charAt (), toUpperCase () y slice ():

String.prototype.capitilize = function () {
    return this.charAt(0).toUpperCase() + this.slice(1)
}

console.log('hello'.capitilize()) // Hello

JSR

MDN - charAt

MDN - toUpperCase

MDN - segmento

127. ¿Cómo obtener la fecha actual?

Esto se puede hacer usando un objeto Date o el constructor Intl.DateTimeFormat:

console.log(new Date().toLocaleDateString()) // 02.09.2020

console.log(new Intl.DateTimeFormat(
    'ru-Ru',
    {
        weekday: 'long',
        day: 'numeric',
        month: 'long',
        year: 'numeric'
    }
).format(new Date())) // , 2  2020 .

JSR - Fecha

JSR = Intl

MDN - Fecha

MDN - Intl.DateTimeFormat

128. ¿Cómo comparar dos objetos Date?

Para hacer esto, no debe comparar los objetos en sí, sino, por ejemplo, los valores devueltos por el método getTime ():

const d1 = new Date()
const d2 = new Date(d1)

console.log(d1.getTime() === d2.getTime()) // true
console.log(d1 === d2) // false

JSR

MDN

129. ¿Cómo comprobar que una línea comienza en una línea diferente?

Puede usar el método startsWith () incorporado para hacer esto:

console.log('Good morning'.startsWith('Good')) // true
console.log('Good morning'.startsWith('morning')) // false

Según CanIUse, casi el 94% de los navegadores



JSR MDN admiten este método

130. ¿Cómo eliminar problemas en una línea?

Para hacer esto, puede usar los métodos incorporados trimStart () (inicio de línea), trimEnd () (final de línea) y trim () (inicio y final de línea):

console.log('  hello world   '.trim()) // hello world

recortar no funciona para espacios entre palabras. En este caso, puede usar el método replace () y la expresión regular:

console.log('hello   world'.replace(/s+/, ' ')) // hello world
//    
console.log('hello   world'.replace(/s{2,}/, ' ')) // hello world
console.log('key   value'.replace(/s{2,}/, ' -> ')) // key -> value

Según CanIUse , trimStart () y trimEnd () son compatibles con el 93% de los navegadores.



MDN

131. ¿Cómo agregar una nueva propiedad a un objeto?

Hay dos maneras de hacer esto. Supongamos que tenemos un objeto como este:

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

Podemos agregarle una nueva propiedad usando la notación de puntos o corchetes:

obj.job = ''
obj['job'] = ''

Una de las diferencias entre estos métodos es que cuando se usa la notación entre paréntesis, la clave agregada puede ser un número:

const obj = {}
obj[1] = ''
console.log(obj) // { 1: '' }
obj.2 = '' // SyntaxError: Unexpected number

JSR

MDN

132. ¿Es la expresión! - un operador especial?

No, no es. Es una combinación de dos operadores: ¡operador! (no lógico) y operador - (decremento). Si usa la expresión especificada con cualquier valor, primero este valor se reducirá en uno, luego se convertirá a un tipo booleano y se invertirá:

const fun = val => !--val
const a = 1
const b = 2
console.log(fun(a)) // !0 -> not false -> true
console.log(fun(b)) // !1 -> not true -> false

JSR

MDN - Lógico NOT

MDN - Decremento

133. ¿Cómo asignar un valor predeterminado a una variable?

Para hacer esto, puede usar el || (booleano o):

const a = b || 'default'

En este caso, a la variable a se le asignará el valor predeterminado si el valor de la variable b es falso (falso, indefinido, nulo, NaN, 0, '').

Si estamos hablando de los valores estándar de los parámetros de función, entonces se pueden asignar de la siguiente manera:

const greet = (name = '') => \`, ${name}!\`
console.log(greet('')) // , !
console.log(greet()) // , !

Además, los parámetros posteriores pueden utilizar los valores de los anteriores como valores estándar:

const sum = (a = 1, b = a + 2) => a + b
console.log(sum()) // 4

JSR

MDN

134. ¿Cómo crear una cadena de varias líneas?

Anteriormente, se hacía algo como esto (caracteres de control de concatenación y salto de línea):

const str =
    ' ' + ' ' +
    ' ' + ' ' +
    '!'

// 
const str = '  a
  
 !'
console.log(str)
/*
     
     
    !
*/

Ahora lo hacen así (plantilla literal):

const str =
    \` 
     
    !\`

JSR

MDN

135. ¿Podemos agregar propiedades a las funciones?

Dado que las funciones también son objetos, podemos agregarles propiedades fácilmente. El valor de la propiedad de la función puede ser otra función:

function someFun () {}
someFun.somePropName = 'somePropValue'

console.log(someFun.somePropName) // somePropValue
//  
console.log(someFun.name) // someFun

const sum = (x, y) => x + y
console.log(sum(1, 2)) // 3

sum.curry = x => y => x + y
console.log(sum.curry(1)(2)) // 3

JSR

MDN

136. ¿Cómo saber cuántos argumentos espera recibir una función?

La propiedad length se puede utilizar para esto:

const sum = (a, b, c) => +a + +b + +c
console.log(sum(1, '1', true)) // 3
console.log(sum(0, '', [])) // 0

console.log(sum.length) // 3

MDN

137. ¿Qué es un polyfill?

Los Polyfills se utilizan para hacer que JavaScript moderno funcione en navegadores más antiguos. Esto se hace implementando nuevas características del lenguaje usando la sintaxis anterior. El proceso mismo de convertir código nuevo en código antiguo se llama transpilación. El transpilador más popular para código JavaScript es Babel.

Por ejemplo, una de las últimas funciones de JavaScript es el método Promise.allSettled (), que, a diferencia de Promise.all (), no finaliza cuando se rechaza alguna de las promesas que se le pasan.

Sin embargo, a partir de hoy, el soporte de su navegador según los datos de CanIUse es del 80%, por lo que se necesita un polyfill:

const promise1 = Promise.resolve('promise1')
const promise2 = Promise.reject('promise2')
const promise3 = Promise.resolve('promise3')

//     Promise.allSettled()
Promise
    .allSettled([promise1, promise2, promise3])
    .then(console.log)
/*
    [
        {status: "fulfilled", value: "promise1"},
        {status: "rejected", reason: "promise2"},
        {status: "fulfilled", value: "promise3"},
    ]
*/

//    
//  Promise.all() = 94%
const allSettled = promises => {
    const wrappedPromises = promises
        .map(p => Promise.resolve(p)
        .then(
            val => ({
                status: 'fulfilled',
                value: val
            }),
            err => ({
                status: 'rejected',
                reason: err
            })))
    return Promise.all(wrappedPromises)
}
allSettled([promise1,promise2,promise3])
    .then(console.log)

JSR

MDN

138. ¿Para qué se utilizan las declaraciones continue y break?

La sentencia break se usa para salir del ciclo. Después de detener la iteración, el código continúa:

const obj = {
    1: 'Everything',
    2: 'is',
    3: 'impossible'
}

for (key in obj) {
    if (obj[key] === 'impossible') break

    console.log(obj[key]) // Everything is
}

console.log('possible') // possible

La instrucción continue se usa para omitir la iteración:

const obj = {
    1: 'Everything',
    2: 'is',
    3: 'impossible',
    4: 'possible'
}

for (key in obj) {
    if (obj[key] === 'impossible') continue

    console.log(obj[key]) // Everything is possible
}

MDN - romper

MDN - continuar

139. ¿Qué es una etiqueta?

Las etiquetas le permiten nombrar bucles y bloques de código. Se pueden utilizar, por ejemplo, para salir de un bucle o como condición para ejecutar código:

loop1:
for (let i = 0; i < 3; i++) {
    loop2:
    for (let j = 0; j < 3; j++) {
        if (i === j) continue loop1

        console.log(\`i = ${i}, j = ${j}\`)
    }
}

/*
    i = 1, j = 0
    i = 2, j = 0
    i = 2, j = 1
*/

El uso de etiquetas se considera una mala práctica.



MDN

140. ¿Cuáles son las ventajas de declarar variables al principio del código?

Se recomienda declarar variables al comienzo de cada script o función. Esto proporciona los siguientes beneficios:

• Mantiene el código limpio
• Todas las variables están en un solo lugar
• Evita la creación accidental de variables globales
• Evita anulaciones de variables no deseadas

JSR

MDN

141. ¿Cuáles son las ventajas de inicializar una variable cuando se declara?

Se recomienda inicializar todas las variables en el momento de la declaración. Esto proporciona los siguientes beneficios:

• Mantiene el código limpio
• Las variables y sus valores están en un solo lugar
• Evita que las variables no inicializadas se asignen sin definir

JSR

MDN

142. ¿Cuáles son las principales recomendaciones para crear un objeto?

Para crear un objeto, en lugar del constructor de objetos new Object (), se recomienda utilizar la notación entre paréntesis {}. Además, según el tipo de valor, se recomienda utilizar lo siguiente:

• cadena como '' en lugar de nueva Cadena ()
• un número, por ejemplo 0 en lugar de un nuevo Número ()
• valor booleano como falso en lugar de nuevo booleano ()
• [] en lugar de new Array ()
• // en lugar de new RegExp ()
• function () {} en lugar de new Function ()

JSR

MDN

143. ¿Cómo definir una matriz en formato JSON?

La matriz JSON es una matriz de objetos JSON, por ejemplo:

[
    { "name": "", "age": 30 },
    { "name": "", "age": 20 }
]

JSR

MDN

144. ¿Cómo implementar una función que devuelva un entero aleatorio en un rango dado?

Esta función se puede implementar usando los métodos Math.random () y Math.floor () del objeto Math:

const getRandomInteger = (min, max) => Math.floor(min + Math.random() * (max + 1 - min))

JSR

MDN - Math.random ()

MDN - Math.floor ()

145. ¿Qué es la sacudida de un árbol?

La sacudida de árboles es la eliminación del código de los módulos no utilizados. Dichos módulos no están incluidos en el ensamblaje final (paquete). Para que el constructor de módulos (agrupador) pueda determinar qué módulos están en uso y cuáles no, la estructura del programa debe basarse en los módulos ES6. Esta técnica fue popularizada por el paquete Rollup.



MDN

146. ¿Para qué se usa la sacudida de árboles?

La sacudida de árboles puede reducir significativamente el tamaño de un ensamblaje (paquete) al eliminar el código de los módulos no utilizados. Cuanto menor sea el tamaño del ensamblaje, mejor será el rendimiento de la aplicación. La agitación de árboles se implementa en constructores de módulos como Rollup y Webpack.



MDN

147. ¿Qué es una expresión regular?

Una expresión regular es una secuencia de caracteres que forman un patrón de búsqueda. Este patrón se puede utilizar para buscar datos en el texto, como subcadenas en una cadena. Las expresiones regulares son ampliamente utilizadas por muchos lenguajes de programación para operaciones de búsqueda y reemplazo de texto. El patrón de expresiones regulares general se ve así:

//

Ejemplo:

const regex = /java/i
const str = 'JavaScript'
console.log(regex.test(str)) // true

También puede utilizar el constructor RegExp para crear una expresión regular:

const regex = new RegExp('java', 'i')
const str = 'JavaScript'
console.log(regex.test(str)) // true

JSR

MDN

148. ¿Qué métodos se utilizan en las expresiones regulares?

Hay dos métodos principales usados ​​en expresiones regulares: exec () y test ().

El método exec () busca una coincidencia de expresión regular en la cadena que se le pasa como argumento. El comportamiento de este método depende de si la expresión regular tiene la bandera g. De lo contrario, se devuelve la primera coincidencia. Si la bandera g está presente, entonces:

• La llamada a exec () devuelve la primera coincidencia y almacena la posición posterior en la propiedad lastIndex.
• La siguiente llamada de este tipo inicia la búsqueda en la posición lastIndex, devuelve la siguiente coincidencia y recuerda la posición posterior en lastIndex.
• Si no hay más coincidencias, exec () devuelve nulo y lastIndex se establece en 0.

const str = 'Java  JavaScript -   '
const regex = /Java/g

let result
while (result = regex.exec(str)) {
    console.log(
        \` ${result[0]}   ${result.index}\`
    )
}
/*
     Java   0
     Java   7
*/

El método test () devuelve un valor booleano dependiendo de si se encuentra una coincidencia en la cadena:

const str = '  JavaScript'

console.log(
    / /.test(str) // true
)

JSR

MDN

149. ¿Qué banderas se utilizan en las expresiones regulares?

const regex = /([-]+)s([-]+)/i
const str = ' '
const newStr = str.replace(regex, '$2 $1')
console.log(newStr) //  

JSR

MDN

150. ¿Qué caracteres especiales se utilizan en las expresiones regulares?

Los caracteres especiales utilizados en las expresiones regulares se pueden dividir en varios grupos.

Clases de personajes básicos:



Conjuntos de caracteres:



Fronteras:



Agrupamiento:



Cuantificadores:



JSR

MDN

151. ¿Cómo cambio los estilos de un elemento HTML?

Esto se puede hacer usando la propiedad de estilo o asignando una clase apropiada al elemento:

document
    .querySelector(selector)
    .style.property = value
document
    .querySelector('title')
    .fontSize = '2rem'

document.querySelector(selector)
    .className = 'class-name'
document.querySelector(selector)
    .classList.add('class-name')
document.querySelector('button')
    .classList.add('active')

JSR

MDN - estilo

MDN - className

MDN - classList

152. ¿Qué es un depurador?

La expresión del depurador proporciona acceso a cualquier funcionalidad de depuración disponible en un entorno particular, por ejemplo, establecer puntos de interrupción (puntos de interrupción, puntos de interrupción). Si la funcionalidad de depuración no está disponible en tiempo de ejecución, esta expresión no tendrá ningún efecto:

const fun = () => {
    // 
    debugger //       
    // 
}

JSR

MDN

153. ¿Para qué se utilizan los puntos de interrupción del depurador?

Los puntos de control se utilizan para pausar la ejecución de una función u otro código en un lugar específico con el fin de averiguar por qué un programa no funciona correctamente. Una vez detenida, la función puede continuar.



JSR

MDN

154. ¿Se pueden utilizar palabras reservadas como identificadores?

No, no puede usar palabras reservadas como nombres para variables, etiquetas, funciones u objetos:

const class = '    ' // SyntaxError: Unexpected token 'class'

155. ¿Cómo determinar el ancho y alto de la imagen?

Esto se puede hacer de varias formas. Aqui esta uno de ellos:

const getImgSize = src => {
    const img = new Image()
    img.src = src
    img.addEventListener('load', () => console.log(\`${img.width} x ${img.height}\`)) // 276 x 110
    document.body.append(img)
}
getImgSize('http://www.google.com/ intl/en_ALL/images/logo.gif')

MDN

156. ¿Cómo enviar una solicitud HTTP sincrónica?

Para hacer esto, puede usar el objeto XMLHttpRequest pasándolo al método open () con un tercer argumento opcional con el valor falso:

const getUsers = url => {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', url, false)
    xhr.send()
    console.table(xhr.response)

    const response = JSON.parse(xhr.response)
    const template = \`
        <table>
            ${response.reduce((html, user) => html += \`
                <tr>
                    <td>${user.name}</td>
                    <td>${user.username}</td>
                    <td>${user.email}</td>
                </tr>\`, '')}
        <table>
    \`
    document.body
        .insertAdjacentHTML('beforeend', template)
}

getUsers('https://jsonplaceholder. typicode.com/users')

JSR

MDN

157. ¿Cómo realizar una solicitud HTTP asincrónica?

El método fetch () se puede utilizar para esto:

const getUsers = async url => {
    const response = await fetch(url)
    const data = await response.json()
    console.table(data)

    const template = \`
        <table>
            ${data.reduce((html, user) => html += \`
                <tr>
                    <td>${user.name}</td>
                    <td>${user.username}</td>
                    <td>${user.email}</td>
                </tr>\`, '')}
        <table>
    \`
    document.body.insertAdjacentHTML('beforeend', template)
}

getUsers('https://jsonplaceholder. typicode.com/users')

JSR

MDN

158. ¿Cómo obtener la fecha en el formato requerido?

El método toLocaleString () se puede utilizar para esto:

console.log(
    new Date().toLocaleString('ru-Ru', {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    })
) // , 6  2020 .

MDN

159. ¿Cómo obtener los tamaños máximos de página?

Para hacer esto, necesita encontrar los valores máximos de las propiedades scrollWidth, offsetWidth, clientWidth y scrollHeight, offsetHeight, clientHeight de los objetos document.body y document.documentElement:

const pageWidth = Math.max(
    document.body.scrollWidth, document.documentElement.scrollWidth,
    document.body.offsetWidth, document.documentElement.offsetWidth,
    document.body.clientWidth, document.documentElement.clientWidth
)
const pageHeight = Math.max(
    document.body.scrollHeight, document.documentElement.scrollHeight,
    document.body.offsetHeight, document.documentElement.offsetHeight,
    document.body.clientHeight, document.documentElement.clientHeight
)
const pageSize = {
    width: pageWidth,
    heigth: pageHeight
}
console.log(pageSize)

const pageCenter = {
    centerX: pageWidth / 2,
    centerY: pageHeight / 2
}
console.log(pageCenter)

JSR

160. ¿Qué es un operador condicional o ternario?

El operador ternario es una forma abreviada de escribir el bloque if ... else:

let accesAllowed
const age = propmt('  ?')

// if...else
if (age > 18) {
    accesAllowed = true
} else {
    accessAllowed = false
}

//  
(age > 18)
    ? accesAllowed = true
    : accessAllowed = false

JSR

MDN

161. ¿Puedes usar una cadena de operadores ternarios?

Sí, en este caso el operador ternario es una alternativa al bloque if ... else if ... else:

let accessAllowed
const getAge = () => prompt('  ?')

//     -    
// if...else if...else
const checkAge = (age = getAge()) => {
    console.log(age)
    if (isNaN(age)) {
        Promise.resolve(alert('   ')).then(accessAllowed = false).then(checkAge)
    } else if (age === null || age === '') {
        Promise.resolve(alert('  ')).then(accessAllowed = false).then(checkAge)
    } else if (age < 0) {
        Promise.resolve(alert('     0')).then(accessAllowed = false).then(checkAge)
    } else if (age > 100) {
        Promise.resolve(alert('     100')).then(accessAllowed = false).then(checkAge)
    } else if (age < 18) {
        Promise.resolve(alert(',   ')).then(accessAllowed = false)
    } else {
        Promise.resolve(alert(' !')).then(accessAllowed = true)
    }
    console.log(accessAllowed)
}

//  
const checkAge = (age = getAge()) => {
    isNaN(age)
        ? Promise.resolve(alert('   ')).then(accessAllowed = false).then(checkAge)
        : (age === null || age === '')
          ? Promise.resolve(alert('  ')).then(accessAllowed = false).then(checkAge)
          : (age < 0)
            ? Promise.resolve(alert('     0')).then(accessAllowed = false).then(checkAge)
            : (age > 100)
            ? Promise.resolve(alert('     100')).then(accessAllowed = false).then(checkAge)
            : (age < 18)
                ? Promise.resolve(alert(',   ')).then(accessAllowed = false)
                : Promise.resolve(alert(' !')).then(accessAllowed = true)
    console.log(accessAllowed)
}

JSR

MDN

162. ¿Cómo empezar a ejecutar el código después de que la página esté completamente cargada?

Esto se puede hacer de varias maneras.

Coloque la etiqueta de secuencia de comandos antes de la etiqueta de cuerpo de cierre o agréguele un atributo diferido:

<body>
    ...
    <script src="script.js"></script>
</body>

<!--  -->
<head>
    ...
    <script src="script.js" defer></script>
</head>

Si su secuencia de comandos es un módulo, en lugar del atributo deferir, debe especificar el atributo de tipo con el módulo de valor:

<script src="script.js" type="module"></script>

Agregue un atributo onload a la etiqueta del cuerpo:

<body onload="script()"></body>

Agregue código como controlador para el evento de carga del objeto de ventana:

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

// 
window.addEventListener('load', () => console.log('  '))

Haga lo mismo con document.body:

document.body.onload = () => console.log('  ')

163. ¿Cuál es la diferencia entre __proto__ y prototype?

La propiedad __proto__ ([[Prototype]] propiedad interna oculta) es un objeto del cual una instancia hereda campos y métodos. Y el prototipo es un objeto que se usa para crear __proto__ cuando se crea una instancia usando la nueva palabra clave:

class Person {
    constructor(firstName, secondName) {
        this.firstName = firstName
        this.secondName = secondName
    }
    getFullName() {
        return \`${this.firstName} ${this.secondName}\`
    }

}

const user = new Person('', '')
console.log(user.getFullName()) //  
console.log(user.__proto__.getFullName === Person.prototype.getFullName) // true
console.log(Person.prototype) // {constructor: ƒ, getFullName: ƒ}
console.log(user.prototype === undefined) // true

JSR

MDN

164. Dé un ejemplo del uso obligatorio del punto y coma.

Uno de los usos obligatorios del punto y coma es el uso de IIFE (Expresión de función inmediatamente invocada):

por ejemplo, el siguiente código:

try {
    const x = ''

    (() => {
        console.log(x)
    })()
} catch {
    console.log(' ')
}

Se interpretará así:

try {
    const x = ''(() => {
        console.log(x)
    })()
} catch {
    console.log(' ')
}

Por lo tanto, en el bloque try, obtenemos un TypeError: "To be" no es una función, el control se pasa al bloque catch y "Not to be" se envía a la consola.

Para que el código funcione como se esperaba, debería verse así:

try {
    //       
    const x = '';
    //  
    ;(() => {
        console.log(x)
    })()
} catch {
    console.log(' ')
}

Además, no se olvide de los casos de colocación automática de punto y coma.

165. ¿Para qué se utiliza el método freeze ()?

Este método, como su nombre indica, sirve para "congelar" un objeto. Un objeto congelado es inmutable (inmutable). Esto significa que no puede agregar nuevas propiedades a tal objeto, eliminar o modificar las existentes. Además, este método establece configurable: false y writable: false para las propiedades existentes. El método devuelve un objeto congelado.

'use strict'
const obj = {
    mission: 'possible'
}

Object.freeze(obj)
obj.mission = 'impossible' // TypeError: Cannot assign to read only property 'mission' of object '#<Object>'

delete obj.mission // TypeError: Cannot delete property 'mission' of #<Object>

Tenga en cuenta que en el modo no estricto, no se lanza ninguna excepción, el código simplemente no se ejecuta.



JSR

MDN

166. ¿Por qué necesitamos el método freeze ()?

El paradigma de la programación orientada a objetos dice que una interfaz que contiene un cierto número de elementos debe ser inmutable, es decir, debe ser imposible ampliar, modificar o utilizar elementos fuera del contexto actual. Este método es un alias para la palabra clave final en algunos otros lenguajes de programación.



JSR

MDN

167. ¿Cómo poner en mayúscula la primera letra de cada palabra en una línea?

Una forma de hacerlo es la siguiente:

const capitilize = str => str.replace(
    /[-]S+/gi,
    txt => txt[0].toUpperCase() + txt.slice(1).toLowerCase()
)

console.log(capitilize(', , ')) // , , 

168. ¿Cómo sé si JavaScript está desactivado en una página?

Puede usar la etiqueta noscript para esto. El código dentro de esta etiqueta solo se ejecutará si JavaScript está deshabilitado en la página:

    console.log('JavaScript ')

<noscript>
    <p> JavaScript,    </p>
</noscript>

Para desactivar JavaScript en Chrome, vaya a configuración -> sección "Privacidad y seguridad" -> Configuración del sitio -> sección "Contenido" -> JavaScript.



MDN

169. ¿Qué operadores son compatibles con JavaScript?

Los operadores se utilizan para trabajar con valores u operandos. JavaScript admite los siguientes operadores:

• Aritmética: + (suma, conversión a un número, concatenación), - (resta), * (multiplicación), / (división),% (módulo, con resto), ++ (incremento), - (decremento), * * (exponenciación)
• operadores de comparación: == (abstracto, igualdad flexible) ,! = (desigualdad abstracta), === (igualdad estricta, verificación de identidad) ,! == (desigualdad estricta),>,> =, <, <=
• lógico: && (y), || (o),! (no) (!!! (doble negación) no es un operador separado)
• operadores de asignación: =, + =, - =, * =, / =,% =
• ternario :? ...: (si ... si no)
• operador typeof: define el tipo de operando
• bit a bit: & (y), | (o), ^ (exclusivo o), ~ (no), << (desplazamiento a la izquierda), >> (desplazamiento a la derecha), >>> (desplazamiento a la derecha con relleno de cero)
• nuevo :? .. ​​(cadena opcional), ?? (fusión nula)

//  
const obj = {
    foo: {
        baz: {
            qux: 'bar'
        }
    }
}

// 
console.log(obj.foo.bar.baz.qux) // TypeError: Cannot read property 'baz' of undefined

if (
    obj.foo !== undefined &&
    obj.foo.bar !== undefined &&
    obj.foo.bar.baz !== undefined
) {
    console.log(obj.foo.bar.baz.qux) //   
}

// 
console.log(obj?.foo?.bar?.baz?.qux) // undefined

//   null
console.log(
    0 || 'default null', // 'default null'
    0 ?? 'default null', // 0
    '' || 'default string', // default string
    '' ?? 'default string', // ''
)

JSR - Operadores JSR - Operadores

lógicos

JSR - Operadores de comparación JSR - Operadores

JSR condicionales -

Operadores

MDN Bitwise - Operador de secuencia opcional

MDN - Operador de fusión nula

170. ¿Para qué se usa el operador rest ... (otros parámetros)?

El operador rest es una alternativa al objeto de argumentos y devuelve una matriz de los argumentos pasados ​​a la función:

const sum = (...rest) => rest.reduce((acc, cur) => acc + cur)

console.log(sum(1, 2, 3)) // 6

Tenga en cuenta que el operador rest debe pasarse como último argumento:

const fun = (x, ...rest, y) => console.log(rest) // SyntaxError: Rest parameter must be last formal parameter

JSR

MDN

171. ¿Para qué se utiliza el operador de propagación?

El operador de propagación se utiliza para expandir (descomprimir, expandir) entidades iterables (matrices, cadenas). Desembalar significa convertir, por ejemplo, una matriz de números en un conjunto de valores simples:

const sum = (x, y, z) => x + y + z

const nums = [1, 2, 3]

console.log(sum(...nums)) // 6

JSR

MDN

172. ¿Cómo determinar si un objeto está congelado?

Para determinar si un objeto está congelado, es decir, ¿Es inmutable (inmutable) se usa el método isFrozen ():

const obj = {
    prop: '    JavaScript!'
}

Object.freeze(obj)

console.log(Object.isFrozen(obj)) // true

MDN

173. ¿Cómo determinar la igualdad de valores usando un objeto?

El método is () se puede utilizar para esto:

Object.is('  ', '  ') // true
Object.is(0.1 + 0.2, 0.3) // false
Object.is(window, window) // true
Object.is(+0, -0) // false

const objA = {}
const objB = objA
Object.is(objA, objB) // true
Object.is({}, {}) // false

Los valores son iguales si:

• ambos son indefinidos
• ambos son nulos
• ambos son verdaderos o falsos
• ambas son cadenas de la misma longitud con los mismos caracteres
• ambos se refieren al mismo objeto
• ambos son números, +0, -0 o NaN

JSR

MDN

174. ¿Cómo crear una copia de un objeto?

Una de las formas más confiables de hacer esto es usando el método assign ():

const objA = {a: 1, b: 2}
const objB = Object.assign(objA)

console.log(objB) // {a: 1, b: 2}

console.log(objA === objB) // true

Además, este método le permite combinar objetos, excluyendo duplicados:

const objA = {a: 1, b: 2}
const objB = {b: 2, c: 3}

const objC = Object.assign(objA, objB)
console.log(objC) {a: 1, b: 2, c: 3}

Puede usar el enlace JSON.parse-JSON.stringify para copiar objetos simples:

const objA = {a: 1, b: 2}

const objB = JSON.parse(JSON.stringify(objA))

console.log(objB) // {a: 1, b: 2}

JSR

MDN

175. ¿Qué es un proxy?

El objeto Proxy "envuelve" otro objeto y puede interceptar (y, si se desea, procesar de forma independiente) varias acciones con él, por ejemplo, propiedades de lectura / escritura y otras.

const handler = {
    get: (obj, prop) => prop in obj
        ? obj[prop]
        : 0
}

// new Proxy(, )
const p = new Proxy({}, handler)

p.a = 1
p.b = true

console.log(p.a, p.b) // 1 true
console.log( 'c' in p, p.c) // false 0

176. ¿Para qué se utiliza el método seal ()?

Este método "sella" el objeto, evitando agregar / quitar propiedades. También establece configurable: false para todas las propiedades existentes. Sin embargo, los valores de las propiedades de dicho objeto se pueden cambiar. El método isSealed () se usa para verificar si un objeto está sellado.

'use strict'
const obj = {
    prop: '    JavaScript!'
}

Object.seal(obj)

obj.prop = ' ,   '
console.log(Object.isSealed(obj)) // true
delete obj.prop // TypeError: Cannot delete property 'prop' of #<Object>
console.log(obj.prop) //  ,   

Tenga en cuenta que en el modo laxo, un intento de eliminar una propiedad en un objeto sellado fallará silenciosamente.



JSR

MDN

177. ¿Cuál es la diferencia entre los métodos freeze () y seal ()?

El método Object.seal (), a diferencia del método Object.freeze (), le permite modificar las propiedades existentes de un objeto.

'use strict'
const objA = {
    prop: ''
}
Object.freeze(objA)
objA.prop = ' ' // TypeError: Cannot assign to read only property 'prop' of object '#<Object>'

const objB = {
    prop: ' '
}
Object.seal(objB)
objB.prop = ''
console.log(objB.prop) // 

178. ¿Cómo obtener pares clave / valor enumerados de un objeto?

El método Object.entries () devuelve una matriz de pares clave / valor de objeto enumerados como submatrices en el mismo orden que el bucle for ... in:

const obj = {
    x: 1,
    y: 2
}

console.log(Object.entries(obj)) // [["x", 1], ["y", 2]]

for (let [key, value] of Object.entries(obj)) {
    console.log(\`${key}: ${value}\`) // x: 1 y: 2
}

JSR

MDN

179. ¿Cuál es la principal diferencia entre los métodos Object.keys (), Object.values ​​() y Object.entries ()?

El método Object.keys () devuelve las claves de un objeto, el método Object.values ​​() devuelve los valores de sus propiedades y Object.entries () devuelve una matriz de pares clave / valor:

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

console.log(Object.keys(user)) // ["name", "age"]
console.log(Object.values(user)) // ["", 30]
console.log(Object.entries(user)) // [["name", ""], ["age", 30]]

JSR

MDN - Object.keys ()

MDN - Object.values ​​()

MDN - Object.entries ()

180. ¿Cómo crear un objeto con un prototipo específico sin usar una función constructora y clases?

El método Object.create () se puede utilizar para esto:

const firstUser = {
    name: '',
    sayHi() {
        console.log(\`,   ${this.name}!\`)
    }
}

const secondUser = Object.create(firstUser)

secondUser.name = ''
secondUser.sayHi() // ,   !

JSR

MDN

181. ¿Para qué se utiliza WeakSet?

WeakSet se utiliza para almacenar una colección de objetos referenciados débiles. En otras palabras, sirve como almacenamiento adicional para objetos usados ​​por otro código. Dichos objetos son eliminados automáticamente por el recolector de basura cuando se vuelven inalcanzables (no utilizados), es decir cuando solo queda la clave en el WeakSet.

const ws = new WeakSet()
let user = {}

ws.add(user)
console.log(ws.has(user)) // true

user = null
console.log(ws.has(user)) // false,    

JSR

MDN

182. ¿Cuál es la diferencia entre Set y WeakSet?

Su principal diferencia es que los objetos almacenados en WeakSet tienen una referencia débil, es decir, se eliminan automáticamente en cuanto se vuelven inaccesibles. Otras diferencias son las siguientes:

• Set puede almacenar cualquier valor y WeakSet solo puede almacenar objetos.
• WeakSet no tiene propiedad de tamaño
• WeakSet no tiene métodos clear (), keys (), values ​​(), forEach ()
• WeakSet no es una entidad iterable

JSR

MDN

183. ¿Qué métodos están disponibles en WeakSet?

WeakSet tiene los siguientes métodos:

• add (): agrega un objeto a la colección
• delete (): elimina un objeto de una colección
• has (): determina si un objeto está en la colección
• length (): devuelve la longitud de la colección

const ws = new WeakSet()
const objA = {}
const objB = {}

ws.add(objA)
ws.add(objB)
console.log(ws.has(objA)) // true
console.log(ws.lenghth()) // 2
ws.delete(objA)
console.log(ws.has(objA)) // false

JSR

MDN

184. ¿Para qué se utiliza WeakMap?

WeakMap se usa para almacenar pares clave / valor donde las claves tienen una referencia débil. En otras palabras, sirve como un repositorio adicional para las claves utilizadas por otro código. El recolector de basura elimina automáticamente dichas claves cuando se vuelven inalcanzables (no utilizadas), es decir, cuando solo queda la clave en el WeakMap.

const wm = new WeakMap()
let user = {}
wm.set(user, 'user')
console.log(wm.has(user)) // true
user = null
console.log(wm.has(user)) // false,    

JSR

MDN

185. ¿Cuál es la diferencia entre Map y WeakMap?

Su principal diferencia es que las claves almacenadas en WeakMap tienen una referencia débil, es decir, se eliminan automáticamente en cuanto se vuelven inaccesibles. Otras diferencias son las siguientes:

• Map puede usar cualquier valor como claves, mientras que WeakMap solo puede usar objetos
• WeakMap no tiene propiedad de tamaño
• WeakMap no tiene métodos clear (), claves (), valores (), entradas (), forEach ()
• WeakMap no es una entidad iterable

JSR

MDN

186. ¿Qué métodos están disponibles en WeakMap?

WeakMap tiene los siguientes métodos:

• set (): agrega un par clave / valor a un objeto
• delete (): elimina un valor por clave
• has (): determina si un valor está presente por clave
• get (): devuelve el valor por clave

const wm = new WeakMap()
const firstUser = {}
const secondUser = {}

wm.set(firstUser, '')
wm.set(secondUser, '')
console.log(wm.has(firstUser)) // true
console.log(wm.get(firstUser)) // 
wm.delete(secondUser)
console.log(wm.has(secondUser)) // false

JSR

MDN

187. ¿Cómo codificar una URL?

Puede usar el método encodeURI () para esto. Este método convierte todos los caracteres especiales excepto /?: @ = + $ #

const url = 'https://ru.wikipedia.org/wiki/,__'
const encoded = encodeURI(url)
console.log(encoded) // https://ru.wikipedia.org/wiki/%D0%9B%D0...

JSR

MDN

188. ¿Cómo decodificar una URL?

Puede usar el método decodeURI () para esto:

const url = 'https://ru.wikipedia.org/wiki/%D0%9B%D0...'
const decoded = decodeURI(url)
console.log(decoded) // https://ru.wikipedia.org/wiki/,__

JSR

MDN

189. ¿Cómo imprimir el contenido de la página?

Puede usar el método global print () para esto. Este método abre un cuadro de diálogo especial con la configuración de impresión:

<button></button>

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

MDN

190. ¿Qué es la función anónima?

Una función anónima es una función sin nombre. Estas funciones a menudo se asignan a variables y también se utilizan como devoluciones de llamada:

const sayHi = function () {
    console.log('')
}
sayHi() // 
// 
const sayBye = () => console.log('')
sayBye() // 

window.addEventListener('click', function () {
    console.log('  ,   ')
})
// 
window.addEventListener('contextmenu', e => {
    e.preventDefault()
    console.log('  -   ')
})

JSR

MDN

191. ¿Cuál es la prioridad de utilizar variables locales y globales?

Las variables locales tienen prioridad sobre las globales del mismo nombre:

let question = ' '

function toBe () {
    question = ''
    console.log(question)
}
toBe() // 

JSR

MDN

192. ¿Qué son los accesores?

Los descriptores de acceso o propiedades calculadas son captadores y definidores. Los captadores se utilizan para obtener los valores de las propiedades de un objeto y los definidores se utilizan para establecerlos:

class User {
    constructor (name, age) {
        this.name = name
        this.age = age
    }

    #access = false

    get access () {
        return this.#access
    }

    set access (bool) {
        this.#access = bool
    }
}

const user = new User('', 30)
console.log(user.#access) // SyntaxError: Private field '#access' must be declared in an enclosing class

console.log(user.access) // false
user.access = true
console.log(user.access) // true

Los getters y setters son propiedades y los métodos son funciones:

class User {
    constructor (name, age) {
        this.name = name
        this.age = age
    }

    #access = false

    getAccess () {
        return this.#access
    }

    setAccess(bool) {
        this.#access = bool
    }
}

const user = new User('', 30)
console.log(user.#access) // SyntaxError: Private field '#access' must be declared in an enclosing class

console.log(user.getAccess()) // false
user.setAccess(true)
console.log(user.getAccess()) // true

JSR

193. ¿Cómo definir una propiedad en un constructor de objetos?

El método Object.defineProperty () se puede utilizar para esto. Este método le permite agregar nuevas propiedades al objeto y modificar las existentes, así como cambiar la configuración para acceder al objeto:

'use strict'
const obj = {}

Object.defineProperty(obj, 'prop', {
    value: 1,
    writable: false
})

console.log(obj.prop) // 1
obj.prop = 2 // TypeError: Cannot assign to read only property 'prop' of object '#<Object>'

En modo laxo, un intento de cambiar una propiedad de solo lectura fallará silenciosamente.



JSR

MDN

194. ¿Cuáles son las características de los getters y setters?

Las principales características de los getters y setters son las siguientes:

• Tienen una sintaxis más simple en comparación con los métodos.
• Se utiliza para definir propiedades calculadas: descriptores de acceso
• Permite la misma relación entre propiedades y métodos.
• Puede proporcionar una mejor calidad de datos
• Le permite realizar tareas detrás de escena cuando se trata de encapsulación

JSR

195. ¿Se pueden agregar captadores y definidores a un objeto usando el método Object.defineProperty ()?

Bastante:

const obj = {counter: 0}

Object.defineProperty(obj, 'increment', {
    get() {return ++this.counter}
})
Object.defineProperty(obj, 'decrement', {
    get() {return --this.counter}
})

Object.defineProperty(obj, 'sum', {
    set(val) {return this.counter += val}
})
Object.defineProperty(obj, 'sub', {
    set(val) {return this.counter -= val}
})

obj.sum = 10
obj.sub = 5
console.log(obj) // {counter: 5}
console.log(obj.increment) // 6
console.log(obj.decrement) // 5

JSR

MDN

196. ¿Para qué se usa la caja del interruptor ...?

switch ... case es una alternativa a if ... else y es una forma más visual de ejecutar código dependiendo de la condición pasada:

const calc = (x, y, operator) => {
    let result

    try {
        switch (operator) {
            case '+':
                result = x + y
                break
            case '-':
                result = x - y
                break
            case '*':
                result = x * y
                break
            case '/':
                result = x / y
                break
            default:
                throw new Error(' ')
        }

        if (isNaN(result)) {
            throw new Error('   ')
        }

        console.log(result)
        return result
    } catch (e) {
        console.error(e.message)
    }
}

calc(1, 2, '+') // 3
calc(3, 4, '*') // 12
calc('a', 1, '-') //    
calc(5, 6, 'x') //  

JSR

MDN

197. Nombra las reglas para usar switch ... case

Cuando utilice la construcción de la caja del interruptor, debe cumplir con las siguientes reglas:

• la condición puede ser un número o una cadena
• no se permiten valores duplicados
• la declaración predeterminada es opcional. Si no se encuentra ningún caso, se ejecuta el bloque predeterminado
• romper se usa para detener el bucle
• break también es opcional, pero sin él, la ejecución del bucle continuará

JSR

MDN

198. Nombra los tipos de datos primitivos.

Los tipos de datos primitivos ("primitivos") en JavaScript son los siguientes valores:

• number : , ±2⁵³
• bigint
• string . ,
• boolean true/false
• null – , null
• undefined – , undefined
• symbol

MDN

Habr — JavaScript?

Habr — JavaScript ?

JavaScript ?

Medium — Advanced JavaScript ES6 — Temporal Dead Zone, Default Parameters And Let vs Var — Deep dive!

JavaScript:

̆ JavaScript

Medium — JavaScript.

Habr — JavaScript

Medium — Understanding Prototypes in JavaScript

Medium — apply(), call() bind(), JavaScript

JavaScript:

Medium — JavaScript Classes: An In-Depth look (Part 1)

Medium — JavaScript slice(), splice() split()

JavaScript

JavaScript- .map(), .filter() .reduce()

reduce() JavaScript

̆ ̆ ECMAScript 2019, for-of

ES2020,

DigitalOcean — map set JavaScript

Medium — JavaScript

Medium — What is Memoization in Javascript?

Redd — Debounce vs Throttle: Definitive Visual Guide

JavaScript

Habr — 5 JSON.stringify()

Habr — () «» JavaScript

Habr — JavaScript- : . 1

Habr — -

GoogleDevelopers — Service Workers: an Introduction

Habr —

WebDevBlog — IndexedDB

GoogleDevelopers — Working with IndexedDB

Habr — Web Storage API:

Habr — -

Medium — A Simple Introduction to Web Workers in JavaScript

Habr — JavaScript,

Habr — Async/Await

Habr — CORS: