Los mejores consejos de JavaScript para el desarrollo web

¿Ha estado buscando algunos consejos interesantes sobre JavaScript? Esta publicación describirá una variedad de consejos divertidos y efectivos de JS para ayudarlo a aprender uno de los lenguajes de programación más utilizados en Internet.

Cubriremos los siguientes temas de JavaScript;

Métodos de matriz en JavaScript

La matriz es uno de los componentes más importantes de JavaScript y de cualquier lenguaje de programación en general. A menudo mal concebido como su propio tipo de datos, en realidad es un subconjunto del Object, junto con funciones. En términos simples, una matriz es una estructura de datos compuesta que puede contener una cantidad ilimitada de valores de cualquier tipo. Cada uno de los valores está indexado numéricamente (es decir, cada valor tiene un número que designa su posición en la matriz). Esto hace que la matriz sea extremadamente flexible para almacenar y organizar datos. Las matrices pueden almacenar cadenas, números, objetos o incluso otras matrices. Esta publicación brindará una descripción general de algunos de los métodos de matriz de JavaScript integrados más utilizados. Puede utilizar estos métodos o funciones para manipular y tratar los datos dentro de una matriz.

concat()

EL concat() método, abreviatura de "concatenar", nos permite unir dos matrices juntas:

var colors = ["negro", "blanco", "azul"];
var colors2 = ["verde", "amarillo", "violeta"];
 
document.write (colors.concat (colors2));
// salida: "negro, blanco, azul, verde, amarillo, violeta"

 

Por sí mismo, concat() no alterará la matriz original en la que se llamó al método. Vocación colors todavía generará la matriz original con solo 3 valores. Para actualizar la matriz original, debe llamar al método en el colors matriz, reasignando la variable:

Por sí mismo, concat() no alterará la matriz original en la que llama al método. Vocación colors aún generará la matriz original con solo 3 valores. Para actualizar la matriz original, debe llamar al método en el colors matriz, reasignando la variable:

colores = colores.concat (colores1); 

 

push()

A menudo, solo querrá agregar nuevos elementos al final de una matriz, que puede usar el push() método para. Puede enviar uno o varios valores a una matriz en la misma llamada:

var colors = ["negro", "blanco", "azul"];
colors.push ("verde", "amarillo");
 
document.write (colores);
// salida: "negro, blanco, azul, verde, amarillo"

 

Diferente a la concat(), push() sí actualice la matriz original con los valores que le ha enviado.

unshift()

Similar a push(), unshift() agregará uno o más valores nuevos a la comienzo de la matriz:

var colors = ["negro", "blanco", "azul"];
colors.unshift ("verde");
 
document.write (colores);
// salida: "verde, negro, blanco, azul"

 

pop()

pop() es la inversa de la push() método, ya que "saltará" o eliminará el último elemento de una matriz:

var colors = ["negro", "blanco", "azul"];
colors.pop ();
 
document.write (colores);
// salida: "negro, blanco" 

 

Como pop() elimina un elemento de una matriz, es común almacenar el elemento eliminado en otra variable para otros usos:

var lastItem = colors.pop ();
 
document.write (lastItem);
// salida: "azul"

 

shift()

De manera similar, los shift() eliminará el primer elemento de una matriz:

var colors = ["negro", "blanco", "azul"];
colors.shift ();
 
document.write (colores);
// salida: "blanco, azul"; 

 

También puedes usar shift() junto con el almacenamiento del elemento eliminado en una nueva variable:

var firstItem = colors.shift ();
 
document.write (primer elemento);
// salida: "negro" 

 

reverse()

Como su nombre lo indica, el reverse() El método invertirá el orden de los valores en la matriz:

var miArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var invertedArray = myArray.reverse ();
 
document.write (reversedArray);
// salida: 10, 9, 8, 7, 6, 5, 4, 3, 2, 1

 

reverse() no alterará la matriz original. Deberá almacenar la matriz invertida en una nueva variable. Alternativamente, puede reasignarlo a la variable original para mantener los cambios revertidos.

join()

EL join() El método de matriz unirá todos los valores de la matriz en una cadena, luego devolverá la cadena:

var colors = ["negro", "blanco", "azul", "verde"];
console.log (colors.join ());
// salida: negro, blanco, azul, verde 

 

Hay un parámetro de "separador" opcional que se puede incluir con join(). Este parámetro indica un carácter (o conjunto de caracteres) para separar cada valor en la cadena. El siguiente ejemplo separará cada valor con una coma seguida de un carácter de espacio en blanco:

var colors = ["negro", "blanco", "azul", "verde"];
console.log (colors.join (',');
// salida: negro, blanco, azul, verde 

 

join() no modificará la matriz original. Deberá asignar la modificación a una variable para poder guardarla.

var colorList = colors.join (',');
console.log (lista de colores);
// salida: negro, blanco, azul, verde
 
console.log (colores);
// salida: ["negro", "blanco", "azul", "verde"]
// es decir, sigue siendo la matriz original

 

sort()

sort() clasificará los valores de una matriz en orden alfanumérico. sort() sí actualice la matriz original:

var arr1 = [4, 9, 3, 2, 1];
arr1.sort ();
console.log (arr1);
// salida: [1, 2, 3, 4, 9]

 

sort() solo ordena valores en el momento de llamar al método. Deberá volver a llamarlo para volver a ordenarlo si agrega o modifica valores en la matriz.

indexOf()

indexOf() devolverá el valor de índice de un término de búsqueda proporcionado como un parámetro de cadena al método:

var colors = ["negro", "blanco", "azul", "verde"];
colors.indexOf ('blanco');
// devuelve 1

 

Si no hay coincidencia de índice para el searchValue parámetro, indexOf() regresará -1:

var colors = ["negro", "blanco", "azul", "verde"];
colors.indexOf ('naranja');
// devuelve -1

 

indexOf() distingue entre mayúsculas y minúsculas:

colors.indexOf ('Azul');
// devuelve -1

 

También hay un opcional fromIndex parámetro. Esto indica desde qué valor de índice debe comenzar la búsqueda. Si no se proporciona, la búsqueda comienza en el índice 0 por defecto:

var names = ["Michael", "John", "Sarah", "Michael", "Matthew"];
names.indexOf ('Michael', 2);
// devuelve 3 

 

slice()

EL slice() El método devolverá una "porción" de la matriz, indicada por parámetros opcionales para los puntos inicial y final. slice() deja la matriz original sin modificar:

EL slice() El método devolverá una "porción" de la matriz. Puede indicar los puntos de inicio y finalización mediante sus parámetros opcionales. slice() deja la matriz original sin modificar:

var colors = ["negro", "blanco", "azul", "verde", "violeta", "naranja"];
var colors2 = colors.slice (2, 5);
console.log (colores2);
// salida: ["azul", "verde", "violeta"]
 
var colors3 = colors.slice (1);
console.log (colores3);
// salida: ["blanco", "azul", "verde", "violeta", "naranja"];
 
console.log (colores);
// salida: ["negro", "blanco", "azul", "verde", "violeta", "naranja"]; 

 

filter()

filter() es algo similar al slice() método. La principal diferencia es que crea una nueva matriz basada en ciertas condiciones. Cada valor de la matriz que pasa una condición se "filtra" en la nueva matriz. La condición para el filtrado se establece mediante la función de devolución de llamada:

var someWords = ["fácil", "difícil", "cifrado", "sociedad", "total", "fastidioso", "complejidad"];
 
function checkSize (w) {
    return w.length> 5;
}
 
var bigWords = someWords.filter (checkSize);
console.log (bigWords);
// resultado: ["cifrado", "sociedad", "fastidioso", "complejidad"] 

 

El ejemplo anterior usa el checkSize() función de devolución de llamada para filtrar cualquier palabra de menos de 6 caracteres. También coloca todos los valores restantes en una nueva matriz llamada bigWords.

every()

EL every() El método de matriz comprobará si cada valor de la matriz pasa una condición o no. La condición aquí también se proporciona a través de una función de devolución de llamada. Si pasó, el método volverá true, si no, volverá false:

var números = [20, 31, 18, 500];
 
función mayor que 10 (valor) {
    valor de retorno> 10;
}
 
console.log (nums.every (mayor que10));
// salida: verdadero

 

El ejemplo anterior prueba para ver si cada valor en el nums matriz es mayor que 10, volviendo true.

isArray()

Como su nombre indica, .isArray() comprobará si un valor que se le pasa es una matriz o no:

Array.isArray (['azul', 'amarillo' 'verde']); // devuelve verdadero
Array.isArray (3); // devuelve falso
Array.isArray ('hola'); // devuelve falso

 

findIndex()

findIndex() es casi lo contrario de la indexOf() método. Devolverá el índice del primer valor en una matriz que satisface una condición. La condición se establece mediante una función de devolución de llamada. Si no se encuentra ningún valor que satisfaga la condición, la función devuelve -1.

var colors = ['negro', 'azul', 'amarillo', 'verde', 'violeta'];
 
función mayor que cinco (e) {
    return e.length> 5;
}
 
var indexOfLargeValue = colors.findIndex (mayor que cinco);
console.log (indexOfLargeValue);
// salida: 2

 

forEach()

EL forEach() El método ejecutará una función de devolución de llamada en cada valor de la matriz en la que se llama al método. Esto es útil para agregar valores por igual a cada índice en una matriz, así como para muchas otras aplicaciones. Sin embargo, esto no modificará la matriz original, por lo que los nuevos valores deberán guardarse en otra variable:

var numeros = [1, 2, 3, 5, 8, 13];
var numsUpdated = [];
 
function addTwo (e) {
    y + = 2;
    numsUpdated.push (e);
}
 
nums.forEach (agregarDos);
console.log (numsUpdated);
// salida: [3, 4, 5, 7, 10, 15]

 

Esto es similar a usar un for bucle para iterar sobre una matriz, con una sintaxis un poco más simple.

includes()

Puedes usar includes() para comprobar si una determinada matriz contiene un valor dado o no. Si la matriz lo hace, devolverá true, si no vuelve false.

var colors = ['negro', 'azul', 'amarillo', 'verde', 'violeta'];
 
console.log (colors.includes ('azul'));
// salida: verdadero
 
console.log (colors.includes ('rojo'));
// salida: falso

 

Hay un segundo parámetro opcional, fromIndex. Esto indicará desde dónde comenzar la búsqueda:

var colors = ['negro', 'azul', 'amarillo', 'verde', 'violeta'];
 
console.log (colors.includes ('azul', 2));
// salida: falso
 
console.log (colors.includes ('azul', 1));
// salida: verdadero

 

lastIndexOf()

Similar a indexOf(), lastIndexOf() encontrará la última instancia de un valor dado en una matriz, a diferencia de la primera. El método comenzará su búsqueda desde el final de la matriz y avanzará hasta el principio hasta encontrar una coincidencia adecuada. Si no se encuentra ninguna coincidencia, el método volverá -1:

var food = ['sushi', 'pizza', 'hamburguesa con queso', 'sushi', 'pasta'];
 
console.log (food.lastIndexOf ('sushi'));
// salida: 3
 
console.log (food.lastIndexOf ('burrito'));
// salida: -1

 

.toString()

.toString() es algo similar al .join() método, ya que ambos pueden devolver el índice completo de valores como una cadena. toString() es un método mucho más simple. No tiene parámetros opcionales para especificar caracteres "separadores" para colocar entre cada valor. Todos los valores de una matriz simplemente se separarán con una coma (sin espacios). Esto puede ser bueno o malo, según la aplicación.

Realizar solicitudes de API con JavaScript

Uno de los componentes, si no el más importante, de la interacción con servicios de terceros es la comunicación con sus API. De pie por Programa de aplicaciónraminterfaz de ming, esta es la forma principal en la que diferentes sitios web, aplicaciones y servicios web pueden comunicarse entre sí, recibiendo y enviando datos de un lado a otro. Este tutorial servirá como una introducción básica para conectarse a una API web a través de JavaScript y poder recibir o leer GET solicitudes que devuelven datos en JSON (o Notación de objetos JavaScript) formato. Este tutorial asume un conocimiento básico de los objetos de JavaScript y las propiedades de acceso, pero está destinado a personas sin experiencia previa en el trabajo con API.

Introduction

Para este tutorial, repasaremos el API de Ghibli, que se creó para presentar a las personas el uso de interfaces de programación de aplicaciones (así como para los aficionados a las películas de Studio Ghibli).

La API se divide en 5 módulos o componentes diferentes para diferentes clases de datos relacionados con Studio Ghibli (películas, personas, ubicaciones, especies y vehículos). Cada uno de estos componentes se conoce más formalmente como un punto final. Al realizar una llamada al punto final a través de GET (u otro método similar, como fetch), el punto final devolverá una matriz de datos específicos de esa categoría, en formato JSON. Por ejemplo, el punto final de Películas se vería así:

Tomaremos el punto final para Películas (disponible aquí), haz una llamada a través de GET, entonces log varias partes de los datos al console.

// Cree un XMLHttpRequest nuevo y guárdelo en una variable
var recepción = FAQ XMLHttpRequest();
 
// Indicar el punto final que nos gustaría abrir, mediante el método `GET`
recepción.habiertos('OBTENER', 'https://ghibliapi.herokuapp.com/films', verdadero);
 
// Ejecuta el código dentro de la función una vez que se carga el punto final
recepción.onload = función () {
 
  // Analizar los datos entrantes en formato JSON  
  var amplificación de la voz entrante = JSON.analizar gramaticalmente(este.respuesta);
  
  // Utilice el método de matriz .map para iterar sobre cada índice en las películas
  // punto final, luego acceda a la fecha de lanzamiento, el título y Rotten Tomatoes 
  // puntuación de cada uno, registrándolos en la consola con algunos
  // formateo
  amplificación de la voz entrante.mapa(films => {
      un mueble consola.log(films.fecha de lanzamiento + ":" + films.título + "- (" +  films.rt_score + "% en tomates podridos)");
    });
};
 
// Enviar la solicitud actual, para ejecutar la función asignada a 
// `recibir.onload`
recepción.envío();    

Al ingresar el código anterior en la consola de su navegador, o al ejecutarlo como un archivo JavaScript vinculado a una página web, debe devolver lo siguiente:

... donde mostramos el año de lanzamiento, el nombre de la película y su calificación general en Rotten Tomatoes (junto con algunos formatos adicionales para una mejor legibilidad)

Explicación de la llamada a la API

Las notas documentadas dentro del script anterior deberían hacer que la mayor parte de la llamada a la API sea explicativa, pero la manipulación de los datos dentro receive.onload Vale la pena más detalles.

EL .map() La matriz se utiliza para iterar sobre cada índice individual dentro del punto final de la película (es decir, cada película). UNA for bucle también podría usarse aquí, aunque .map() hace lo mismo con mucho menos código. .map() toma una función de devolución de llamada (escrita aquí en sintaxis ES6). El código dentro de la función de devolución de llamada se ejecuta para cada elemento en el punto final, recuperando su fecha de lanzamiento (films.release_date), título (films.title) y puntuación en Rotten Tomatoes (films.rt_score).

Por simplicidad, un console.log Se usa un mensaje para cada elemento, pero estos datos podrían agregarse fácilmente a los elementos HTML de la página o clasificarse más con otros métodos de matriz (es decir, filtrar solo películas de la década de 1980). Si bien hay mucho más para trabajar con los servicios de API, esta es una descripción general de alto nivel de la mecánica de recuperar datos de los puntos finales de una API.

Una descripción general de los bucles "for" en JavaScript

Un principio fundamental de la programación informática es el antiguo adagio de "SECO", o "No se repita". Siempre que se encuentre reescribiendo el mismo código una y otra vez, es probable que haya una mejor manera de volver a factorizar, sin la necesidad de duplicar líneas del mismo código. Una de las mejores formas de lograr esto es mediante bucles. Hay varios tipos diferentes de bucles, todos los cuales existen en diversas formas en todos los lenguajes de programación. En esta publicación, veremos una de las formas más comunes y útiles de bucles, el for lazo.

Un ejemplo basico

Como introducción para mostrar dónde son muy útiles los bucles, supongamos que desea imprimir "Hello World" en el Desarrolladores de JavaScript consola. Sin el uso de un bucle, tendría que escribir algo como lo siguiente:

console.log ("Hola mundo"); console.log ("Hola mundo"); console.log ("Hola mundo"); console.log ("Hola mundo"); console.log ("Hola mundo"); console.log ("Hola mundo"); console.log ("Hola mundo"); console.log ("Hola mundo"); console.log ("Hola mundo"); console.log ("Hola mundo");

 

Esto es extremadamente tedioso e ineficaz. Las 10 líneas de código anteriores se pueden simplificar drásticamente con solo las siguientes 3 líneas:

for (var i = 0; i <10; i ++) {console.log ("Hola mundo"); }

 

El ejemplo anterior es lo que se conoce como for bucle, una de las formas más comunes y útiles de bucles.

EL for loops

Hay varios componentes que intervienen en la escritura de un for bucle: el contador o expresión inicial, la condición, la expresión de incremento y el código a ejecutar dentro del bucle. Desglosaremos nuestro ejemplo anterior de creación de un bucle que imprime "Hola mundo" en la consola 10 veces.

Todos for los bucles comienzan con la palabra clave for, seguido de un paréntesis, luego seguido de corchetes. El código a ejecutar se coloca entre corchetes. La estructura del esqueleto de un for loop puede verse como:

for (contador; condición; incremento) {// El código a ejecutar va aquí}

 

El contador debe configurarse como variable; en la programación, esto se establece con frecuencia como i, aunque podría ser x, n o cualquier nombre de variable permitido por el idioma. Esto le dice al ciclo su valor inicial, en este caso, 0.

La siguiente parte del ciclo le dice a JavaScript la condición: en este caso, ejecute el ciclo siempre que el valor de i es menor que 10. Tan pronto como el bucle llegue a 10, se detendrá. Sus extremadamente Es importante tener un conjunto condicional antes de intentar ejecutar su bucle, de lo contrario, terminará con un bucle infinito, que terminará sobrecargando y bloqueando su navegador.

La última parte del ciclo entre paréntesis es el incremento: i++. i++ es una abreviatura en JavaScript para i += 1 or i = i + 1. En otras palabras, suma 1 al valor de i cada vez que se ejecuta el bucle. Este también es un componente crucial del ciclo, ya que si en realidad no se incrementa, tampoco terminará.

El código que se coloque dentro de los corchetes se ejecutará en cada iteración del ciclo. Si desea obtener algún tipo de indicación de en qué iteración se encuentra el bucle cada vez que se ejecuta, simplemente puede agregar la variable de contador que se incluirá en el código que debe devolverse cada vez (es decir, el código que se ejecuta dentro de los corchetes ):

for (var i = 1; i <= 10; i ++) {console.log ("El bucle ahora está en iteración" + i); }

 

El código anterior, cuando se ejecuta, se imprimirá:

El bucle ahora está en iteración 1 El bucle ahora está en iteración 2 El bucle ahora está en iteración 3 El bucle ahora está en iteración 4 El bucle ahora está en iteración 5 El bucle ahora está en iteración 6 El bucle ahora está en iteración 7 El El bucle ahora está en iteración 8 El bucle ahora está en iteración 9 El bucle ahora está en iteración 10

Introducción a Node.js

El desarrollo de JavaScript ha recorrido un largo camino desde que fue introducido por primera vez en 1995 por el cofundador de Mozilla, Brendan Eich. Originalmente utilizado como lenguaje de scripting del lado del cliente, JavaScript ha expandido su uso a aplicaciones mucho más allá de sus intenciones originales. El lenguaje ya no se usa únicamente en el lado del cliente. Con la introducción de Node.js, JavaScript ahora también se usa en el lado del servidor, reemplazando la necesidad de otros lenguajes de back-end como PHP, Python o Ruby.

Más que una simple novedad, cada vez más desarrolladores y empresas están adoptando el uso de JavaScript en el back-end, lo que permite que todo el trabajo de desarrollo se realice en un solo idioma. Para tener una mejor idea de por qué esto se está convirtiendo en una tendencia creciente, esta publicación analizará lo que Node.js es, y para qué se utiliza mejor.

Una explicación de Node.js

Node.js es un marco o biblioteca de JavaScript desarrollado para poder usar JavaScript como lenguaje de scripting principal del lado del servidor. No es un lenguaje nuevo, simplemente un subconjunto de código escrito para el lenguaje JavaScript. Creado originalmente por Ryan Dahl en 2009, se basa en el motor JavaScript V8 de Google Chrome, que en sí mismo fue desarrollado para ofrecer un mejor rendimiento que otros motores JavaScript existentes. Node.js es completamente de código abierto, se ejecuta en todos los sistemas operativos y la gran comunidad de desarrolladores que rodea el proyecto lo mejora constantemente.

Dado que está diseñado específicamente para uso backend, Node.js viene con una variedad de módulos para manejar tareas comunes para las que uno usaría un lenguaje de scripting del lado del servidor. Esto puede acelerar enormemente el proceso de desarrollo, abstrayendo características comunes que de otro modo tendría que escribir desde cero.

Las características básicas de Node.js

Estas son algunas de las características fundamentales de Node.js que se separan de otras secuencias de comandos marcos:

Programación asincrónica basada en eventos

Las API que se utilizan como parte del marco de Node.js son totalmente asincrónicas, también conocidas como no bloqueantes. Esto equivale a que Node.js nunca tenga que esperar a una API específica para enviar datos sin pasar a otra tarea. Node.js pasará a otra API, realizando un seguimiento de los datos que todavía está esperando recibir de otras API.

Alto Rendimiento

Node.js es extremadamente rápido en comparación con otras alternativas del lado del servidor, ya que se creó en el motor V8 de Google Chrome. Dependiendo de las versiones comparadas, Node.js ha superado a PHP y Python en las pruebas de referencia.

Evita el almacenamiento en búfer

Las aplicaciones de Node.js siempre generan datos en fragmentos, para evitar el almacenamiento en búfer.

Verdaderamente

Node.js fue desarrollado para ser utilizado tanto en proyectos pequeños como en grandes sistemas empresariales. Node.js utiliza un modelo de un solo subproceso para permitir eventos asincrónicos, mientras que los lenguajes de servidor comunes utilizan un número limitado de subprocesos para tratar las solicitudes de datos. En última instancia, esto significa que Node.js puede manejar una mayor cantidad de solicitudes de servidor a la vez que una configuración de servidor más típica como Apache HTTP.

Node.js en la práctica

Node.js se utiliza para una amplia gama de usos, desde proyectos de código abierto o pequeñas empresas emergentes, hasta compañías Fortune 500. Una breve lista de empresas que utilizan Node.js incluye PayPal, Uber, Microsoft, eBay y GoDaddy.

Para que es mejor Node.js

Algunos de los usos en los que Node.js realmente brilla incluyen aplicaciones vinculadas a I / 0, como mensajería de chat, servicios de transmisión de datos como video en vivo, aplicaciones intensivas de datos en tiempo real (DIRT), aplicaciones web de una sola página y aplicaciones que utilizan un muchas API basadas en JSON.

Conclusión

Esperamos que haya encontrado algunos consejos útiles de este artículo que pueda utilizar con su siguiente proyecto Javascript. No dude en publicar sus comentarios y sugerencias de JS a través de la sección de comentarios a continuación.

También puede consultar este gran recurso que compara JavaScript frente a PHP.