Top 10 Shorthands de JavaScript para principiantes

Las abreviaturas de JavaScript no solo aceleran el proceso de codificación, sino que también reducen las secuencias de comandos, por lo tanto, generan cargas de página más rápidas . Los códigos abreviados son tan válidos como sus versiones a mano alzada; esencialmente representan lo mismo, solo que en un formato más compacto. Son una de las técnicas de optimización de código más simples.

Hay varios shorthands de JavaScript, sin embargo , no tienen una guía de referencia oficial . Algunos son realmente simples, mientras que otros son bastante intimidantes incluso para desarrolladores experimentados. En este artículo, puede encontrar 10 shorthands de JavaScript para principiantes con los que puede comenzar con la optimización de código y escribir un código más conciso.

1. Números decimales

Si trabajas regularmente con grandes decimales, esta taquigrafía puede ser un regalo del cielo, ya que no tienes que escribir todos los ceros, simplemente reemplázalos con la notación e . Por ejemplo, 1e8 significa la suma de ocho ceros después de 1 dígito, es igual a 100000000 .

El número después de la letra e indica el número de ceros que vienen después del dígito (s) antes de e . Del mismo modo, 16e4 es la abreviatura de 160000, etc.

 / * Taquigrafía * / var myVar = 1e8; / * Longhand * / var myVar = 100000000; 

2. Incremento, decremento

La taquigrafía de incremento se compone de dos signos +, significa que el valor de una variable debe incrementarse en uno . De manera similar, la taquigrafía de decremento consiste en dos signos, y significa que la variable se debe decrementar en uno .

Estas dos combinaciones se pueden usar solo en tipos de datos numéricos . Tienen un papel indispensable en los bucles, su caso de uso más frecuente es el bucle for .

 / * Taquigrafía * / i ++; j--; / * Taco largo * / i = i + 1; j = j-1; 

3. Agregar, distraer, multiplicar, dividir

Hay una forma abreviada de cada una de las cuatro operaciones matemáticas básicas : suma, distracción, multiplicación y división. Funcionan de manera similar a los operadores de incremento y decremento, solo aquí, puede cambiar el valor de una variable por cualquier número (no solo por uno).

En el ejemplo siguiente, la variable i se incrementa en 5, j se decrementa en 3, k se multiplica por 10 y l se divide por 2 .

 / * Taquigrafía * / i + = 5; j- = 3; k * = 10; l / = 2; / * Taco largo * / i = i + 5; j = j-3; k = k * 10; l = l / 2; 

4. Determinar la posición del personaje

El método charAt() es uno de los métodos de cadena más utilizados, devuelve el carácter en una posición específica (por ejemplo, el 5º carácter de una cadena). En su lugar, puede usar una abreviatura simple: agrega la posición del personaje entre corchetes después de la cadena.

Preste atención que el método charAt() es cero . Por lo tanto, myString[4] devolverá el ^5to carácter en la cadena ( "y" en el ejemplo).

 var myString = "Feliz cumpleaños"; / * Taquigrafía * / myString [4]; / * Longhand * / myString.charAt (4); 

5. Declarar variables a granel

Si desea crear más de una variable al mismo tiempo, no tiene que escribirlas una a una. Es suficiente usar la palabra clave var (o let ) solo una vez, luego puede simplemente enumerar las variables que desea crear, separadas por una coma .

Con esta abreviatura, puede declarar tanto variables indefinidas como variables con un valor .

 / * Taquigrafía * / var i, j = 5, k = "Buenos días", l, m = falso; / * Longhand * / var i; var j = 5; var k = "Buenos días"; var l; var m = falso; 

6. Declarar una matriz asociativa

Declarar una matriz en JavaScript es una tarea relativamente simple, al usar la var myArray = ["apple", "pear", "orange"] . Sin embargo, declarar una matriz asociativa es un poco más complicado, ya que aquí, no solo tiene que definir los valores sino también las claves (en el caso de las matrices normales, las claves son 0, 1, 2, 3, etc. ).

Una matriz asociativa es una colección de pares clave-valor . La forma manual es declarar la matriz y luego agregar cada elemento uno por uno. Sin embargo, con la abreviatura siguiente, también puede declarar la matriz asociativa más todos sus elementos al mismo tiempo.

En el ejemplo siguiente, la myArray asociativa myArray asigna su lugar de nacimiento (valores) a personas famosas (claves).

 / * Taquigrafía * / var myArray = {"Grace Kelly": "Filadelfia", "Clint Eastwood": "San Francisco", "Humphrey Bogart": "Nueva York", "Sophia Loren": "Roma", "Ingrid Bergman ":" Stockholm "} / * Longhand * / var myArray = new Array (); myArray ["Grace Kelly"] = "Philadelphia"; myArray ["Clint Eastwood"] = "San Francisco"; myArray ["Humphrey Bogart"] = "Ciudad de Nueva York"; myArray ["Sophia Loren"] = "Roma"; myArray ["Ingrid Bergman"] = "Estocolmo"; 

7. Declara un objeto

La abreviatura de declaración de objeto funciona de manera similar a la de las matrices asociativas. Sin embargo, aquí, no hay pares clave-valor sino pares de propiedad-valor que debe colocar entre llaves {} .

La única diferencia en la sintaxis abreviada es que las propiedades del objeto no están entre comillas ( name, placeOfBirth, age, wasJamesBond en el ejemplo a continuación).

 / * Taquigrafía * / var myObj = {nombre: "Sean Connery", placeOfBirth: "Edimburgo", edad: 86, wasJamesBond: true}; / * Longhand * / var myObj = new Object (); myObj.name = "Sean Connery"; myObj.placeOfBirth = "Edimburgo"; myObj.age = 86; myObj.wasJamesBond = verdadero; 

8. Usa el operador condicional

El operador condicional (ternario) se utiliza con frecuencia como el acceso directo para la instrucción if-else . Consiste en tres partes :

1. la condición
2. qué pasa si la condición es verdadera ( if )
3. ¿Qué sucede si la condición es falsa?

En el siguiente ejemplo, enviamos un mensaje simple (dentro de la variable de message ) a las personas que desean ingresar a un club. Usando la forma abreviada, es solo una línea de código para ejecutar la evaluación .

 var edad = 17; / * Taquigrafía * / var mensaje = edad> = 18? "Permitido": "Denegado"; / * Longhand * / if (age> = 18) {var message = "Allowed"; } else {var message = "Denegado"; } 

Si desea probarlo simplemente copie el código en la consola web (F12 en la mayoría de los navegadores) y modifique el valor de la variable de age varias veces.

9. Verificar presencia

Con frecuencia sucede que necesita verificar si una variable está presente o no . La taquigrafía "si la presencia" te ayuda a hacerlo con mucho menos código.

Tenga en cuenta que la mayoría de los artículos sobre shorthands de JavaScript no dan la forma adecuada a mano, ya que la notación if( myVar ) no solo verifica si la variable no es falsa sino también un puñado de otras cosas. A saber, la variable no puede estar indefinida, vacía, nula y falsa .

 var myVar = 99; / * Taquigrafía * / if (myVar) {console.log ("La variable myVar está definida Y no está vacía Y no es nula Y no es falsa."); } / * Longhand * / if (typeof myVar! == "undefined" && myVar! == "" && myVar! == null && myVar! == 0 && myVar! == false) {console.log ("The myVar la variable se define Y no está vacía Y NO es nula Y no es falsa. "); } 

Puede probar cómo funciona la taquigrafía "si la presencia" al insertar el siguiente fragmento de código en la consola web y cambiar el valor de myVar varias veces.

Para comprender cómo funciona esta taquigrafía, vale la pena probarla con los valores de "" (cadena vacía), false, 0, true, una cadena no vacía (por ejemplo, "Hi" ), un número (por ejemplo, 99 ) y cuando el la variable no está definida (simplemente var myVar; ).

10. Verificar ausencia

La taquigrafía "si la presencia" se puede usar para verificar la ausencia de una variable colocando un signo de exclamación delante de ella . El signo de exclamación es el operador lógico no en JavaScript (y en la mayoría de los lenguajes de programación).

Por lo tanto, con la notación if( !myVar ), puede verificar si la variable myVar no está indefinida, vacía, nula o falsa .

 var myVar; / * Taquigrafía * / if (! MyVar) {console.warn ("La variable myVar no está definida (O) vacía (O) nula (O) falsa."); } / * Longhand * / if (typeof myVar === "undefined" || myVar === "" || myVar === null || myVar === 0 || myVar === false) {console.warn ("La variable myVar no está definida (O) vacía (O) nula (O) falsa"); } 

20 plantillas "muy pronto" que vale la pena esperar

Así que está buscando dar un nuevo aspecto a su sitio de WordPress y está tratando de resolver los problemas a tiempo para 2015; o si tiene una nueva aplicación, producto, compañía o álbum que desea lanzar, y espera generar algo de entusiasmo colocando primero un sitio de Coming Soon . Entonces, vas a necesitar un tema genial para Coming Soon o Under Construction.Cree r

(Consejos de tecnología y diseño)

Sitios web para descargar libros de audio gratuitos - Best Of

Los audiolibros son básicamente grabaciones de audio de sus libros favoritos narrados por un profesional o una celebridad de renombre. Hay muchas ventajas de un audiolibro en un libro impreso e incluso en un libro electrónico. No tiene que leerlo usted mismo, puede escucharlo mientras se ocupa de sus tareas, varias personas pueden escucharlo al mismo tiempo, puede llevar consigo cientos de audiolibros en comparación con los libros impresos y muchos otros beneficios. .

(Consejos de tecnología y diseño)