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

　

相关文章