js的一些实用技巧

定时器函数参数

setTimeout和setInterval的第二个以后的参数可以传递给回调函数。

1     setTimeout(function(i, j){
2         console.log(i); // 111
3         console.log(j); // 222
4     }, 1000, 111, 222);
5 
6     setInterval(function(i, j){
7         console.log(i); // 111
8         console.log(j); // 222
9     }, 1000, 111, 222);

字符串拼接

字符串拼接需要换行时，可以在行尾添加而不用使用连接符+。

1     var sHtml =
2             '<div class="article">
3                 <div class="head">标题</div>
4                 <div class="con">内容</div>
5             </div>';

typeof、instanceof、in的两种写法

typeof、instanceof、in等操作符可以用小括号来使用。

1     var aNum = [1, 2, 3];
2     console.log(typeof aNum); // object
3     console.log(typeof(aNum)); // object
4 
5     console.log(aNum instanceof Array); // true
6     console.log(aNum instanceof(Array)); // true
7 
8     console.log(aNum in window); // false
9     console.log(aNum in(window)); // false

for循环的无限循环

当for循环中省略三个表达式就是一个无限循环。

1     var i = 0;
2     for(;;){
3         if(i == 4)break;
4         console.log(i++); // 0, 1, 2, 3
5     }

call和applay不带参数或第一个参数为null时指向window对象

call和applay不带参数或第一个参数为null时指向window对象。

 1     var name = 'hum';
 2     function Test(name){
 3         this.name = name;
 4     };
 5     Test.prototype.getName = function() {
 6         console.log(this.name);
 7     };
 8 
 9     var oTest = new Test('jolin');
10     oTest.getName(); // jolin
11     oTest.getName.call(); // hum
12     oTest.getName.call(null); // hum

insertBefore方法的第二个参数为null时的作用和appendChild方法一样

insertBefore方法的第二个参数为null时的作用和appendChild方法一样都是向父元素添加子元素。

 1 <button>添加</button>
 2 <ul></ul>
 3 <script>
 4     window.onload = function(){
 5         var oUl = document.getElementsByTagName('ul')[0],
 6                 aLi = document.getElementsByTagName('li'),
 7                 oBtn = document.getElementsByTagName('button')[0],
 8                 iNum = 0;
 9 
10         oBtn.onclick = function(){
11             var oLi = document.createElement('li');
12             oLi.innerHTML = ++iNum;
13             oUl.insertBefore(oLi, aLi[0]); // 第一次添加也会成功
14         };
15     };
16 </script>

getElementsByTagName获取元素能动态反映出来

通过getElementsByTagName来获取元素后，动态添加或删除元素后，原来获取的元素能同步。

 1 <button>添加</button>
 2 <button>移除</button>
 3 <ul></ul>
 4 <script>
 5     window.onload = function(){
 6         var oUl = document.getElementsByTagName('ul')[0],
 7                 aLi = document.getElementsByTagName('li'),
 8                 oBtn0 = document.getElementsByTagName('button')[0],
 9                 oBtn1 = document.getElementsByTagName('button')[1],
10                 iNum = 0;
11         console.log(aLi.length); // 0
12         oBtn0.onclick = function(){
13             var oLi = document.createElement('li');
14             oLi.innerHTML = ++iNum;
15             oUl.insertBefore(oLi, aLi[0]);
16             console.log(aLi.length);
17         };
18         oBtn1.onclick = function(){
19             if(aLi.length) { // 必须判断否则removeChild会报错
20                 oUl.removeChild(aLi[0]);
21             }
22             console.log(aLi.length);
23         };
24     };
25 </script>

匿名函数自执行的几种形式

 1     // 常用
 2     (function () {
 3         console.log('function');
 4     })();
 5     
 6     // 特殊
 7     !function(){
 8         console.log('function');
 9     }();
10     +function(){
11         console.log('function');
12     }();
13     -function(){
14         console.log('function');
15     }();