JavaScript 最佳实践


目录

    显示目录


避免全局变量,避免 new,避免 ==,避免 评估()


避免全局变量

尽量减少全局变量的使用。

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

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

使用局部变量代替,并学习如何使用 关闭。


始终声明局部变量

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

局部变量必须使用var声明, letconst 关键字, 否则它们将成为全局变量。

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


顶部声明

将所有声明放在每个脚本的顶部是一个很好的编码习惯 或函数。

这会:

  • 提供更清晰的代码

  • 提供一个地方来查找局部变量

  • 更容易避免不需要的(隐含的)全局变量

  • 减少不必要的重新声明的可能性

// 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 声明对象

使用 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 声明数组

使用 const 声明数组将防止任何类型的意外更改:

例子

let cars = ["Saab", "Volvo", "BMW"];
cars = 3;    // Changes array to number
const cars = ["Saab", "Volvo", "BMW"];
cars = 3;    // Not possible

不要使用 new Object()

  • 使用 "" 而不是 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()

eval() 函数用于将文本作为代码运行。几乎在所有情况下,它 应该没有必要使用它。

因为它允许任意代码运行,所以它也代表了一种安全性 问题。