Práticas Recomendadas JavaScript

Evite variáveis globais,new,===,eval()

Evitar variáveis globais

Tente usar o mínimo possível de variáveis globais.

Inclui todos os tipos de dados, objetos e funções.

Variáveis globais e funções podem ser substituídas por outros scripts.

Use variáveis locais em substituição e aprenda a usá-lasEncerramento。

Sempre declarar variáveis locais

Todas as variáveis usadas dentro da função devem ser declaradas comoLocaisVariáveis

Variáveis locaisÉ necessárioPelo var Palavras-chave para declarar, senão elas se tornarão variáveis globais.

O modo estrito não permite variáveis não declaradas.

Declarar no topo

Um bom hábito de codificação é colocar todas as declarações no topo de cada trecho de código ou função.

Os benefícios disso são:

  • Obter um código mais limpo
  • Oferece um bom local para encontrar variáveis locais
  • Mais fácil evitar variáveis globais desnecessárias
  • Reduzir a possibilidade de declarações desnecessárias
// Declarar no topo
var firstName, lastName, price, discount, fullPrice;
// Usar mais tarde
firstName = "Bill";
lastName = "Gates";
price = 19.90;
discount = 0.10;
fullPrice = price * 100 / discount;

Também pode ser usado para variáveis de loop:

// Declarar no topo
var i;
// Usar mais tarde
for (i = 0; i < 5; i++)  {

Por padrão, o JavaScript move todas as declarações para o topo (hoisting do JavaScript).

Inicializar variáveis

O hábito de inicializar variáveis ao declará-las é uma boa prática.

Os benefícios disso são:

  • Código mais limpo
  • Inicialize variáveis em locais separados
  • Evite valores não definidos
// Declare e inicialize no início
var firstName = "",
    lastName  = "",
    price = 0,
    discount = 0,
    fullPrice  = 0,
    myArray = [],
    myObject = {};

A inicialização de variáveis nos permite entender o uso esperado e o tipo de dados esperado.

Não declare objetos de números, strings ou booleanos

Sempre veja os números, strings ou booleanos como valores primitivos, não como objetos.

Se você declarar esses tipos como objetos, isso pode atrasar a execução e causar efeitos colaterais desagradáveis:

Exemplo

var x = "Bill";             
var y = new String("Bill");
(x === y) // O resultado é false, porque x é uma string e y é um objeto.

Experimente pessoalmente

ou até pior:

Exemplo

var x = new String("Bill");             
var y = new String("Bill");
(x == y) // O resultado é false, porque você não pode comparar objetos.

Experimente pessoalmente

Não use new Object()

  • Use {} em vez de new Object()
  • Use "" em vez de new String()
  • Use 0 em vez de new Number()
  • Use false em vez de new Boolean()
  • Use [] em vez de new Array()
  • Use /()/ em vez de new RegExp()
  • Use function (){} em vez de new Function()

Exemplo

var x1 = {};           // Novo objeto
var x2 = "";           // Novo valor de string primitivo
var x3 = 0;            // Novo valor numérico primitivo
var x4 = false;        // Novo valor booleano primitivo
var x5 = [];           // Novo objeto de array
var x6 = /()/;         // Nova expressão regular
var x7 = function(){}; // Novo objeto de função

Experimente pessoalmente

tenha em mente a conversão automática de tipos

Tenha em mente que os números podem ser convertidos acidentalmente em strings ou NaN(Não é um número).

JavaScript é um tipo de dados flexível. As variáveis podem conter diferentes tipos de dados e podem mudar seu tipo de dados:

Exemplo

var x = "Hello";     // typeof x é string
x = 5;               // Altere typeof x para number

Experimente pessoalmente

Se realizar operações matemáticas, o JavaScript pode converter números para strings:

Exemplo

var x = 5 + 7;       // x.valueOf() é 12,  typeof x é number
var x = 5 + "7";     // x.valueOf() é 57,  typeof x é string
var x = "5" + 7;     // x.valueOf() é 57,  typeof x é string
var x = 5 - 7;       // x.valueOf() é -2,  typeof x é number
var x = 5 - "7";     // x.valueOf() é -2,  typeof x é number
var x = "5" - 7;     // x.valueOf() é -2,  typeof x é number
var x = 5 - "x";     // x.valueOf() é NaN, typeof x é number

Experimente pessoalmente

Subtrair strings não gera erro, mas retorna NaN（Not a Number）：

Exemplo

"Hello" - "Dolly"    // retorna NaN

Experimente pessoalmente

Use === para comparar

== Os operadores de comparação sempre realizam conversões de tipo antes da comparação (para combinar tipos).

=== Os operadores forçam a comparação entre valores e tipos:

Exemplo

0 == "";        // true
1 == "1";       // true
1 == true;      // true
0 === "";       // false
1 === "1";      // false
1 === true;     // false

Experimente pessoalmente

Using Parameter Defaults

Se falta um parâmetro ao chamar a função, o valor desse parâmetro ausente será configurado como undefined。

undefined O valor padrão pode danificar seu código. Estabelecer valores padrão para parâmetros é um hábito bom.

Exemplo

function myFunction(x, y) {
    if (y === undefined) {
        y = 0;
    }
}

Experimente pessoalmente

Por favor, consulteParâmetros de FunçãoNesta seção, leia mais sobre parâmetros de função.

use default para encerrar switch

Use padrão para encerrar seu switch instrução. Mesmo que você ache que não há necessidade disso.

Exemplo

switch (new Date().getDay()) {
    caso 0:
        day = "Sábado";
        quebrar;
    caso 1:
        day = "Domingo";
         quebrar;
    caso 2:
        day = "Segunda-feira";
         quebrar;
    caso 3:
        day = "Terça-feira";
         quebrar;
    caso 4:
        day = "Quarta-feira";
         quebrar;
    caso 5:
        day = "Quinta-feira";
         quebrar;
    caso 6:
        day = "Sábado";
         quebrar;
    padrão:
        day = "Desconhecido";
}

Experimente pessoalmente

Evite usar eval()

eval() A função é usada para permitir texto como código. Em quase todos os casos, não há necessidade de usá-la.

Devido ao permitimento da execução de código arbitrário, também significa problemas de segurança.