二维码
搜索 ×

JavaScript 最佳实践

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

JavaScript 最佳实践

避免全局变量， 避免 ， 避免 ， 避免new``==``eval()

避免全局变量

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

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

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

请改用局部变量，并了解如何使用[闭包]。

始终声明局部变量

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

局部变量必须用var、let或const关键字声明，否则它们将成为全局变量。

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

声明在顶部

将所有声明放在每个脚本的顶部是一种很好的编码做法 或功能。

这将：

  • 提供更简洁的代码

  • 提供查找局部变量的单一位置

  • 更轻松地避免不需要的（隐含的）全局变量

  • 减少不必要的重新申报的可能性

1
2
3
4
5
6
7
8
9
10
11
// 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;

这也适用于循环变量：

1
for (let i = 0; i < 5; i++) {

初始化变量

在声明变量时初始化变量是一种很好的编码做法。

这将：

  • 提供更简洁的代码

  • 提供初始化变量的单一位置

  • 避免未定义的值

1
2
3
4
5
6
7
8
// 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声明对象将防止任何意外的类型更改：

1
2
3
4
5
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声明数组可以防止任何意外的类型更改：

1
2
3
4
5
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()
1
2
3
4
5
6
7
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

谨防自动类型转换

JavaScript是松散类型的。

变量可以包含所有数据类型。

变量可以更改其数据类型：

1
2
let x = "Hello";     // typeof x is a string  
x = 5;               // changes typeof x to a number

请注意，数字可能会意外转换为字符串或NaN（不是 数字）。

在进行数学运算时，JavaScript可以将数字转换为字符串：

1
2
3
4
5
6
7
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

从字符串中减去字符串，不会生成错误但返回NaN（不是数字）：

1
"Hello" - "Dolly"    // returns NaN

使用 === 比较

==比较运算符始终在比较之前进行转换（转换为匹配类型）。

===运算符强制比较值和类型：

1
2
3
4
5
6
7
0 == "";        // true  
1 == "1";       // true  
1 == true;      // true  

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

使用参数默认值

如果使用缺少的参数调用函数，则缺少的参数的值 参数设置为undefined 。

未定义的值可能会破坏代码。分配默认值是个好习惯 值添加到参数中。

1
2
3
4
5
function myFunction(x, y) {  
  if (y === undefined) {  
    y = 0;  
  }  
}

[ECMAScript 2015] 允许函数定义中的默认参数：

1
function (a=1, b=1) { /*function code*/ }

在函数参数中阅读有关[函数]参数和参数的更多信息

以默认值结束交换机

始终以默认值default结束switch语句。即使你认为没有必要。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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";  
}

避免将 Number、String 和 Boolean 作为对象

始终将数字、字符串或布尔值视为原始值。不作为对象。

将这些类型声明为对象，会减慢执行速度， 并产生令人讨厌的副作用：

1
2
3
let x = "John";               
let y = new String("John");  
(x === y) // is false because x is a string and y is an object.

甚至更糟：

1
2
3
let x = new String("John");               
let y = new String("John");  
(x == y) // is false because you cannot compare objects.

避免使用 eval()

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

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

推荐教程