javascript 奇技淫巧45招

教程：http://chensd.com/2015-01/45-useful-javascript-tips-tricks-and-best-practices.html

1、上线前检查和压缩代码：用gulp.js就好

2、原始操作符比函数块

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

var min = a < b ? a : b; 
A[A.length] = v;
//确实不错

3、处理websocket的超时：42 现在还接触不到

4、XMLHttpRequests时注意设置超时： 41

5、不要在循环内部使用try-catch-finally

6、html字段转换函数：把<转为&lt

把html转为字符串
function escapeHTML(text) {  
    var replacements= {"<": "&lt;", ">": "&gt;","&": "&amp;", """: "&quot;"};                      
    return text.replace(/[<>&"]/g, function(character) {  
        return replacements[character];  
    }); 
}
把字符串转为html
function strToHTML(text) {  
    var replacements= {"&lt;": "<", "&gt;": ">","&amp;": "&", "&quot;": """};                      
    return text.replace(/&lt;|&gt;|&amp;|&quot;/g, function(character) {  
        return replacements[character];  
    }); 
}

场景：R返回table html，把它转为字符串，存到后端，我当时使用+''；感觉这样也可以；从后端取出字符串，用&gt;表示的，需要转回去，再放在<div>中，有时没法用html()函数

replace() 一般只会替换掉第一个匹配的元素，而如果想匹配全部的，就需要用到正则表达式

regex 或者[abc]:或者a，或者b，或者c；另一种方式|，此时不能加[  ]

　　

8、switch/case:  case可以写成if条件  当判断有超过两个分支的时候使用switch/case要更快一些，而且也更优雅，更利于代码的组织，当然，如果有超过10个分支，就不要使用switch/case了。

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);  // 将返回 "Baby"

9、

setInterval('doSomethingPeriodically()', 1000);  
setTimeout('doSomethingAfterFiveSeconds()', 5000);
而是用：
setInterval(doSomethingPeriodically, 1000);  
setTimeout(doSomethingAfterFiveSeconds, 5000);

10、不要对数组使用for in

11、避免在数组中使用负数做索引

12、逗号运算符

var a = 0; 
var b = ( a++, 99 ); 
console.log(a);  // a will be equal to 1 
console.log(b);  // b is equal to 99  console.log((a++, 99)),现执行逗号运算符，a++，返回99，再执行console，输出99

教程：http://blog.csdn.net/wl110231/article/details/8162732

它将先计算左边的参数，再计算右边的参数值。然后返回最右边参数的值

逗号运算符在JavaScript在的优先级是最底的，比赋值运算符还要底

13、for in检查对象属性，以下会避免进入到原型

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

14、浮点计算的问题

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

toFixed()：指定小数位数和toPrecision()：转为指数

15、toFixed():返回的是字符串，不是数字

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

16、map对数据进行循环

ECMAscript5中新增了一些数组方法，这些方法我在underscore中看到过，印象比较深，只是有时候想不起来，哪些是原生方法。

forEach()：_.each()，callback有三个参数value，i，array。根据callback的不同，可以当map用

map()：_.map():原生方法，var b= a.map();map不会修改原来的数组，需要一个新数组来表示返回值。

filter()：_.filter()

every()：所有为true，返回true

some()：所有为falsely，返回false

reduce()：生成单个值

reduceRight()：reduce()从右开始

indexOf()：

lastIndexOf()：

常用的一般都是原生方法

17、逻辑运算符

var foo = 10; 
// 进行判断 
foo == 10 && doSomething(); // foo == 10时，执行doSomething()
foo == 5 || doSomething();  // foo != 5时，执行doSomething()
// 或用来赋值
var arg2 = arg1 || 10;

18、使用length截断数组

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

// length 可用来增加数组元素
myArray[myArray.length] = 5;

//如果把length属性变大，数组的长度值变会增加，会使用undefined来作为新的元素填充。length是一个可写的属性。
myArray.length = 10; // the new array length is 10 
myArray[myArray.length - 1] ; // undefined

19、删除数组元素和对象属性：不要直接从数组中delete或remove元素

如果对数组元素直接使用delete，其实并没有删除，只是将元素置为了undefined。数组元素删除应使用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 结果为 [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */

而应为

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 结果为 [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119]

删除对象的属性，可以使用delete

var obj = {
    'name': 'sfp',
    'age': 27
}

delete obj.age;

console.log(JSON.stringify(obj));

20、清空数组：直接赋空值，应该也可以吧

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

21、获取数组最大值和最小值：一个非常好的思路，Math对象的函数可以用在Array上，那其他的也可以，所以需要对API非常熟悉

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

22、验证是否为数组

underscore中有方法

_.isArray = nativeIsArray || function(obj) {
    return toString.call(obj) == '[object Array]';
  };

这里提到的方法

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

以上两种都一样，缺陷是，如果toString()被重写的话，效果就不好了

ECMA5有原生的方法：不早说呢。

Array.isArray(obj);

23、验证是否为数字

underscore用toString()来判断

这里使用：真麻烦

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

24、参数对象转为数组

Array.prototype.slice.call(arguments);

25、数组之间追加

Array.prototype.push.apply(array1, array2);  会改变array1，数组元素为对象，不会出错

array1.concat(array2);  不会改变array1，如果数组中一个元素是对象，则出错

其实记不下这么细，只需要知道push和concat就可以了

26、字符串取空格：先试试trim()可不可以

自己写的话

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

27、数组乱序

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
numbers = numbers.sort(function(){ return Math.random() - 0.5});
/* numbers 数组将类似于 [120, 5, 228, -215, 400, 458, -85411, 122205]  */

28、生成随机的字母数字字符串

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

29、生成从0到指定值的数字数组：写法太高级了

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

30、获取指定范围内的随机数

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

31、从数组中随机取值

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

32、立即执行函数

(function(){
    // 置于此处的代码将自动执行
})();  
(function(a,b){
    var result = a+b;
    return result;
})(10,20)

33、对象构造器，有什么用？

34、underfined、null、0、false、NaN、空字符串的逻辑结果均为false

35、使用===代替==

==和!=操作符会在需要的情况下自动转换数据类型。但===和!==不会，它们会同时比较值和数据类型，这也使得它们要比==和!=快。

36、行尾使用分号，很少注意到

37、typeof instanceof

typeof 运算数的类型，只返回以下值"number,boolean,string,function,object,undefined"，特殊对象一律返回object

instanceof 变量是否为某个对象的实例　左边的原型链上是否有右边的prototype，如new Object() instanceof Array === false

38、bind类似call apply

区别是，bind生成的新函数返回后，想什么时候调就什么时候调

39、立即执行函数

function a(){}() 错误，原因：js规定已function开头的语句为函数语句，不能加()

(function a(){}()) 正确，原因：以(开头

40、in hasOwnProperty

'z' in obj，如果z在obj或者obj的原型上，则为true

obj.hasOwnProperty('z')，如果z在对象，而不在原型上，则为true

41、constructor

始终指向创建当前对象的构造函数

对象的原型会指向构造函数的prototype