Top 10 shorthands de JavaScript para iniciantes

Shorthands de JavaScript não apenas acelera o processo de codificação, mas também torna os scripts mais curtos, carregamentos de página mais rápidos. Os códigos abreviados são tão válidos quanto suas versões de longo alcance; eles essencialmente representam a mesma coisa-somente em um formato mais compacto. Eles são uma das técnicas mais simples de otimização de código.

Existem vários atalhos de JavaScript, no entanto eles não tem um guia de referência oficial. Alguns são realmente simples, enquanto outros são bastante intimidadores, mesmo para desenvolvedores experientes. Neste artigo, você pode encontrar 10 shorthands de JavaScript para iniciantes com o qual você pode começar com otimização de código e escrever código mais conciso.

1. Números Decimais

Se você regularmente trabalhar com decimais grandes esta taquigrafia pode ser uma dádiva de Deus, já que você não precisa mais digitar todos os zeros, apenas substitua-os pelo e notação. Por exemplo, 1e8 significa a adição de oito zeros após o 1 dígito, é igual a 100000000.

O número depois da carta e indica o número de zeros que vêm depois do (s) dígito (s) antes e. Da mesma forma, 16e4 é a abreviatura de 160000, etc.

 / * Taquigrafia * / var myVar = 1e8; / * Longhand * / var myVar = 100000000;

2. Incremento, decremento

o incremento de taquigrafia é composto de dois + sinais, isso significa que o valor de uma variável deve ser incrementado por um. Da mesma forma, diminuição de taquigrafia consiste em dois - sinais, e isso significa que a variável deve ser decrementado por um.

Estes dois atalhos podem ser usados somente em tipos de dados numéricos. Eles têm um papel indispensável em loops, seu caso de uso mais freqüente é o para laço.

 / * Shorthand * / i ++; j--; / * Longhand * / i = i + 1; j = j-1;

3. Adicionar, distrair, multiplicar, dividir

Há uma abreviação para cada um dos quatro operações matemáticas básicas: adição, distração, multiplicação e divisão. Eles funcionam de forma semelhante aos operadores de incremento e decremento, apenas aqui, você pode alterar o valor de uma variável por qualquer número (não apenas por um).

No exemplo abaixo, o Eu variável é incrementada por 5, j é diminuído por 3, k é multiplicado por 10, e eu é dividido por 2.

 / * Taquigrafia * / i + = 5; j = 3; k * = 10; l / = 2; / * Longhand * / i = i + 5; j = j-3; k = k * 10; l = l / 2;

4. Determinar a posição do personagem

o charAt () método é um dos métodos de string usados com mais freqüência, ele retorna personagem em uma posição especificada (por exemplo, os 5^º caráter de uma corda). Há uma forma abreviada simples que você pode usar: você adiciona o posição do personagem entre colchetes depois da string.

Preste atenção que o charAt () método é base zero. Assim sendo, myString [4] retornará o 5^º personagem na cadeia ("y" no exemplo).

 var myString = "Feliz aniversário"; / * Shorthand * / myString [4]; / * Longhand * / myString.charAt (4);

5. Declarar variáveis em massa

Se você quiser criar mais de uma variável ao mesmo tempo você não precisa digitá-los um por um. É suficiente usar o var (ou deixeipalavra chave apenas uma vez, então você pode apenas listar as variáveis que você deseja criar, separado por uma vírgula.

Com essa abreviação, você pode declarar ambos variáveis indefinidas e variáveis com um valor.

 / * Taquigrafia * / var i, j = 5, k = "bom dia", l, m = falso; / * Longhand * / var i; var j = 5; var k = "bom dia"; var l; var m = false;

6. Declarar uma matriz associativa

Declarar um array em JavaScript é uma tarefa relativamente simples, usando o var myArray = ["apple", "pear", "orange"] sintaxe. Contudo, declarando uma matriz associativa é um pouco mais complicado, como aqui, você não precisa apenas definir os valores, mas também as chaves (no caso de matrizes regulares, as chaves são 0, 1, 2, 3, etc.).

Um array associativo é um coleção de pares de valor-chave. O modo de longhand é declarar o array, depois adicionar cada elemento um por um. No entanto, com a abreviação abaixo, você também pode declarar o array associativo mais todos os seus elementos ao mesmo tempo.

No exemplo abaixo, o myArray matriz associativa atribui seu lugar de nascimento (valores) para pessoas famosas (chaves).

 / * Shorthand * / var myArray = "Grace Kelly": "Filadélfia", "Clint Eastwood": "São Francisco", "Humphrey Bogart": "Nova Iorque", "Sophia Loren": "Roma", "Ingrid Bergman ":" Stockholm " / * Longhand * / var myArray = novo Array (); myArray ["Grace Kelly"] = "Filadélfia"; myArray ["Clint Eastwood"] = "São Francisco"; myArray ["Humphrey Bogart"] = "Nova York"; myArray ["Sophia Loren"] = "Roma"; myArray ["Ingrid Bergman"] = "Estocolmo";

7. Declarar um objeto

A abreviação de declaração de objeto funciona de forma semelhante à de matrizes associativas. No entanto, aqui, não há pares de valor-chave, mas pares de valor de propriedade que você precisa colocar entre as chaves .

A única diferença na sintaxe abreviada é que as propriedades do objeto não são colocadas entre aspas (nome, naturalidade, era, wasJamesBond no exemplo abaixo).

 / * Shorthand * / var myObj = nome: "Sean Connery", placeOfBirth: "Edimburgo", idade: 86, wasJamesBond: true; / * Longhand * / var myObj = novo Objeto (); myObj.name = "Sean Connery"; myObj.placeOfBirth = "Edimburgo"; myObj.age = 86; myObj.wasJamesBond = true;

8. Use o operador condicional

o operador condicional (ternário) é freqüentemente usado como atalho para o if-else declaração. Isso consiste de três partes:

a condição
o que acontece se o condição é verdadeira (E se)
o que acontece se o condição é falsa (outro)

No exemplo abaixo, enviamos uma mensagem simples (dentro do mensagem variável) para pessoas que querem entrar em um clube. Usando a forma abreviada, é apenas uma linha de código para executar a avaliação.

 var idade = 17; / * Shorthand * / var message = age> = 18? "Permitido": "Negado"; / * Longhand * / if (age> = 18) var message = "Permitido";  else var message = "Negado";

Se você quiser testá-lo apenas Copie o código para o console da web (F12 na maioria dos navegadores) e modifique o valor do era variável algumas vezes.

9. Verifique a presença

Acontece freqüentemente que você precisa verificar se uma variável é presente ou não. o “se presença” forma abreviada ajuda você a fazer isso com muito menos código.

Esteja ciente de que a maioria dos artigos sobre taquigrafias em JavaScript não dá a forma correta, if (myVar) A notação não simplesmente verifica se a variável não é falsa, mas também um punhado de outras coisas. Ou seja, a variável não pode ser indefinido, vazio, nulo e falso.

 var myVar = 99; / * Shorthand * / if (myVar) console.log ("A variável myVar está definida AND não está vazia AND não é NULL E não é falsa.");  / * Longhand * / if (tipo de myVar! == "indefinido" && myVar! == "" && myVar! == null && myVar! == 0 && myVar! == false) console.log ("O myVar variável é definida E não é vazia E não nula E não é falsa. ");

Você pode testar como o “se presença” A taquigrafia funciona inserindo o seguinte trecho de código no console da web e mudando o valor de myVar algumas vezes.

Para entender como essa taquigrafia funciona, vale a pena testá-la com os valores de "" (string vazia), falso, 0, verdade, uma sequência não vazia (por exemplo,. "Oi"), um número (por ex.. 99), e quando a variável é indefinida (simplesmente var myVar;).

10. Verifique a ausência

o “se presença” taquigrafia pode ser usada para verificar a ausência de uma variável colocando um ponto de exclamação antes. O ponto de exclamação é o operador não lógico em JavaScript (e na maioria das linguagens de programação).

Portanto, com o if (! myVar) notação, você pode verificar se o myVar variável não é indefinido, vazio, nulo ou falso.

 var myVar; / * Shorthand * / if (! MyVar) console.warn ("A variável myVar é indefinida (OR) vazia (OR) nula (OR) falsa.");  / * Longhand * / if (tipo de myVar === "undefined" || myVar === "" || myVar === null || myVar === 0 || myVar === false) console.warn ("A variável myVar é indefinida (OR) vazia (OR) nula (OR) falsa.");