智火营销资讯

打造一流的网络营销产品与服务,探索最前沿的技术创新
主页 > 官方博客 > javascript实用技巧,js小知识

javascript实用技巧,js小知识

一、万物皆对象



在JavaScript的世界,万物皆对象。除了null和undefined,其他基本类型数字,字符串和布尔值都有对应有包装对象。对象的一个特征是你可以在它身上直接调用方法。
对于数字基本类型,当试图在其身上调用toString方法会失败,但用括号括起来后再调用就不会失败了,内部实现是用相应的包装对象将基本类型转为对象。所以(1).toString()相当于new Number(1).toString()。因此,你的确可以把基本类型数字,字符串,布尔等当对象使用的,只是注意语法要得体。
同时我们注意到,JavaScript中数字是不分浮点和整形的,所有数字其实均是浮点类型,只是把小数点省略了而以,比如你看到的1可以写成1.,这也就是为什么当你试图1.toString()时会报错,所以正确的写法应该是这样:1..toString(),或者如上面所述加上括号,这里括号的作用是纠正JS解析器,不要把1后面的点当成小数点。内部实现如上面所述,是将1.用包装对象转成对象再调用方法。

二、js整数的操作


使用|0和~~可以将浮点转成整型且效率方面要比同类的parseInt,Math.round 要快,在处理像素及动画位移等效果的时候会很有用

var foo = (12.4 / 4.13) | 0;//结果为3
var bar = ~~(12.4 / 4.13);//结果为3

还有一个小技巧,就是!!2个叹号,快速转化为布尔值。

var aaa="aaa";
alert(!!aaa)

返回的是true,也就是说任何一个值前面加!!都可以恒等于true。除非这个值本来就是布尔值,或者为 undefined, null, 0, false, NaN, '',因为我提到的 undefined, null, 0, false, NaN, '' ,这些,本来就是false,所以加了两个!!之后,还是fasle。

三、使用===,而不是==


==(或!=)操作符在需要的时候会自动执行类型转换。===(或!==)操作不会执行任何转换。它将比较值和类型,而且在速度上也被认为优于==。

[1] === 1    // is false
[1]  == 1    // is true
'1' == 1     // is true
'1' === 1    // is false
 []   == 0     // is true
 [] ===  0     // is false
 '' == false   // is true but true == "a" is false
 '' ===   false // is false

在 eslint 语法推荐使用 ===
 

四、小心使用typeof、instanceof和constructor




var arr = ["a", "b", "c"];
typeof arr;   // return "object"
arr  instanceof Array // true
arr.constructor();  //[]

 

五、不要使用 delete 来删除一个数组中的项



使用 splice 而不要使用 delete 来删除数组中的某个项。使用 delete 只是用 undefined 来替换掉原有的项,并不是真正的从数组中删除。

不要使用这种方式:

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 will be equal to [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 will be equal to [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154,       119]   */

delete 方法应该被用来删除一个对象的某个属性。
 

七、不要使用 delete 来删除一个数组中的项



跟上面的清空数组的方式类似,我们使用 length 属性来截短一个数组。

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

此外,如果你将一个数组的 length 设置成一个比现在大的值,那么这个数组的长度就会被改变,会增加新的 undefined 的项补上。 数组的 length 不是一个只读属性。

myArray.length = 10; // the new array length is 10
myArray[myArray.length - 1] ; // undefined

八、使用for-in遍历一个对象内部属性的时候注意检查属性



下面的代码片段能够避免在遍历一个对象属性的时候访问原型的属性

 

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

九、使用for-in遍历一个对象内部属性的时候注意检查属性

 



避免使用这样的方式:

var sum = 0;
for (var i in arrayNumbers) {
    sum += arrayNumbers[i];
}

更好的方式是:

var sum = 0;
for (var i = 0, len = arrayNumbers.length; i  len; i++) {
    sum += arrayNumbers[i];
}

附加的好处是,i 和 len 两个变量的取值都只执行了一次,会比下面的方式更高效:

for (var i = 0; i  arrayNumbers.length; i++)

为什么?因为arrayNumbers.length每次循环的时候都会被计算。

十、创建一个自调用函数(Self-calling Funtion)



开发过程中我们经常会用到的,这个经常被称为自调用匿名函数(Self-Invoked Anonymous Function)或者即时调用函数表达式(IIFE-Immediately Invoked Function Expression)。这是一个在创建后立即自动执行的函数,通常如下: 

(function(){
    // some private code that will be executed automatically
})();
(function(a,b){
    var result = a+b;
    return result;
})(10,20)

十一、基于JSON的格式化



数据请求和处理过程中会JSON 错误,通常即为格式问题

var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} };
var stringFromPerson = JSON.stringify(person); // stringFromPerson 为字符串
/* stringFromPerson is equal to "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}"   */
var personFromString = JSON.parse(stringFromPerson); // stringFromPerson 为json 对象
/* personFromString is equal to person object  */
© 2011-现在 智火营销 版权所有 沪ICP备12003050号-10
Powered by HuoCMS

沪ICP备12003050号-10

© 2011-现在 智火营销 版权所有