Compartilhe 12 dicas de javascript muito práticas

Neste artigo, compartilharemos com você 12 dicas sobre JavaScript. Essas dicas podem ajudá -lo a resolver alguns problemas em seu trabalho real.

Use o !! operador para converter o valor booleano

Às vezes, precisamos verificar se existe uma variável ou verificar se o valor tem um valor válido e, se existe, ele retorna true. Para fazer essa verificação, podemos usar o !! O operador para implementá -lo é muito conveniente e simples. Para variáveis, você pode usar !! Variável para detecção. Enquanto o valor da variável for: 0, nulo, "", indefinido ou NAN, ele retornará falso, caso contrário, ele retornará verdadeiro. Por exemplo, o exemplo a seguir:

 function conta (dinheiro) {this.cash = Cash; this.HasMoney = !! Cash; } var à conta = nova conta (100,50); console.log (conta.cash); // 100.50 console.log (conta.hasmoney); // true var stawardAccount = nova conta (0); console.log (emptyAccount.Cash); // 0 console.log (emptyaccount.hasmoney); // false

Neste exemplo, desde que o valor da conta.

Use + para converter strings em números

Este truque é muito útil. É muito simples e pode ser convertido em números, cruzando os dados da string. No entanto, é adequado apenas para dados de string, caso contrário, a NAN será retornada, como o exemplo a seguir:

 função tonumber (strNumber) {return +strNumber; } console.log (tonumber ("1234")); // 1234 console.log (tonumber ("ACB")); // nan

Isso também funciona para a data, neste caso, ele retornará um número de carimbo de data / hora:

Copie o código da seguinte forma: console.log (+new Date ()) // 1461288164385 e símbolo condicional

Se você tem um código como este:

 if (Conected) {Login (); }

Você também pode abreviar variáveis e usar && e concatená -las juntas. Por exemplo, o exemplo acima pode ser abreviado da seguinte forma:

A cópia do código é a seguinte: Conected && Login ();

Se algumas propriedades ou funções existirem em um objeto, você também poderá fazer a detecção, conforme mostrado no código a seguir:

A cópia do código é a seguinte: User && user.login ();

Use || operador

Existe um recurso de parâmetro padrão no ES6. Para simular esse recurso em navegadores mais antigos, o || O operador pode ser usado e o valor padrão será passado como um segundo parâmetro. Se o valor retornado pelo primeiro parâmetro for falso, o segundo valor será considerado um valor padrão. Como no exemplo seguinte:

 função user (nome, idade) {this.name = nome || "Oliver Queen"; this.age = idade || 27; } var user1 = new User (); console.log (user1.name); // Oliver Queen Console.log (user1.age); // 27 var user2 = novo usuário ("Barry Allen", 25); console.log (user2.name); // barry allen console.log (user2.age); // 25

Array de cache.length in loop

Esse truque é muito simples, e isso terá um impacto muito grande no desempenho ao lidar com um grande loop de matriz. Basicamente, todos escreverão uma variedade de iterações síncronas como esta:

 for (var i = 0; i <array.length; i ++) {console.log (array [i]); }

Se for uma pequena matriz, isso é ótimo, se você estiver lidando com uma grande matriz, esse código recalculará o tamanho da matriz em cada iteração, o que causará algum atraso. Para evitar esse fenômeno, o Array.length pode ser usado como um cache:

 var comprimento = array.length; for (var i = 0; i <comprimento; i ++) {console.log (array [i]); }

Você também pode escrever assim:

 for (var i = 0, comprimento = array.length; i <comprimento; i ++) {console.log (array [i]); }

Detectar propriedades em objetos

Esse truque é útil quando você precisa detectar se existem algumas propriedades e evitar funções ou propriedades indefinidas. Se você planeja personalizar algum código de navegador compatível com cruzamento, também poderá usar esta dica. Por exemplo, você deseja usar o document.QuerySelector () para selecionar um ID e torná -lo compatível com os navegadores IE6, mas essa função não existe nos navegadores do IE6, por isso é muito útil usar esse operador para detectar se essa função existe, como o exemplo a seguir:

 if ('QuerySelector' no documento) {document.QuerySelector ("#id"); } else {document.getElementById ("id"); }

Neste exemplo, se a função QuerySelector não existir no documento, o documento será chamado.

Obtenha o último elemento na matriz

Array.prototype.slice (BEGIN, END) é usado para obter os elementos da matriz entre iniciar e end. Se você não definir o parâmetro final, o valor do comprimento padrão da matriz será considerado como o valor final. Mas alguns alunos podem não saber que essa função também pode aceitar valores negativos como parâmetros. Se você definir um valor negativo como o valor do início, poderá obter o último elemento da matriz. como:

 var array = [1,2,3,4,5,6]; console.log (Array.slice (-1)); // [6] console.log (Array.slice (-2)); // [5,6] console.log (Array.slice (-3)); // [4,5,6]

Truncamento da matriz

Esse truque é usado principalmente para bloquear o tamanho da matriz e é muito útil se usado para excluir alguns elementos na matriz. Por exemplo, sua matriz possui 10 elementos, mas você deseja apenas os cinco primeiros elementos, então você pode truncar a matriz por Array.length = 5. Como no exemplo seguinte:

 var array = [1,2,3,4,5,6]; console.log (Array.length); // 6 Array.Length = 3; console.log (Array.length); // 3 console.log (matriz); // [1,2,3]

Substitua tudo

A função string.replace () permite que você use strings ou expressões regulares para substituir strings. Essa função em si substitui apenas a primeira string. No entanto, você pode usar /g em expressões regulares para simular a função replacEalll ():

 var string = "John John"; console.log (string.replace (/hn/, "ana")); // "Joana John" Console.log (String.replace (/hn/g,, "Ana")); // "Joana Joana"

Mesclar matrizes

Se você deseja mesclar duas matrizes, geralmente usará a função Array.concat ():

 var Array1 = [1,2,3]; var Array2 = [4,5,6]; console.log (Array1.Concat (Array2)); // [1,2,3,4,5,6];

Essa função não é adequada para mesclar duas matrizes grandes, porque consumirá muita memória para armazenar matrizes recém -criadas. Nesse caso, você pode usar o Array.pus (). Aplicar (ARR1, ARR2) para criar uma nova matriz. Este método não é usado para criar uma nova matriz, apenas combina o primeiro e o segundo número enquanto reduz o uso da memória:

 var Array1 = [1,2,3]; var Array2 = [4,5,6]; console.log (array1.push.apply (array1, array2)); // [1,2,3,4,5,6];

Converter nodelist em uma matriz

Se você executar a função Document.QuerySelectorAll ("P"), ele poderá retornar uma matriz de elementos DOM, ou seja, o objeto Nodelist. Mas esse objeto não possui as funções de função das matrizes, como Sort (), Reduce (), map (), filtro (), etc. Para que essas funções de função da matriz nativa sejam usadas nelas, a lista de nós precisa ser convertida em uma matriz. Você pode usar [] .slice.call (elementos) para implementar:

 var elements = document.QuerySelectorAll ("p"); // nodelist var ArrayElements = [] .slice.call (elementos); // agora a lista de nodelas é uma matriz var ArrayElements = Array.From (Elements); // Esta é outra maneira de converter o NodElist para a matriz

Encolhimento de elementos de matriz

Para a mudança de elementos da matriz, não há necessidade de usar bibliotecas externas, como Lodash, basta fazer isso:

 var lista = [1,2,3]; console.log (list.sort (function () {math.random () - 0,5})); // [2,1,3]

Resumir

Agora você aprendeu algumas dicas úteis de JavaScript. Espero que essas dicas possam ajudá -lo a resolver alguns problemas no trabalho, ou este artigo será útil para você. Se você tiver algumas dicas de JavaScript excelentes, compartilhe -as conosco nos comentários.