15 técnicas avanzadas de JavaScript todo desarrollador debe conocer
- 1071
- 23
- Norma Sedillo
JavaScript es un lenguaje de programación versátil y potente que se ha utilizado ampliamente en el desarrollo de aplicaciones web. Como desarrollador, es esencial tener una comprensión sólida de las capacidades del lenguaje y las técnicas avanzadas para crear aplicaciones web robustas, eficientes y escalables.
Aquí hay 15 técnicas avanzadas de JavaScript que todo desarrollador debe saber.
1. Cierre
El cierre es una técnica poderosa en JavaScript que le permite crear funciones con estado persistente. Esencialmente, un cierre es una función que "recuerda" el entorno en el que se creó. Esto puede ser útil para crear variables privadas, así como para crear funciones que se pueden usar para generar otras funciones.
Por ejemplo:
función contador () LET count = 0; Función de retorno () return ++ Count; const c = contador (); consola.log (c ()); // 1 consola.log (c ()); // 2 consola.log (c ()); // 3| 1234567891011 | función contador () LET count = 0; Función de retorno () return ++ Count; const c = contador (); consola.log (c ()); // 1Console.log (c ()); // 2console.log (c ()); // 3 |
En el ejemplo anterior, la función de contador devuelve una función que tiene acceso a la variable de recuento en su alcance externo. Cada vez que se llama a la función devuelta, incrementa la variable de conteo y devuelve su valor.
2. Zurra
Currying es una técnica en la que una función con múltiples argumentos se transforma en una serie de funciones que toman un solo argumento. Esto puede ser útil para crear un código más modular, así como para crear funciones que se puedan reutilizar en diferentes contextos.
Por ejemplo:
función add (a, b) return a + b; function curryadd (a) function return (b) return add (a, b); const add5 = curryadd (5); consola.log (add5 (10)); // 15| 123456789101112 | function add (a, b) return a + b; función curryadd (a) function return (b) return add (a, b); const add5 = curryadd (5); consola.log (add5 (10)); // 15 |
En el ejemplo anterior, la función Agregar se transforma en una función curry utilizando la función CurryAdd. La función CurryAdd toma el primer argumento A y devuelve una nueva función que toma el segundo argumento B y llama a la función ADD original con ambos argumentos.
3. Memoización
La memoización es una técnica para optimizar el rendimiento de las funciones al almacenar en caché los resultados de los cálculos costosos. Esto puede ser útil para las funciones que se llaman con frecuencia o que tardan mucho tiempo en funcionar.
Por ejemplo:
función fibonacci (n) if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); function memoize(func) const cache = ; return function(… args) const key = JSON.stringify(args); if (cache[key]) return cache[key]; const result = func.apply(this, args); cache[key] = result; return result; const memoizedFibonacci = memoize(fibonacci); console.log(memoizedFibonacci(10)); // 55| 12345678910111213141516171819202122 | función fibonacci (n) if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); function memoize(func) const cache = ; return function(...args) const key = JSON.stringify(args); if (cache[key]) return cache[key]; const result = func.apply(this, args); cache[key] = result; return result; const memoizedFibonacci = memoize(fibonacci);console.log(memoizedFibonacci(10)); // 55 |
En el ejemplo anterior, la función de memo, toma una función func y devuelve una nueva función que almacena en caché el resultado de la llamada de función original en función de sus parámetros de entrada. La próxima vez que se llame a la función con los mismos parámetros de entrada, devuelve el resultado en caché en lugar de ejecutar la función original.
4. Estrangulador
El estrangulamiento es una técnica en la que una función se ejecuta como máximo una vez en un intervalo de tiempo especificado. Esto puede ayudar a limitar el número de veces que se llama una función y mejorar el rendimiento de su aplicación.
Por ejemplo:
Funcion Throttle (FUNC, Delay) Let LastCall = 0; Función de retorno (... args) const Now = new Date ().consigue tiempo(); if (ahora - LastCall < delay) return; lastCall = now; func.apply(this, args); window.addEventListener('scroll', throttle(function() console.log('scrolling'); , 100));| 123456789101112131415 | Funcion Throttle (FUNC, Delay) Let LastCall = 0; función de retorno (...args) const ahora = new Date ().consigue tiempo(); if (ahora - LastCall < delay) return; lastCall = now; func.apply(this, args); window.addEventListener('scroll', throttle(function() console.log('scrolling');, 100)); |
En el ejemplo anterior, la función del acelerador toma una función FUNC y un retraso en el intervalo de tiempo como argumentos y devuelve una nueva función que ejecuta FUNC como máximo una vez por retraso en milisegundos.
En el ejemplo anterior, el oyente de eventos de desplazamiento está envuelto con una función del acelerador que limita el número de veces la consola.La instrucción log ('desplazamiento') se ejecuta mientras desplazaba.
5. Desacuerdo
El desacuerdo es una técnica en la que una función se retrasa hasta que haya transcurrido un intervalo de tiempo específico después de la última invocación. Esto puede ayudar a reducir la cantidad de veces que se llama una función y mejorar el rendimiento de su aplicación.
Por ejemplo:
function debupe (func, demora) let timerID; Función de retorno (... args) if (timerID) cleartimeout (timerID); timerId = setTimeOut (() => func.aplicar (esto, args); timerID = nulo; , demora); ventana.addEventListener ('RESEZE', DEBOUNT (function () console.log ('cambio de cambio'); , 500));| 12345678910111213141516 | function debupe (func, demora) let timerID; función de retorno (...args) if (timerID) cleartimeout (timerID); timerId = setTimeOut (() => func.aplicar (esto, args); timerID = nulo; , demora); ventana.addEventListener ('RESEZE', DEBOUNT (function () console.LOG ('RESISTO');, 500)); |
En el ejemplo anterior, la función de desbordamiento toma una función func y un retraso en el intervalo de tiempo como argumentos y devuelve una nueva función que retrasa la ejecución de FUNC hasta que los milisegundos de retraso han transcurrido desde la última invocación.
En el ejemplo anterior, el escucha de eventos de cambio de tamaño está envuelto con una función de debuncia que limita el número de veces la consola.La declaración de registro ('cambio de tamaño') se ejecuta mientras cambia el tamaño de la ventana.
6. Promesas
Las promesas son una forma de administrar el código asincrónico en JavaScript. Son esencialmente un marcador de posición para un valor que puede no estar disponible todavía, pero que estarán en el futuro. Las promesas se pueden usar para asegurarse de que cierto código se ejecute solo después de que otro código haya terminado de ejecutarse, y también se pueden usar para manejar los errores de una manera más elegante que el manejo tradicional de errores.
Por ejemplo:
function fetchData () return new Promise ((resolve, rechazar) => fetch ('https: // ejemplo.com/data ') .Entonces (respuesta => respuesta.json ()) .entonces (data => resolve (data)) .capt (error => rechazar (error)); ); obtener datos() .entonces (data => consola.Dato de registro)) .Catch (Error => Consola.error (error));| 123456789101112 | function fetchData () return new Promise ((resolve, rechazar) => fetch ('https: // ejemplo.com/data ') .Entonces (respuesta => respuesta.json ()) .entonces (data => resolve (data)) .capt (error => rechazar (error)); ); obtener datos() .entonces (data => consola.Dato de registro)) .Catch (Error => Consola.error (error)); |
En el ejemplo anterior, la función fetchData devuelve una promesa que se resuelve con los datos obtenidos de https: // ejemplo.com/datos. La promesa se consume luego utilizando los métodos de entonces y de captura para manejar los datos resueltos y cualquier error que ocurra.
7. Asíncrono/espera
Async/Await es un azúcar sintáctico además de las promesas que le permite escribir un código asíncrono que parece un código sincrónico. Esto puede hacer que el código asincrónico sea más legible y más fácil de mantener.
Por ejemplo:
ASYNC Function fetchData () try const respuesta = await fetch ('https: // ejemplo.com/data '); Const Data = Respuesta de espera.json (); devolver datos; capt (error) tirar un nuevo error (error); obtener datos() .entonces (data => consola.Dato de registro)) .Catch (Error => Consola.error (error));| 12345678910111213 | ASYNC Function fetchData () try const respuesta = await fetch ('https: // ejemplo.com/data '); Const Data = Respuesta de espera.json (); devolver datos; capt (error) tirar un nuevo error (error); obtener datos() .entonces (data => consola.Dato de registro)) .Catch (Error => Consola.error (error)); |
En el ejemplo anterior, la función FetchData se declara con la palabra clave Async y utiliza la palabra clave de espera para esperar el valor resuelto de las promesas devueltas por la búsqueda y la respuesta.Métodos JSON. Cualquier error se capta usando un bloque de try/captación.
8. Generadores
Los generadores son una característica poderosa en JavaScript que le permiten hacer una pausa y reanudar la ejecución de una función, mientras mantiene su estado interno. Esto puede ser útil para una variedad de aplicaciones, desde la programación asíncrona hasta los iteradores de construcción.
Aquí hay un ejemplo de cómo puede usar un generador para construir un iterador que genera una secuencia infinita de números de Fibonacci:
function* fibonacci () LET [anterior, curr] = [0, 1]; while (verdadero) rendimiento de Curr; [anterior, Curr] = [Curr, Prev + Curr]; const fib = fibonacci (); consola.registro (fib.próximo().valor); // registros 1 consola.registro (fib.próximo().valor); // registros 1 consola.registro (fib.próximo().valor); // Consola de registros 2.registro (fib.próximo().valor); // registros 3 consola.registro (fib.próximo().valor); // registros 5| 123456789101112131415 | function* fibonacci () LET [anterior, curr] = [0, 1]; while (verdadero) rendimiento de Curr; [anterior, Curr] = [Curr, Prev + Curr]; const fib = fibonacci (); consola.registro (fib.próximo().valor); // registros 1Console.registro (fib.próximo().valor); // registros 1Console.registro (fib.próximo().valor); // registros 2console.registro (fib.próximo().valor); // registros 3console.registro (fib.próximo().valor); // registros 5 |
En este ejemplo, la función fibonacci se declara como una función de generador usando la función* sintaxis. La función usa un bucle de tiempo para generar una secuencia infinita de números de Fibonacci, que se producen uno a la vez utilizando la palabra clave de rendimiento. La variable FIB se inicializa como un objeto iterador utilizando la función Fibonacci (), y cada llamada posterior al método Next () genera el siguiente número en la secuencia.
9. Operador de propagación
El operador de propagación, denotado por tres puntos (...), es una característica poderosa en JavaScript que le permite expandir un objeto iterable (como una matriz o una cadena) en elementos individuales. Esto se puede usar para simplificar y optimizar su código de varias maneras.
Aquí hay un ejemplo de cómo puede usar el operador de propagación para concatenar dos matrices:
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [... arr1, ... arr2]; consola.log (arr3); // registros [1, 2, 3, 4, 5, 6]| 12345 | const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [...ARR1, ...arr2]; consola.log (arr3); // registros [1, 2, 3, 4, 5, 6] |
En este ejemplo, el operador de propagación se usa para concatenar ARR1 y ARR2 en una nueva matriz ARR3. La ... sintaxis ... ARR1 expande la matriz ARR1 en elementos individuales, que luego se concatenan con la… ARR2 Syntax.
10. Funciones de orden superior
Una función de orden superior es una función que toma otra función como argumento o devuelve una función como resultado. Esto puede ser útil para crear un código reutilizable que se puede personalizar para adaptarse a diferentes casos de uso.
función multiplyby (factor) function de return (número) número de retorno * factor; ; const Double = Multiplyby (2); const triple = multiplyby (3); consola.log (doble (5)); // registros 10 consola.log (triple (5)); // registros 15| 1234567891011 | función multiplyby (factor) function de return (número) número de retorno * factor; ; const double = multiplyby (2); const triple = multiplyby (3); consola.log (doble (5)); // registros 10console.log (triple (5)); // registros 15 |
En este ejemplo, la función multiplyby devuelve otra función que multiplica un número dado por un factor especificado. La función devuelta se puede usar para crear otras funciones que se multiplicen por diferentes factores.
11. Destructor
La destrucción es una forma de extraer valores de objetos o matrices de una manera más concisa. Esto puede ser particularmente útil cuando se trata de estructuras de datos complejas, ya que le permite extraer de manera rápida y fácil los valores que necesita.
constt Person = name: 'John', Age: 30, Dirección: Street: '123 Main St', City: 'Anytown', State: 'Ca', Zip: '12345'; const nombre, edad, dirección: ciudad = persona; consola.log (nombre); // 'John' Consola.log (edad); // 30 consola.log (ciudad); // 'Cualquier pueblo'| 12345678910111213141516 | constt Person = name: 'John', Age: 30, Dirección: Street: '123 Main St', City: 'Anytown', State: 'Ca', Zip: '12345'; const nombre, edad, dirección: ciudad = persona; consola.log (nombre); // 'John'Console.log (edad); // 30Console.log (ciudad); // 'Cualquier pueblo' |
En este ejemplo, estamos destruyendo el objeto de la persona para extraer el nombre, la edad y las propiedades de la ciudad y asignarlas a variables.
12. Delegación de eventos
La delegación de eventos es una técnica para manejar eventos en los que un solo controlador de eventos se adjunta a un elemento principal, en lugar de a cada elemento infantil individual. Esto puede ser útil para mejorar el rendimiento del manejo de eventos, así como para manejar eventos en contenido generado dinámicamente.
- Artículo 1
- Artículo 2
- Artículo 3
| 123456789101112131415 |
|
En este ejemplo, estamos adjuntando un oyente de eventos de clic al elemento UL y luego usando el evento.Propiedad objetivo para determinar en qué elemento LI se hizo clic en. Esto es útil para manejar eventos en contenido dinámico que se pueden agregar o eliminar de la página.
13. Uso de corchete
En JavaScript, los soportes rizados se utilizan para delimitar bloques de código. Sin embargo, también se pueden usar de una manera más concisa para crear objetos o destruir objetos. Esto puede ser particularmente útil cuando se trabaja con estructuras de datos complejas.
función myFunction () const x = 1; const y = 2; if (x < y) console.log('x is less than y'); else console.log('x is greater than or equal to y');| 12345678910 | función myFunction () const x = 1; const y = 2; if (x < y) console.log('x is less than y'); else console.log('x is greater than or equal to y'); |
En este ejemplo, estamos usando soportes rizados para definir el cuerpo de la función de myfunction y la declaración if.
14. Módulos JavaScript
Los módulos JavaScript son una forma de organizar el código en unidades reutilizables y autónomas. Se pueden usar para encapsular la funcionalidad y para crear un código más mantenible.
// módulo 1.JS Función de exportación add (a, b) return a + b; // módulo2.js import add desde './módulo 1.JS '; const sum = add (2, 3); consola.log (suma); // 5| 1234567891011 | // módulo 1.JSEXPORT FUNTY ADD (A, B) return a + b; // módulo2.jsimport add desde './módulo 1.JS '; const sum = add (2, 3); consola.log (suma); // 5 |
En este ejemplo, estamos exportando la función Agregar desde el módulo1.js y luego importarlo en el módulo2.JS utilizando la declaración de importación. Esto nos permite reutilizar la función Agregar en diferentes partes de nuestro código.
15. Funciones de flecha
Las funciones de flecha son una forma concisa de definir funciones en JavaScript. Son particularmente útiles para crear funciones anónimas, así como para crear funciones que toman un solo argumento.
Const números = [1, 2, 3, 4, 5]; const incluso numbers = números.filtro (num => num % 2 === 0); consola.log (incluso los numbers); // [2, 4]| 12345 | Const números = [1, 2, 3, 4, 5]; const incluso numbers = números.filtro (num => num % 2 === 0); consola.log (incluso los numbers); // [2, 4] |
En este ejemplo, estamos utilizando una función de flecha para filtrar la matriz de números y devolver solo los números uniformes. La sintaxis de la función de flecha es más corta y más concisa que la sintaxis de la función tradicional.
Conclusión
En conclusión, estas 15 técnicas avanzadas de JavaScript son esenciales para cualquier desarrollador que busque llevar sus habilidades al siguiente nivel. Ya sea que esté trabajando en un proyecto pequeño o una gran aplicación, estas técnicas pueden ayudarlo a escribir un código más eficiente y mantenible. Entonces, comience a practicar y vea cómo estas técnicas pueden ayudarlo a llevar sus habilidades de JavaScript al siguiente nivel!