45个实用的JavaScript技巧、窍门和最佳实践（转）

时间  2019-11-19 标签 实用 javascript 技巧 窍门 最佳 实践

如你所知，JavaScript是世界上第一的编程语言，它是Web的语言，是移动混合应用（mobile hybrid apps）的语言（好比PhoneGap或者Appcelerator），是服务器端的语言（好比NodeJS或者Wakanda），而且拥有不少其余的实现。同时它也是不少新手的启蒙语言，由于它不但能够在浏览器上显示一个简单的alert信息，并且还能够用来控制一个机器人（使用nodebot，或者nodruino）。掌握JavaScript而且可以写出组织规范并性能高效的代码的开发人员，已经成为人才市场上的猎寻对象。javascript

在这篇文章中，我将分享一组JavaScript的技巧、窍门和最佳实践，这些都是JavaScript程序员应该知晓的，无论他们是使用在浏览器/引擎上，仍是服务器端（SSJS——Service Side JavaScript）JavaScript解释器上。html

【译者注：原文做者总共写了44条（漏写了第3条），译者本身补了一条以为比较重要的技巧。】java

须要注意的是，这篇文章中的代码片断都在最新的Google Chrome（版本号30）上测试过，它使用V8 JavaScript引擎（V8 3.20.17.15）node

1 – 在第一次给一个变量赋值的时候不要忘记使用var关键字git

给一个未定义的变量赋值会致使建立一个全局变量。要避免全局变量。程序员

2 – 使用===，而不是＝＝github

==（或!=）操做符在须要的时候会自动执行类型转换。===（或!==）操做不会执行任何转换。它将比较值和类型，并且在速度上也被认为优于==。web

1
2
3
4
5
6
7
8
[ 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 – 使用闭包实现私有变量（译者添加）编程

1
2
3
4
5
6
7
8
9
10
11
12
function  Person(name, age) {
     this .getName =  function () {  return  name; };
     this .setName =  function (newName) { name = newName; };
     this .getAge =  function () {  return  age; };
     this .setAge =  function (newAge) { age = newAge; };
 
     //未在构造函数中初始化的属性
     var  occupation;
     this .getOccupation =  function () {  return  occupation; };
     this .setOccupation =  function (newOcc) { occupation =
                          newOcc; };
}

4 – 在语句结尾处使用分号数组

在语句结尾处使用分号是一个很好的实践。若是你忘记写了你也不会被警告，由于多数状况下JavaScript解释器会帮你加上分号。

5 – 建立对象的构造函数

1
2
3
4
5
6
function  Person(firstName, lastName){
     this .firstName =  firstName;
     this .lastName = lastName;
}
 
var  Saad =  new  Person( "Saad" ,  "Mousliki" );

6 – 当心使用typeof、instanceof和constructor

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

7 – 建立一个自调用函数（Self-calling Funtion）

这个常常被称为自调用匿名函数（Self-Invoked Anonymous Function）或者即时调用函数表达式（IIFE-Immediately Invoked Function Expression)。这是一个在建立后当即自动执行的函数，一般以下：

1
2
3
4
5
6
7
( function (){
     // some private code that will be executed automatically
})();
( function (a,b){
     var  result = a+b;
     return  result;
})( 10 , 20 )

8- 从数组中获取一个随机项

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

9 – 在特定范围内获取一个随机数

这个代码片断在你想要生成测试数据的时候很是有用，好比一个在最小最大值之间的一个随机薪水值。

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

10 – 在0和设定的最大值之间生成一个数字数组

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

11 – 生成一个随机的数字字母字符串

1
2
3
4
5
function  generateRandomAlphaNum(len) {
     var  rdmstring =  "" ;
     for ( ; rdmString.length &lt; len; rdmString  += Math.random().toString( 36 ).substr( 2 ));
     return   rdmString.substr( 0 , len);
}

【译者注：特地查了一下Math.random()生成0到1之间的随机数，number.toString(36)是将这个数字转换成36进制（0-9，a-z），最后substr去掉前面的“0.”字符串】

12 – 打乱一个数字数组

1
2
3
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]  */

13 – String的trim函数

在Java、C#、PHP和不少其余语言中都有一个经典的 trim 函数，用来去除字符串中的空格符，而在JavaScript中并无，因此咱们须要在String对象上加上这个函数。

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

【译者注：去掉字符串的先后空格，不包括字符串内部空格】

14 – 附加（append）一个数组到另外一个数组上

1
2
3
4
5
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] */

【译者注：其实concat能够直接实现两个数组的链接，可是它的返回值是一个新的数组。这里是直接改变array1】

15 – 将arguments对象转换成一个数组

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

【译者注：arguments对象是一个类数组对象，但不是一个真正的数组】

16 – 验证参数是不是数字（number）

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

17 – 验证参数是不是数组

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

注意：若是toString()方法被重写了（overridden），你使用这个技巧就不能获得想要的结果了。或者你可使用：

1
Array .isArray(obj);  // 这是一个新的array的方法

若是你不在使用多重frames的状况下，你还可使用 instanceof 方法。但若是你有多个上下文，你就会获得错误的结果。

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

【译者注：关于如何判断数组网上有很多讨论，你们能够google一下。这篇就写的挺详细的。】

18 – 获取一个数字数组中的最大值或最小值

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

【译者注：这里使用了Function.prototype.apply方法传递参数的技巧】

19 – 清空一个数组

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

20 – 不要使用 delete 来删除一个数组中的项。

使用 splice 而不要使用 delete 来删除数组中的某个项。使用 delete 只是用 undefined 来替换掉原有的项，并非真正的从数组中删除。

不要使用这种方式：

1
2
3
4
5
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]   */

而使用：

1
2
3
4
5
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 方法应该被用来删除一个对象的某个属性。

21 – 使用 length 来截短一个数组

跟上面的清空数组的方式相似，咱们使用 length 属性来截短一个数组。

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

此外，若是你将一个数组的 length 设置成一个比如今大的值，那么这个数组的长度就会被改变，会增长新的 undefined 的项补上。 数组的 length 不是一个只读属性。

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

22 – 使用逻辑 AND/OR 作条件判断

1
2
3
var  foo =  10 ;
foo ==  10  && doSomething();  // 等价于 if (foo == 10) doSomething();
foo ==  5  || doSomething();  // 等价于 if (foo != 5) doSomething();

逻辑 AND 还能够被使用来为函数参数设置默认值

1
2
3
function  doSomething(arg1){
     Arg1 = arg1 ||  10 ;  // 若是arg1没有被设置的话，Arg1将被默认设成10
}

23 – 使用 map() 方法来遍历一个数组里的项

1
2
3
4
var  squares = [ 1 , 2 , 3 , 4 ].map( function  (val) {
     return  val * val;
});
// squares will be equal to [1, 4, 9, 16]

24 – 四舍五入一个数字，保留N位小数

1
2
var  num = 2.443242342 ;
num = num.toFixed( 4 );   // num will be equal to 2.4432

25 – 浮点数问题

1
2
3
0.1  +  0.2  ===  0.3  // is false
9007199254740992  +  1  // is equal to 9007199254740992
9007199254740992  +  2  // is equal to 9007199254740994

为何会这样？ 0.1+0.2等于0.30000000000000004。你要知道，全部的JavaScript数字在内部都是以64位二进制表示的浮点数，符合IEEE 754标准。更多的介绍，能够阅读这篇博文。你可使用 toFixed() 和 toPrecision() 方法解决这个问题。

26 – 使用for-in遍历一个对象内部属性的时候注意检查属性

下面的代码片断可以避免在遍历一个对象属性的时候访问原型的属性

1
2
3
4
5
for  ( var  name  in  object) {
     if  (object.hasOwnProperty(name)) {
         // do something with name
     }
}

27 – 逗号操做符

1
2
3
4
var  a =  0 ;
var  b = ( a++,  99  );
console.log(a);   // a will be equal to 1
console.log(b);   // b is equal to 99

28 – 缓存须要计算和查询（calculation or querying）的变量

对于jQuery选择器，咱们最好缓存这些DOM元素。

1
2
3
4
var  navright = document.querySelector( '#right' );
var  navleft = document.querySelector( '#left' );
var  navup = document.querySelector( '#up' );
var  navdown = document.querySelector( '#down' );

29 – 在调用 isFinite()以前验证参数

1
2
3
4
5
6
7
isFinite ( 0 / 0 ) ;  // false
isFinite ( "foo" );  // false
isFinite ( "10" );  // true
isFinite ( 10 );    // true
isFinite (undifined);   // false
isFinite ();    // false
isFinite ( null );   // true  !!!

30 – 避免数组中的负数索引（negative indexes）

1
2
3
var  numbersArray = [ 1 , 2 , 3 , 4 , 5 ];
var  from = numbersArray.indexOf( "foo" ) ;   // from is equal to -1
numbersArray.splice(from, 2 );     // will return [5]

确保调用 indexOf 时的参数不是负数。

31 – 基于JSON的序列化和反序列化（serialization and deserialization）

1
2
3
4
5
var  person = {name : 'Saad' , age :  26 , department : {ID :  15 , name :  "R&D" } };
var  stringFromPerson = JSON.stringify(person);
/* stringFromPerson is equal to "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}"   */
var  personFromString = JSON.parse(stringFromPerson);
/* personFromString is equal to person object  */

32 – 避免使用 eval() 和 Function 构造函数

使用 eval 和 Function 构造函数是很是昂贵的操做，由于每次他们都会调用脚本引擎将源代码转换成可执行代码。

1
2
var  func1 =  new  Function(functionCode);
var  func2 = eval(functionCode);

33 – 避免使用 with()

使用 with() 会插入一个全局变量。所以，同名的变量会被覆盖值而引发没必要要的麻烦。

34 – 避免使用 for-in 来遍历一个数组

避免使用这样的方式：

1
2
3
4
var  sum =  0 ;
for  ( var  i  in  arrayNumbers) {
     sum += arrayNumbers[i];
}

更好的方式是：

1
2
3
4
var  sum =  0 ;
for  ( var  i =  0 , len = arrayNumbers.length; i < len; i++) {
     sum += arrayNumbers[i];
}

附加的好处是，i 和 len 两个变量的取值都只执行了一次，会比下面的方式更高效：

1
for  ( var  i =  0 ; i < arrayNumbers.length; i++)

为何？由于arrayNumbers.length每次循环的时候都会被计算。

35 – 在调用 setTimeout() 和 setInterval() 的时候传入函数，而不是字符串。

若是你将字符串传递给 setTimeout() 或者 setInterval()，这个字符串将被如使用 eval 同样被解析，这个是很是耗时的。
不要使用：

1
2
setInterval( 'doSomethingPeriodically()' ,  1000 );
setTimeOut( 'doSomethingAfterFiveSeconds()' ,  5000 )

而用：

1
2
setInterval(doSomethingPeriodically,  1000 );
setTimeOut(doSomethingAfterFiveSeconds,  5000 );

36 – 使用 switch/case 语句，而不是一长串的 if/else

在判断状况大于2种的时候，使用 switch/case 更高效，并且更优雅（更易于组织代码）。但在判断的状况超过10种的时候不要使用 switch/case。
【译者注：查了一下文献，你们能够看一下这篇介绍】

37 – 在判断数值范围时使用 switch/case

在下面的这种状况，使用 switch/case 判断数值范围的时候是合理的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function  getCategory(age) {
     var  category =  "" ;
     switch  ( true ) {
         case  isNaN (age):
             category =  "not an age" ;
             break ;
         case  (age >=  50 ):
             category =  "Old" ;
             break ;
         case  (age <=  20 ):
             category =  "Baby" ;
             break ;
         default :
             category =  "Young" ;
             break ;
     };
     return  category;
}
getCategory( 5 );   // will return "Baby"

【译者注：通常对于数值范围的判断，用 if/else 会比较合适。 switch/case 更适合对肯定数值的判断】

38 – 为建立的对象指定prototype对象

写一个函数来建立一个以指定参数做为prototype的对象是有可能：

1
2
3
4
5
6
function  clone(object) {
     function  OneShotConstructor(){};
     OneShotConstructor.prototype= object;
     return  new  OneShotConstructor();
}
clone( Array ).prototype ;   // []

39 – 一个HTML转义函数

1
2
3
4
5
6
function  escapeHTML(text) {
     var  replacements= { "<" :  "<" ,  ">" :  ">" , "&" :  "&" ,  "\"" :  "" "};
     return  text.replace(/[<>&"]/g,  function (character) {
         return  replacements[character];
     });
}

40 – 避免在循环内部使用 try-catch-finally

在运行时，每次当 catch 从句被执行的时候，被捕获的异常对象会赋值给一个变量，而在 try-catch-finally 结构中，每次都会新建这个变量。

避免这样的写法：

1
2
3
4
5
6
7
8
9
var  object = [ 'foo' ,  'bar' ], i;
for  (i =  0 , len = object.length; i <len; i++) {
     try  {
         // do something that throws an exception
     }
     catch  (e) {
         // handle exception
     }
}

而使用：

1
2
3
4
5
6
7
8
9
var  object = [ 'foo' ,  'bar' ], i;
try  {
     for  (i =  0 , len = object.length; i <len; i++) {
         // do something that throws an exception
     }
}
catch  (e) {
     // handle exception
}

41 – 为 XMLHttpRequests 设置超时。

在一个XHR请求占用很长时间后（好比因为网络问题），你可能须要停止此次请求，那么你能够对XHR调用配套使用 setTimeout()。

1
2
3
4
5
6
7
8
9
10
11
12
13
var  xhr =  new  XMLHttpRequest ();
xhr.onreadystatechange =  function  () {
     if  ( this .readyState ==  4 ) {
         clearTimeout(timeout);
         // do something with response data
     }
}
var  timeout = setTimeout(  function  () {
     xhr.abort();  // call error callback
},  60 * 1000  /* timeout after a minute */  );
xhr.open( 'GET' , url,  true ); 
 
xhr.send();

此外，通常你应该彻底避免同步的Ajax请求。

42 – 处理WebSocket超时

一般，在一个WebSocket链接建立以后，若是你没有活动的话，服务器会在30秒以后断开（time out）你的链接。防火墙也会在一段时间不活动以后断开链接。

为了防止超时的问题，你可能须要间歇性地向服务器端发送空消息。要这样作的话，你能够在你的代码里添加下面的两个函数：一个用来保持链接，另外一个用来取消链接的保持。经过这个技巧，你能够控制超时的问题。

使用一个 timerID：

1
2
3
4
5
6
7
8
9
10
11
12
13
var  timerID =  0 ;
function  keepAlive() {
     var  timeout =  15000 ;
     if  (webSocket.readyState == webSocket.OPEN) {
         webSocket.send( '' );
     }
     timerId = setTimeout(keepAlive, timeout);
}
function  cancelKeepAlive() {
     if  (timerId) {
         cancelTimeout(timerId);
     }
}

keepAlive()方法应该被添加在webSOcket链接的 onOpen() 方法的最后，而 cancelKeepAlive() 添加在 onClose() 方法的最后。

43 – 牢记，原始运算符始终比函数调用要高效。使用VanillaJS。

举例来讲，不使用：

1
2
var  min = Math.min(a,b);
A.push(v);

而用：

1
2
var  min = a < b ? a b;
A[A.length] = v;

44 – 编码的时候不要忘记使用代码整洁工具。在上线以前使用JSLint和代码压缩工具（minification）（好比JSMin）。《省时利器：代码美化与格式化工具》

45 – JavaScript是难以想象的。最好的JavaScript学习资源。

总结

我知道还有不少其余的技巧，窍门和最佳实践，因此若是你有其余想要添加或者对我分享的这些有反馈或者纠正，请在评论中指出。

引用

在这篇文章中，我使用了一些我本身的代码片断，也有一些代码片断来自别人的文章或者论坛：

联系我们 沪ICP备13005482号-10