細數JavaScript中那些神乎其神的技巧

閒來無事，整理一下JavaScript中那些神乎其神的技巧，僞裝大牛的樣子

1. 字符串轉換爲數字

var a = "123";
    console.log(+a);         // 123
    console.log(typeof +a);  // number

    // 一樣可用於日期轉換爲數值：
    var b = +new Date();     // 1468545682168

2. 數值向下取整

var a = ~~3.14;   // 3
    var b = 3.14>>0;  // 3
    var c = 3.14|0;   // 3

3. 字符串轉換爲數值並取整<!-- more -->

var a = "3.14"|0;  // 3
    var b = "3.14"^0;  // 3

謝謝 @開始學習前端 指正，該取整直接去除小數點後數字，僅對正數有效

4. 函數設置默認值

function func(arg){
        var arg = arg || "default"; 
        // arg 爲 undefined, null, "", 0, false, NaN 時最後都獲得"default"
    }

5. 變量值交換

var a = 1,
        b = 2;
    a = [b, b = a][0];
    console.log(a);  // 2
    console.log(b);  // 1

6. 使用for in遍歷對象取到屬性名與屬性

var obj = {
        a: 1,
        b: 2
    }
    for(var i in obj) {
        console.log("obj." + i + " = " + obj[i]);
    }
    // output: obj.a = 1
    //         obj.b = 2

7. 截斷數組

var arr = [1, 2, 3, 4, 5, 6];
    arr.length = 3;
    console.log(arr);  // [1, 2, 3]

8. 提升遍歷較大Enumerable數據的性能

var arr = [1, 2, 3, 4, 5, 6, ...];
    var len = arr.length;  // 緩存arr.length
    for(var i = 0; i < len; i++) {
        console.log(arr[i]);
    }
    
    // 也可將緩存寫在for的聲明中
    for(var i = 0, len = a.length; i < len; i++) {
        console.log(arr[i]);
    }

    // 或者（！注意：若數組中鍵值存在undefined、null、0、false等數據時會中斷遍歷）
    for(var i = 0, a; a = arr[i++];) {
        console.log(a);
    }

9. 使用 && 替代單一條件判斷

// 你可能這樣寫過
    if(!token) {
        login();
    }
    // 其實這樣也能夠
    !token && login();
    // 或
    token || login();

10. 檢測 對象/數組 中是否有指定 屬性/元素

var CURD = {
        add: function() {},
        delete: function() {},
        edit: function() {}
    }
    console.log("add" in CURD);   // true
    console.log("find" in CURD);  // false

    /* 誤 */
    // var arr = [1, 2, 3];
    // console.log(1 in arr);  // true
    // console.log(6 in arr);  // false

謝謝 @zaaack 指正，數組的存在檢測實質上是檢測的是數組下標

11. 經過閉包調用setTimeout

for(var i = 0; i < 10; i++) {
        setTimeout(function(){
            console.log(i);  // 10 10 10 ...
        },500);
    }

    for(var i = 0; i < 10; i++) {
        (function(i){
            setTimeout(function(){
                console.log(i);  // 0 1 2 3 ...
            },500)
        })(i);
    }

12. To be continue...

---

Started At 函數式編程：柯里化的變型應用 | 熊D博客