javascript 奇技淫巧45招

时间:2021-02-09 16:32:44

教程: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