你不知道的js小技巧

一些常用的JS小技巧或者说一些常用功能的非常用写法 总结如下：

1.定时器 如setTimeout() 第三个参数开始 都是回调函数的参数

setTimeout(function(num){
    alert(num)
},1000,123)	//123

2.js中为了让代码易读  多个字符串拼接换行 用'\' 即可

document.body.innerHTML = '<div>dddddd</div>\
                        <span>sssssssss</span>\
                        <p>pppppp</p>\
                        555555';

3.console.log控制台输出 可以添加样式和图片 如：

var a = 'hello';
console.log('%c'+a, 'font-size:400%;color:#f00;background:#ccc');

控制台查看输出的'hello'是带有样式的，是不是很有意思呢？接着往下看。

4.for循环嵌套 在里面的for循环中加判断跳出最外层循环 可以给外层循环赋值 并break指定的值即可

for (var i = 0; i < 5; i++) {
    for(var j = 0; j < 1; j++ ) {
        if ( i == 3 ) {
            break;
        }
        alert(i)    //0 1 2 4
    }
};
a : for (var i = 0; i < 5; i++) {
    for(var j = 0; j < 1; j++ ) {
        if ( i == 3 ) {
            break a;
        }
        alert(i)    //0 1 2
    }
};

5.call() 改变函数执行的this指向 如果不添加参数 默认指向window

var obj = {
    aaa : function() {
        alert(this)
    }
}
var arr = [1,2,3];
obj.aaa.call(arr);    //1,2,3
obj.aaa.call();    //window

6.insertBefore在某节点之前插入节点 当某节点为空时相当于 appendChild

var oBtn = document.getElementById('btn'),
      oUl = document.getElementById('ul1'),
    lis = oUl.getElementsByTagName('li'),
    oNow = 0;
            
oBtn.onclick = function() {
    var li = document.createElement('li');
    li.innerHTML = oNow++;

        oUl.insertBefore(li, lis[0]);    //当lis[0]为空时 insertBefore = appendChild
    }            

<input type="button" value="添加" id="btn" />
<ul id="ul1"></ul>

7.匿名函数自执行 不用() 用位运算符也可以 如+~!等等 都可以替代()

(function() {
    alert(123);　　//123
})()
~function(){
    alert(333)    //333
}()    

JS神奇的地方还有很多，学习JS要有不断探索的精神。不断学习，不断总结。