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字段转换函数：把<转为<
把html转为字符串
function escapeHTML(text) { var replacements= {"<": "<", ">": ">","&": "&", "\"": """}; return text.replace(/[<>&"]/g, function(character) { return replacements[character]; }); } 把字符串转为html function strToHTML(text) { var replacements= {"<": "<", ">": ">","&": "&", """: "\""}; return text.replace(/<|>|&|"/g, function(character) { return replacements[character]; }); }
场景：R返回table html，把它转为字符串，存到后端，我当时使用+''；感觉这样也可以；从后端取出字符串，用>表示的，需要转回去，再放在<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
