JavaScript Bästa Praktiken

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

避免全局变量

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

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

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

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

始终声明局部变量

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

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

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

在顶部声明

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

Fördelen med detta är:

  • 获得更整洁的代码
  • 提供了查找局部变量的好位置
  • 更容易避免不需要的全局变量
  • 减少不需要的重新声明的可能性
// 在顶部声明
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）。

初始化变量

Det är en bra vana att initialisera variabler när du deklarerar dem.

Fördelen med detta är:

  • Mer ordnad kod
  • Initialisera variabler på en särskild plats
  • Undvik okända värden
// Förklara och initialisera i början
var firstName = "",
    lastName  = "",
    price = 0,
    discount = 0,
    fullPrice  = 0,
    myArray = [],
    myObject = {};

Variabelinitialisering gör det möjligt för oss att förstå förväntad användning och förväntad datatyp.

Deklarera inte nummer, strängar eller booleanobjekt

Var alltid medveten om att nummer, strängar eller booleanvärden är ursprungliga värden, inte objekt.

Om du deklarerar dessa typer som objekt kommer det att försena körningen och skapa irriterande biverkningar:

Exempel

var x = "Bill";             
var y = new String("Bill");
(x === y) // Resultatet är false, eftersom x är en sträng och y är ett objekt.

Prova själv

eller ännu värre:

Exempel

var x = new String("Bill");             
var y = new String("Bill");
(x == y) // Resultatet är false, eftersom du inte kan jämföra objekt.

Prova själv

Använd inte new Object()

  • Använd {} istället för new Object()
  • Använd "" istället för new String()
  • Använd 0 istället för new Number()
  • Använd false istället för new Boolean()
  • Använd [] istället för new Array()
  • Använd /()/ istället för new RegExp()
  • Använd function (){} istället för new Function()

Exempel

var x1 = {};           // Ny objekt
var x2 = "";           // Ny ursprunglig sträng
var x3 = 0;            // Ny ursprunglig numerär
var x4 = false;        // Ny ursprunglig布尔值
var x5 = [];           // Ny array
var x6 = /()/;         // Ny reguljärt uttryck
var x7 = function(){}; // Ny funktion

Prova själv

varse automatisk typomvandling

Vänligen var medveten om att nummer kan oavsiktligt omvandlas till strängar eller NaN（Not a Number）.

JavaScript är en slapp typ. Variabler kan innehålla olika datatyper och kan ändra sin datatyp:

Exempel

var x = "Hello";     // typeof x är sträng
x = 5;               // ändra typeof x till numerisk

Prova själv

om du utför matematiska operationer, kan JavaScript konvertera tal till strängar:

Exempel

var x = 5 + 7;       // x.valueOf() är 12, typeof x är numerisk
var x = 5 + "7";     // x.valueOf() är 57, typeof x är sträng
var x = "5" + 7;     // x.valueOf() är 57, typeof x är sträng
var x = 5 - 7;       // x.valueOf() är -2, typeof x är numerisk
var x = 5 - "7";     // x.valueOf() är -2, typeof x är numerisk
var x = "5" - 7;     // x.valueOf() är -2, typeof x är numerisk
var x = 5 - "x";     // x.valueOf() är NaN, typeof x är numerisk

Prova själv

att subtrahera strängar med varandra orsakar inte ett fel utan returnerar NaN（Not a Number）：

Exempel

"Hello" - "Dolly"    // returnerar NaN

Prova själv

Använd === för jämförelse

== jämförelseoperatorer konverterar alltid typerna innan de jämförs (för att matcha typerna).

=== operatorer jämför alltid värden och typer tvingande:

Exempel

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

Prova själv

Använd Parameter Defaults

om en parameter saknas när funktionen anropas, så kommer värdet för den frånvarande parametern att sättas till undefined。

undefined värden kan förstöra din kod. Att sätta standardvärden för parametrar är en bra vana.

Exempel

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

Prova själv

LäsFunktionens parametrarLäs mer om funktionens parametrar i detta kapitel.

Använd default för att avsluta switch

Använd default för att avsluta din switch Sats. Även om du tror att du inte behöver det.

Exempel

switch (new Date().getDay()) {
    fall 0:
        day = "Lördag";
        break;
    fall 1:
        day = "Söndag";
         break;
    fall 2:
        day = "Tisdag";
         break;
    fall 3:
        day = "Måndag";
         break;
    fall 4:
        day = "Onsdag";
         break;
    fall 5:
        day = "Torsdag";
         break;
    fall 6:
        day = "Fredag";
         break;
    default:
        day = "Okänd";
}

Prova själv

Undvik att använda eval()

eval() Funktioner används för att tillåta text som kod. I nästan alla fall är det inte nödvändigt att använda det.

Eftersom det tillåter att vilket som helst kod körs, innebär det också säkerhetsproblem.