Pratiche ottimali JavaScript

请避免全局变量、new、===、eval()

避免全局变量

请尽量少地使用全局变量。

它包括所有的数据类型、对象和函数。

全局变量和函数可被其他脚本覆盖。

请使用局部变量替代，并学习如何使用闭包。

始终声明局部变量

所有在函数中使用的变量应该被声明为局部变量。

局部变量必须通过 var 关键词来声明，否则它们将变成全局变量。

严格模式不允许未声明的变量。

在顶部声明

一项好的编码习惯是把所有声明放在每段脚本或函数的顶部。

I vantaggi di ciò sono:

  • 获得更整洁的代码
  • 提供了查找局部变量的好位置
  • 更容易避免不需要的全局变量
  • 减少不需要的重新声明的可能性
// 在顶部声明
var firstName, lastName, price, discount, fullPrice;
// 稍后使用
firstName = "Bill";
lastName = "Gates";
price = 19.90;
discount = 0.10;
fullPrice = price * 100 / discount;

也可以用于循环变量：

// 在顶部声明
var i;
// 稍后使用
for (i = 0; i < 5; i++)  {

默认地，JavaScript 会将所有声明移至顶部（JavaScript hoisting）。

初始化变量

L'inizializzazione delle variabili quando le dichiari è un'abitudine buona.

I vantaggi di ciò sono:

  • Codice più pulito
  • Inizializza le variabili in posizioni separate
  • Evita valori non definiti
// Dichiarazione e inizializzazione all'inizio
var firstName = "",
    lastName  = "",
    price = 0,
    discount = 0,
    fullPrice  = 0,
    myArray = [],
    myObject = {};

L'inizializzazione delle variabili ci permette di comprendere l'uso previsto e il tipo di dati previsto.

Non dichiarare oggetti numerici, stringhe o booleani

Sempre considera i numeri, le stringhe o i valori booleani come valori primitivi, non oggetti.

Se dichiari questi tipi come oggetti, può rallentare l'esecuzione e produrre effetti collaterali fastidiosi:

Esempio

var x = "Bill";             
var y = new String("Bill");
(x === y) // Il risultato è false, perché x è una stringa e y è un oggetto.

Prova personalmente

O peggio ancora:

Esempio

var x = new String("Bill");             
var y = new String("Bill");
(x == y) // Il risultato è false, perché non puoi confrontare gli oggetti.

Prova personalmente

Non usare new Object()

  • Usa {} al posto di new Object()
  • Usa "" al posto di new String()
  • Usa 0 al posto di new Number()
  • Usa false al posto di new Boolean()
  • Usa [] al posto di new Array()
  • Usa /()/ al posto di new RegExp()
  • Usa function (){} al posto di new Function()

Esempio

var x1 = {};           // Nuovo oggetto
var x2 = "";           // Nuovo valore stringa primitiva
var x3 = 0;            // Nuovo valore numerico primitivo
var x4 = false;        // Nuovo valore booleano primitivo
var x5 = [];           // Nuovo oggetto array
var x6 = /()/;         // Nuovo espressione regolare
var x7 = function(){}; // Nuovo oggetto funzione

Prova personalmente

Ricorda la conversione automatica di tipo

Ricorda che i numeri possono essere convertiti accidentalmente in stringhe o NaN（Non un numero）。

JavaScript è di tipo debole. Le variabili possono contenere diversi tipi di dati e possono cambiare il loro tipo di dati:

Esempio

var x = "Hello";     // typeof x è string
x = 5;               // Modifica typeof x a number

Prova personalmente

Se si eseguono operazioni matematiche, JavaScript può convertire i numeri in stringhe:

Esempio

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

Prova personalmente

Sottrarre stringhe non produce errori ma restituisce NaN（Non un numero）：

Esempio

"Hello" - "Dolly"    // Restituisce NaN

Prova personalmente

Usa === per confrontare

== I confronti sempre prima di fare la conversione di tipo (per adattarsi al tipo).

=== Gli operatori forzano la comparazione tra valore e tipo:

Esempio

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

Prova personalmente

Utilizzo dei valori di default dei parametri

Se manca un argomento durante la chiamata della funzione, il valore di questo argomento mancante verrà impostato a undefined。

undefined Il valore può rompere il tuo codice. Abituarsi a impostare valori di default per i parametri è una buona abitudine.

Esempio

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

Prova personalmente

Leggi questa sezioneParametri delle funzioniQuesta sezione per saperne di più sui parametri delle funzioni.

chiudi il switch con default

Usa default per chiudere il tuo switch Espressione. Anche se pensi di non averne bisogno.

Esempio

switch (new Date().getDay()) {
    case 0:
        day = "Sunday";
        break;
    case 1:
        day = "Monday";
         break;
    case 2:
        day = "Tuesday";
         break;
    case 3:
        day = "Wednesday";
         break;
    case 4:
        day = "Thursday";
         break;
    case 5:
        day = "Friday";
         break;
    case 6:
        day = "Saturday";
         break;
    default:
        day = "Unknown";
}

Prova personalmente

Evitare l'uso di eval()

eval() La funzione serve a trattare il testo come codice. In quasi tutti i casi, non è necessario utilizzarla.

Poiché permette l'esecuzione di codice arbitrario, ciò significa anche problemi di sicurezza.