避免全局变量,避免 new
,避免 ==
,避免 评估()
尽量减少全局变量的使用。
这包括所有数据类型、对象和函数。
全局变量和函数可以被其他脚本覆盖。
使用局部变量代替,并学习如何使用 关闭。
函数中使用的所有变量都应声明为局部变量。
局部变量必须使用var
声明, let
或 const
关键字, 否则它们将成为全局变量。
严格模式不允许未声明的变量。
将所有声明放在每个脚本的顶部是一个很好的编码习惯 或函数。
这会:
提供更清晰的代码
提供一个地方来查找局部变量
更容易避免不需要的(隐含的)全局变量
减少不必要的重新声明的可能性
// 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;
这也适用于循环变量:
for (let i = 0; i < 5; i++)
{
在声明变量时对其进行初始化是一种很好的编码习惯。
这会:
提供更清晰的代码
提供一个地方来初始化变量
避免未定义的值
// Declare and initiate at the beginning
let firstName = "";
let lastName = "";
let price = 0;
let discount = 0;
let fullPrice = 0,
const myArray = [];
const myObject = {};
初始化变量提供了预期用途(和预期数据类型)的想法。
使用 const 声明对象将防止任何类型的意外更改:
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
使用 const 声明数组将防止任何类型的意外更改:
let cars = ["Saab", "Volvo", "BMW"];
cars = 3; // Changes array to number
const cars = ["Saab", "Volvo", "BMW"];
cars = 3; // Not possible
使用 ""
而不是 new String()
使用 0
而不是 new Number()
使用 false
而不是 new Boolean()
使用 {}
而不是 new Object()
使用 []
而不是 new Array()
使用 /()/
代替 new RegExp()
使用 function(){}
而不是 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
自己尝试一下 →
<!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 是松散类型的。
变量可以包含所有数据类型。
变量可以更改其数据类型:
let x = "Hello"; // typeof x is a string
x = 5; // changes typeof x to a number
自己尝试一下 →
<!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>
请注意,数字可能会意外转换为字符串或 NaN
(不是 数字)。
在进行数学运算时,JavaScript 可以将数字转换为字符串:
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
自己尝试一下 →
<!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>
从字符串中减去字符串,并不 生成错误但返回 NaN
(不是数字):
"Hello" - "Dolly" // returns NaN
自己尝试一下 →
<!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>
==
比较运算符始终先转换(到匹配类型) 比较。
===
运算符强制比较值和类型:
0 == ""; // true
1 == "1"; // true
1 == true; // true
0 === ""; // false
1 === "1"; // false
1 === true;
// false
自己尝试一下 →
<!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>
如果调用函数时缺少参数,则缺少的值 参数设置为 未定义
。
未定义的值可能会破坏您的代码。分配默认值是一个好习惯 参数的值。
function myFunction(x, y) {
if (y === undefined) {
y = 0;
}
}
自己尝试一下 →
<!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 允许在函数定义中使用默认参数:
function (a=1, b=1) { /*function code*/ }
在函数参数中阅读有关函数参数和实参的更多信息
始终以 default
结束 switch
语句。即使你认为有 不需要它。
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";
}
自己尝试一下 →
<!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>
始终将数字、字符串或布尔值视为原始值。不作为 对象。
将这些类型声明为对象会降低执行速度, 并产生令人讨厌的副作用:
let x = "John";
let y = new String("John");
(x === y) // is false because x is a string and y is an object.
自己尝试一下 →
<!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>
或者更糟糕的是:
let x = new String("John");
let y = new String("John");
(x == y) // is false because you cannot compare objects.
自己尝试一下 →
<!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>
eval()
函数用于将文本作为代码运行。几乎在所有情况下,它 应该没有必要使用它。
因为它允许任意代码运行,所以它也代表了一种安全性 问题。