Undvik globala variabler, undvik new
, undvik ==
, undvik eval()
Minimera användningen av globala variabler.
Detta inkluderar alla datatyper, objekt och funktioner.
Globala variabler och funktioner kan skrivas över av andra skript.
Använd lokala variabler istället och lär dig hur du använder dem stängningar.
Alla variabler som används i en funktion ska deklareras som lokala variabler.
Lokala variabler måste deklareras med var
, nyckelordet let
eller const
, annars blir de globala variabler.
Strikt läge tillåter inte odeklarerade variabler.
Det är en bra kodningspraxis att placera alla deklarationer överst i varje skript eller funktion.
Det här kommer att:
Ge renare kod
Ge en enda plats att leta efter lokala variabler
Gör det lättare att undvika oönskade (underförstådda) globala variabler
Minska risken för oönskade omdeklarationer
// Declare at the beginning
let firstName, lastName, price, discount, fullPrice;
// Use later
firstName = "John";
lastName = "Doe";
price = 19.90;
discount = 0.10;
fullPrice = price - discount;
Detta gäller även loopvariabler:
for (let i = 0; i < 5; i++)
{
Det är en bra kodningspraxis att initiera variabler när du deklarerar dem.
Det här kommer att:
Ge renare kod
Ange en enda plats för att initiera variabler
Undvik odefinierade värden
// Declare and initiate at the beginning
let firstName = "";
let lastName = "";
let price = 0;
let discount = 0;
let fullPrice = 0,
const myArray = [];
const myObject = {};
Att initiera variabler ger en uppfattning om den avsedda användningen (och avsedd datatyp).
Att deklarera objekt med const kommer att förhindra oavsiktlig typändring:
let car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat"; // Changes object to string
const car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat"; // Not possible
Att deklarera arrayer med const förhindrar alla oavsiktliga förändringar av typ:
let cars = ["Saab", "Volvo", "BMW"];
cars = 3; // Changes array to number
const cars = ["Saab", "Volvo", "BMW"];
cars = 3; // Not possible
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 Object()
Använd []
istället för new Array()
Använd /()/
istället för new RegExp()
Använd funktion(){}
istället för new Function()
let x1 = ""; // new primitive string
let x2 = 0; // new primitive number
let x3 = false; // new primitive boolean
const x4 = {}; // new object
const x5 = []; // new array object
const x6 = /()/; // new regexp object
const x7 = function(){}; // new function object
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Literal Constructors</h2>
<p id="demo"></p>
<script>
let x1 = "";
let x2 = 0;
let x3 = false;
const x4 = {};
const x5 = [];
const x6 = /()/;
const x7 = function(){};
document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>";
</script>
</body>
</html>
JavaScript är löst skrivet.
En variabel kan innehålla alla datatyper.
En variabel kan ändra sin datatyp:
let x = "Hello"; // typeof x is a string
x = 5; // changes typeof x to a number
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Variables</h2>
<p>A variable can chang its type. In this example x is first a string then a number:</p>
<p id="demo"></p>
<script>
let x = "Hello";
x = 5;
document.getElementById("demo").innerHTML = typeof x;
</script>
</body>
</html>
Tänk på att siffror av misstag kan konverteras till strängar eller NaN
(Inte en Siffra).
När du gör matematiska operationer kan JavaScript konvertera tal till strängar:
let x = 5 + 7; // x.valueOf() is 12, typeof x is a number
let x = 5 + "7"; // x.valueOf() is 57, typeof x is a string
let x = "5" + 7; // x.valueOf() is 57, typeof x is a string
let x = 5 - 7; // x.valueOf() is -2, typeof x is a number
let x = 5 - "7"; // x.valueOf() is -2, typeof x is a number
let x = "5" - 7; // x.valueOf() is -2, typeof x is a number
let x = 5 - "x"; // x.valueOf() is NaN, typeof x is a number
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Variables</h2>
<p>Remove the comment (at the beginning of the lines) to test each case:</p>
<p id="demo"></p>
<script>
let x = 5;
//x = 5 + 7; // x.valueOf() is 12, typeof x is a number
//x = 5 + "7"; // x.valueOf() is 57, typeof x is a string
//x = "5" + 7; // x.valueOf() is 57, typeof x is a string
//x = 5 - 7; // x.valueOf() is -2, typeof x is a number
//x = 5 - "7"; // x.valueOf() is -2, typeof x is a number
//x = "5" - 7; // x.valueOf() is -2, typeof x is a number
//x = 5 - "x"; // x.valueOf() is NaN, typeof x is a number
document.getElementById("demo").innerHTML = x.valueOf() + " " + typeof x;
</script>
</body>
</html>
Att subtrahera en sträng från en sträng, gör det inte genererar ett fel men returnerar NaN
(inte ett nummer):
"Hello" - "Dolly" // returns NaN
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Variables</h2>
<p>Subtracting a string from a string, does not generate an error but returns NaN (Not a Number):</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello" - "Dolly";
</script>
</body>
</html>
Jämförelseoperatorn ==
konverterar alltid (till matchningstyper) före jämförelse.
Operatorn ===
tvingar fram jämförelser av värden och typ:
0 == ""; // true
1 == "1"; // true
1 == true; // true
0 === ""; // false
1 === "1"; // false
1 === true;
// false
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comparisons</h2>
<p>Remove the comment (at the beginning of each line) to test each case:</p>
<p id="demo"></p>
<script>
let x;
//x = (0 == ""); // true
//x = (1 == "1"); // true
//x = (1 == true); // true
//x = (0 === ""); // false
//x = (1 === "1"); // false
//x = (1 === true); // false
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Om en funktion anropas med ett saknat argument, värdet på det saknade argument är satt till odefinierad
.
Odefinierade värden kan bryta din kod. Det är en god vana att tilldela standard värden till argument.
function myFunction(x, y) {
if (y === undefined) {
y = 0;
}
}
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Setting a default value to a function parameter.</p>
<p id="demo"></p>
<script>
function myFunction(x, y) {
if (y === undefined) {
y = 0;
}
return x * y;
}
document.getElementById("demo").innerHTML = myFunction(4);
</script>
</body>
</html>
ECMAScript 2015 tillåter standardparametrar i funktionsdefinitionen:
function (a=1, b=1) { /*function code*/ }
Läs mer om funktionsparametrar och argument på Funktionsparametrar
Avsluta alltid dina switch
-satser med en standard
. Även om du tror att det finns inget behov av det.
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 själv →
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
let day;
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";
}
document.getElementById("demo").innerHTML = "Today is " + day;
</script>
</body>
</html>
Behandla alltid siffror, strängar eller booleaner som primitiva värden. Inte som föremål.
Deklarera dessa typer som objekt, saktar ner exekveringshastigheten, och ger otäcka biverkningar:
let x = "John";
let y = new String("John");
(x === y) // is false because x is a string and y is an object.
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Objects</h2>
<p>Never create strings as objects.</p>
<p>Strings and objects cannot be safely compared.</p>
<p id="demo"></p>
<script>
let x = "John"; // x is a string
let y = new String("John"); // y is an object
document.getElementById("demo").innerHTML = (x === y);
</script>
</body>
</html>
Eller ännu värre:
let x = new String("John");
let y = new String("John");
(x == y) // is false because you cannot compare objects.
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Objects</h2>
<p>Never create strings as objects.</p>
<p>JavaScript cannot compare objects.</p>
<p id="demo"></p>
<script>
let x = new String("John");
let y = new String("John");
document.getElementById("demo").innerHTML = (x == y);
</script>
</body>
</html>
Funktionen eval()
används för att köra text som kod. I nästan alla fall är det borde inte vara nödvändigt att använda den.
Eftersom den tillåter att godtycklig kod körs, representerar den också en säkerhet problem.