12 fragmentos de código JavaScript que todo desarrollador debería conocer

JavaScript es, con mucho, el lenguaje más popular cuando se trata de desarrollo web y potencia la mayoría de los sitios web y aplicaciones web. javascript no solo se usa en el lado del cliente (con HTML y CSS), sino que también es compatible con el lado del servidor (construido con Nodejs). Hoy en día, la mayoría de los desarrolladores y dueños de negocios realizan un seguimiento de las tendencias de JavaScript para asegurarse de no perder ninguna oportunidad importante.

Estos son algunos de los más importantes. Fragmentos de código JavaScript que necesita saber como desarrollador. Los fragmentos son plantillas de codificación que generalmente se usan para realizar una sola tarea y también pueden reducir en gran medida el trabajo redundante. Encontrar el fragmento que necesita puede ahorrarle mucho tiempo y esfuerzo al programar JavaScript. Dicho esto, pasemos al artículo sobre el mejores fragmentos de código javascript para ayudarte a aprender y construir mucho más fácilmente con JavaScript.

12 fragmentos de código JavaScript que todo desarrollador debería conocer

1. Ordenar una matriz

JavaScript proporciona una función integrada ordenar() método que se puede utilizar para ordenar los elementos dentro de uno objeto de matriz. El fragmento de código a continuación dio un ejemplo para ordenar números en orden ascendente.

Ejemplo:

aquí el clase() se llama al método números array, que toma la función de comparación como argumento. La función de comparación tiene 2 argumentos.a’ y ‘b’, que son los elementos que se comparan. La función de comparación devuelve un valor positivo en caso de que ‘a’ debe ser anterior/igual a ‘b’ y un negativo valor como ‘a’ debe venir despues ‘b’.

2. Realice llamadas a la API mediante el método fetch().

recoger() es una función global proporcionada por Fetch API que proporciona una interfaz para interactuar y acceder a elementos de protocolo como solicitudes y respuestas. El fragmento de código a continuación proporciona un ejemplo de cómo realizar una solicitud de API mediante recoger() y registra las respuestas en la consola. En lugar de registrar el resultado, uno puede poner los datos en una variable.

Ejemplo:

Aquí el código define una función asíncrona llamada obtenerAPI() que realiza una solicitud GET a la API en la URL especificada utilizando la función de búsqueda. La función de búsqueda devuelve un promesa eso se soluciona con la espera y el objeto respuesta se almacena en el ‘responder’ variable. Él json() se llama al método en la respuesta para analizar los datos que nuevamente devuelve una promesa que se resuelve esperando y los datos se almacenan en el ‘datos’ variable. Luego, los datos analizados se registran en la consola.

Debe leer: JavaScript – método get().

3. Encuentra el máximo usando un operador condicional (ternario)

Un operador condicional es una sustitución de una línea para la declaración if .. else. A continuación se muestra el fragmento de ejemplo que define un operador ternario para obtener el número máximo.

Ejemplo:

Aquí, si el condición es decir `número1 > número2` es cierto, devuelve `numero1`de lo contrario, devuelve `numero2` que se almacena en el máximo variable.

Debe leer: Programa para hallar el mayor numero usando un operador ternario

4. Cree una nueva matriz utilizando la matriz/lista existente

La matriz de JavaScript proporciona una método mapa() que crea una nueva matriz después de aplicar una transformación a la matriz existente. El método toma como argumento una función de devolución de llamada que se aplica a cada elemento de la matriz. El fragmento de código a continuación usa el método de mapa para encontrar la longitud de todas las frutas en la matriz de frutas.

Ejemplo:

aquí el método mapa() se llama en el hilo de la fruta, que es el función de devolución de llamada como argumento. La función de devolución de llamada toma un elemento ‘ele’ como argumento y devuelve la longitud del elemento, por ejemplo, ‘ele.longitud. La función de devolución de llamada se aplica a todos los elementos de la matriz a través del método de mapa. El método de mapa devuelve una nueva matriz que consta de elementos devueltos por la función de devolución de llamada, que se almacena en ‘fruit_len‘.

Debe leer: Método JavaScript Array map()

5. Cree una nueva matriz después de filtrar la matriz existente

La matriz de JavaScript proporciona una método de filtro () que crea uno copia superficial parte de los elementos seleccionados sobre la base de una serie de criterios específicos. El método toma como argumento una función de devolución de llamada que se aplica a cada elemento de la matriz. El fragmento de código siguiente devuelve la lista de frutas de igual longitud.

Ejemplo:

[ 'apple', 'mango', 'watermellon' ]

aquí el método de filtro () se llama en la matriz de frutas, que toma la función de devolución de llamada como argumento. La función de devolución de llamada toma un elemento ‘ele’ como argumento y devuelve ‘DÓNDE’ si el elemento tiene la misma longitud y ‘falso’ de lo contrario. La función de devolución de llamada se aplica a todos los elementos de la matriz a través del método de filtro. El método de filtro devuelve una nueva matriz que consta de elementos que cumplen la condición de la función de devolución de llamada, que se almacena en ‘even_fruits’.

Debe leer: Método JavaScript Array filter()

6. Encuentra un elemento basado en condiciones específicas

La matriz de JavaScript proporciona una método buscar() que devuelve el primer elemento de la matriz en función de una condición dada[s]. El fragmento de código a continuación se usa para buscar un elemento de la matriz de frutas que cumpla con los criterios dados.

Ejemplo:

aquí el método buscar() se llama en la matriz de frutas, que toma la función de devolución de llamada como argumento. La función de devolución de llamada toma un elemento ‘elementocomo argumento y vuelve ‘DÓNDE‘ si el elemento tiene la misma longitud con una longitud superior a 6 y ‘falso‘ de lo contrario. La función de devolución de llamada se aplica a todos los elementos de la matriz hasta que se encuentra el primer elemento que satisface la condición. Él método buscar() devuelve el primer elemento que cumple la condición y ‘indefinido’ si no se encuentra tal elemento en la matriz.

Debe leer: Método JavaScript Array find()

7. Encuentra el índice de un elemento basado en condiciones específicas

La matriz de JavaScript proporciona una método findIndex() que devuelve el Tabla de contenido del primer elemento de la matriz en función de una condición dada[s]. El fragmento de código a continuación se usa para buscar el índice de un elemento de la matriz de frutas que cumple con los criterios dados.

Ejemplo:

aquí el método findIndex() se llama en la matriz de frutas, que toma la función de devolución de llamada como argumento. La función de devolución de llamada toma un elemento ‘elemento‘ como argumento y devuelve verdadero si el elemento tiene la misma longitud con una longitud superior a 6, y falso en caso contrario. La función de devolución de llamada se aplica a todos los elementos de la matriz hasta que se encuentra el primer elemento que satisface la condición. Él buscarÍndice() método devuelve el ‘Tabla de contenido‘ del primer elemento que cumple la condición y ‘-1’ si no se encuentra tal elemento en la matriz.

Debe leer: Método JavaScript Array findIndex()

8. Suma de todos los elementos en una matriz

La matriz de JavaScript proporciona una reducir() método que realiza una función reductora definida por el usuario en cada elemento de la matriz para obtener un valor único El fragmento de código siguiente devuelve la suma de todos los elementos de una matriz.

Ejemplo:

aquí el Reducir() se llama al método números matriz, que es la función de devolución de llamada como argumento. La función de devolución de llamada se toma en 2 argumentos, ‘acumulador’ cuales es el valor devuelto por la función de devolución de llamada anterior, y el ‘valor actual’ ¿Cuál es el valor del elemento actual? La función reductora comienza con el valor inicial, es decir ‘valor inicial’ desde ‘0’, y se aplica a todos los elementos de la matriz desde el primer elemento. El método finalmente devuelve la suma de todos los elementos almacenados en la variable total.

Debe leer: Método JavaScript Array reduce()

9. Elimina el primer elemento de la matriz.

La matriz de JavaScript proporciona una método shift() que quita el primero elemento de la matriz. El fragmento de código siguiente elimina el primer elemento de la matriz e imprime la matriz actualizada.

Ejemplo:

1 is deleted from the array
updated array:  [ 2, 3, 4, 5 ]

aquí el método shift() se llama a la secuencia de números, que elimina y devoluciones el primer elemento de la matriz. El valor devuelto se almacena en el ‘quitar_valor’ variable. La función reduce el tamaño de la matriz por 1.

10. Inserta elementos al principio de la matriz.

La matriz de JavaScript proporciona una método unshift() que agrega uno o más elementos al comienzo de la matriz. El fragmento de código a continuación agrega 2 elementos al comienzo de la matriz e imprime la matriz actualizada.

Ejemplo:

updated array:  [
  -1, 0, 1, 2,
   3, 4, 5
]

aquí el método unshift() se llama a la secuencia numérica, que inserta 2 elementos al principio de la secuencia. El método unshift ocupa 1 o más parámetros que se agregarán al comienzo de la matriz. programa anterior aumenta el tamaño de la matriz 2.

Debe leer: Método JavaScript Array unshift()

11. Eliminar el último elemento de la matriz

La matriz de JavaScript proporciona una método pop() que elimina el último elemento de la matriz. El fragmento de código siguiente elimina el último elemento de la matriz e imprime la matriz actualizada.

Ejemplo:

5 is deleted from the array
updated array:  [ 1, 2, 3, 4 ]

aquí el método pop() se llama a la números matriz, que es la último artículo de la serie El valor devuelto se almacena en el ‘delete_value‘ variable. Similar a método shift(), fragmento de arriba reduce el tamaño de la matriz 1.

Debe leer: Método JavaScript Array pop()

12. Inserta elementos al final de la matriz

La matriz de JavaScript proporciona una método empujar() que agrega uno o más elementos al final de la matriz. El fragmento de código a continuación agrega 2 elementos al final de la matriz e imprime la matriz actualizada.

Ejemplo:

updated array:  [
  1, 2, 3, 4,
  5, 6, 7
]

aquí el método empujar() se llama a la secuencia de números, que se inserta 2 elementos hasta el final de la serie. El método push toma 1 o más parámetros para agregarlos al final de la matriz. Equivalente a método unshift()programa anterior aumenta el tamaño de la matriz 2.

Debe leer: Método JavaScript Array push()

Recursos Relacionados:

Conclusión

Ahora que conoce los fragmentos de código de JavaScript, ¡puede comenzar a implementarlos! Éste Los mejores fragmentos de código JavaScript le permiten reutilizar código desarrollado y probado previamente, que puede ahorrarle tiempo y esfuerzo. Al dividir su código en fragmentos más pequeños y manejables, los fragmentos también pueden facilitarle a usted u otros desarrolladores la comprensión y el mantenimiento de su código. En general, el uso de fragmentos puede ayudar a aumentar la efectividad y la legibilidad del código. Comience a usarlos ahora para crear un proyecto interesante con menos código y complejidad.