转载

45个JavaScript小技巧

原文地址 http://modernweb.com/2013/12/23/45-useful-javascript-tips-tricks-and-best-practices/

这篇文章的质量个人感觉一般（有些甚至有些无厘头，比如第五点，构造函数的使用，直接被我去掉了）， 建议过一遍就好 。详细的翻译版本可以参考 JavaScript奇技淫巧45招

声明变量时别忘记 var
相等比较请用 === 而不是 ==
undefined 、 null 、0、 false 、 NaN 、 '' （空字符串）都是假值
行末加封号
小心使用 typeof 、 instanceof 以及 constructor
- JavaScript原型链和instanceof运算符的暧昧关系
- typeof和instanceof简介及用法
- javascript中prototype、constructor以及__proto__之间的三角关系
IIFE。参考（译）详解javascript立即执行函数表达式（IIFE）

获取数组的任一元素

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

获取某一范围内的任一数值

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

生成 0~max 的数组（[0, 1, 2 ... max]）

var a = [], max = 100; for (var i = 0; a.push(i++) <= max; );

生成任意长度字符串（字符包括 a-z 0-9）

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

数组乱序

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; numbers = numbers.sort(function(){ return Math.random() - 0.5});

有一个比 sort 更好的办法（Fisher-Yates shuffle），具体可以参考 discuss

string trim

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

在一个数组后附加一个数组

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] */

把伪数组转为数组

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

判断数字

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

判断数组 see Javascript中判断数组的正确姿势

获取数组最值

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

清空数组

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

删除数组元素请不要用 delete，而是用 splice

截取数组

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

短路运算符
用 map() 遍历元素

小数保留（注意，toFixed 方法返回 string 值）

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

浮点数问题

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

see 【0.1 + 0.2 = 0.30000000000000004】该怎样理解？

用 for-in 检查对象属性

for (var name in object) {       if (object.hasOwnProperty(name)) {          // do something with name                         }   }

逗号运算符

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

缓存数据（避免查询相同 DOM 多次）

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

使用 isFinite() 方法前先检查参数

isFinite(0/0) ; // false  isFinite("foo"); // false  isFinite("10"); // true  isFinite(10);   // true  isFinite(undefined);  // false  isFinite();   // false  isFinite(null);  // true  !!!

JSON 序列化和反序列化

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  */

避免使用 eval() 和 Function() 构造函数。为了避免双重求值，see 高性能JavaScript 编程实践
避免使用 with
避免用 for-in 遍历数组元素
setInterval() setTimeout() 的参数请使用函数，而不是字符串。避免双重求值，同上。
使用 switch-case 而不是一长串的 if-else。这点有待考证，The Good Part 中说要尽量不使用 switch-case 语句。

HTML 实体编码

function escapeHTML(text) {       var replacements= {"<": "<", ">": ">","&": "&", """: """};                           return text.replace(/[<>&"]/g, function(character) {           return replacements[character];       });  }

避免在循环中使用 try-catch-finally这样写是不好的：

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       }  }

应该这样：

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   }

AJAX 设置请求超时（setTimeout 设置请求超时中止 AJAX）

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();