20个实用的JavaScript开发技巧与最佳实践

JavaScript应用与测试环境

JavaScript作为一门广受欢迎的编程语言，其应用范围极广。开发者不仅利用它构建精美的Web应用程序，还将其用于移动应用开发（如PhoneGap或Appcelerator）以及服务端实现（如NodeJS、Wakanda等）。此外，许多初学者也将JavaScript作为入门语言，用于实现弹出窗口等基础交互功能。

本文将分享一系列JavaScript开发中的实用技巧与最佳实践。无论您是前端工程师还是服务端开发者，这些内容都能为您提供切实帮助，助您优化代码并提升开发效率。

文中提供的代码片段均已在最新版Chrome 30浏览器中测试通过，该浏览器采用V8 JavaScript引擎（版本为V8 3.20.17.15）。

变量声明与类型比较规范

1. 首次给变量赋值时，务必使用var关键字

若对未声明的变量直接赋值，该变量将自动成为全局变量。在JavaScript开发中，应尽量避免使用全局变量，以防止命名冲突和内存泄漏。

2. 使用===替换==

同时，请永远不要使用=或!=进行相等性判断。

[10] === 10 // is false
[10] == 10 // is true
'10' == 10 // is true
'10' === 10 // is false
[] == 0 // is true
[] === 0 // is false
'' == false // is true but true == "a" is false
'' === false // is false

代码规范与构造函数

3. 使用分号作为行终止符

在语句末尾使用分号是一个良好的编程习惯。尽管JavaScript解析器在大多数情况下会自动插入分号，且忘记添加时编译器不会报错，但显式使用分号能提高代码的可读性和安全性。

4. 创建构造函数

function Person(firstName, lastName){
this.firstName = firstName;
this.lastName = lastName;
}    
  
var Saad = new Person("Saad", "Mousliki");

类型检查与自调用函数

5. 谨慎使用typeof、instanceof和constructor

var arr = ["a", "b", "c"];
typeof arr; // return "object"
arr instanceof Array // true
arr.constructor(); //[]

6. 创建自调用函数

这通常被称为自调用匿名函数或立即调用函数表达式（IIFE）。函数在创建时会立即执行，如下例所示：

(function(){
// some private code that will be executed automatically
})();    
(function(a,b){
var result = a+b;
return result;
})(10,20)

数组随机操作与生成

7. 从数组中随机获取一项

var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];
  
var randomItem = items[Math.floor(Math.random() * items.length)];

8. 在特定范围内生成随机数

这段代码非常通用，适用于需要生成测试数据的情况，例如在最小值和最大值之间获取一个随机值。

var x = Math.floor(Math.random() * (max - min + 1)) + min;

9. 生成0到最大数之间的一组随机数

var numbersArray = [] , max = 100;
  
for( var i=1; numbersArray.push(i++) < max;); // numbers = [0,1,2,3 ... 100]

10. 生成一组随机字母数字字符

function generateRandomAlphaNum(len) {
var rdmstring = "";
for( ; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
return rdmString.substr(0, len);
  
}  

数组排序与字符串处理

11. 打乱数字数组

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
numbers = numbers.sort(function(){ return Math.random() - 0.5});
/* the array numbers will be equal for example to [120, 5, 228, -215, 400, 458, -85411, 122205] */

12. 字符串trim函数

trim函数用于删除字符串首尾的空白字符，该功能在Java、C#、PHP等多种语言中均有实现。

String.prototype.trim = function(){return this.replace(/^\s+|\s+$/g, "");};

数组合并与参数转换

13. 数组追加

var array1 = [12 , "foo" , {name "Joe"} , -2458];
  
var array2 = ["Doe" , 555 , 100];
Array.prototype.push.apply(array1, array2);
/* array1 will be equal to [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */

14. 将参数对象转换为数组

var argArray = Array.prototype.slice.call(arguments);

类型验证与多Frame处理

15. 验证给定参数是否为数字

function isNumber(n){
return !isNaN(parseFloat(n)) && isFinite(n);
}  

16. 验证给定参数是否为数组

function isArray(obj){
return Object.prototype.toString.call(obj) === '[object Array]' ;
}  

注意，如果toString()方法被重写，您将无法得到预期结果。或者您可以这样写：

Array.isArray(obj); // its a new Array method

同样，如果您使用多个frames，可以使用instanceof，但如果内容过多，结果同样会出错。

var myFrame = document.createElement('iframe');
document.body.appendChild(myFrame);
  
var myArray = window.frames[window.frames.length-1].Array;
var arr = new myArray(a,b,10); // [a,b,10]
  
// instanceof will not work correctly, myArray loses his constructor
// constructor is not shared between frames
arr instanceof Array; // false

数组极值与长度管理

17. 从数字数组中获取最大值和最小值

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
var maxInNumbers = Math.max.apply(Math, numbers);
var minInNumbers = Math.min.apply(Math, numbers);

18. 清空数组

var myArray = [12 , 222 , 1000 ];
myArray.length = 0; // myArray will be equal to [].

19. 避免使用delete从数组中删除项目

开发者可以使用splice来代替delete删除数组项。与其保留未定义的项目，不如使用splice进行替换。

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ];
items.length; // return 11
delete items[3]; // return true
items.length; // return 11
/* items will be equal to [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */

也可以使用splice方法：

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ];
items.length; // return 11
items.splice(3,1) ;
items.length; // return 10
/* items will be equal to [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */

delete方法应当用于删除对象属性。

20. 使用length属性缩短数组

如前文提到的清空数组，开发者还可以利用length属性来缩短数组。

var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ];
myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].

如果您设置的数组长度值高于当前长度，数组长度将会改变，并且会用未定义的值填充新位置。数组的length属性并非只读。

myArray.length = 10; // the new array length is 10
myArray[myArray.length - 1] ; // undefined