Array.prototype.forEach數組遍歷

forEach是Array新方法中最基本的一個，就是遍歷，循環。先看之前是怎麼遍歷數組的

經常使用遍歷

var arr = [1,2,3,4,5];
for(var i = 0; i < arr.length; i++){
    console.log(arr[i]);                    // 1,2,3,4,5
}

 

排除null與undefined和不存在元素的遍歷

var arr = [1,undefined,null,,5];
for(var i = 0; i < arr.length; i++){
    if(!arr[i]) continue;                   // 跳過了null和undefined和不存在元素
    console.log(arr[i]);                    // 1,5

    //等同於
    if(arr[i]){                             // 跳過了null和undefined和不存在元素
        console.log(arr[i]);               
    }
}

 

排除undefined和不存在元素的遍歷

var arr = [1,undefined,null,,5];
for(var i = 0; i < arr.length; i++){
    if(arr[i] === undefined) continue;      // 跳過undefined和不存在元素
    console.log(arr[i]);                    // 1,null,5    

    //等同於
    if(arr[i] !== undefined){               // 跳過undefined和不存在元素
        console.log(arr[i]);
    }  
}

 

跳過不存在的元素，如沒有值的undefined元素

var arr = [1,undefined,null,,5];
for(var i = 0; i < arr.length; i++){
    if(!(i in arr)) continue;
    console.log(arr[i]);                    // 1,undefin,null,5

    //等同於
    if(i in arr){
        console.log(arr[i]);
    }
}

 

ECMAScript5中遍歷數組元素的新方法，使用forEach()方法

/*
* ECMAScript5中遍歷數組元素的新方法，使用forEach()方法
* @ 語法：arr.forEach(callback[, thisArg]);    
* @ param callback  // 回調函數
* @ param thisArg   // 改變回調函數裏面的this指向
* @ 語法：arr.forEach(function(value, index, array));
* @ param value     // 數組的值
* @ param index     // 數組的索引
* @ param array     // 數組自己
*/

// forEach循環
var arr = [1,2,3,4,5];
arr.forEach(function(value,index, array){
    console.log("第"+ index + "的值是：" + value + ",數組自己：" + array);
});

/* logs 
第0的值是：1,數組自己：1,2,3,4,5
第1的值是：2,數組自己：1,2,3,4,5
第2的值是：3,數組自己：1,2,3,4,5
第3的值是：4,數組自己：1,2,3,4,5
第4的值是：5,數組自己：1,2,3,4,5
*/

 

forEach只跳過不存在的元素(不存在索引,但能夠訪問，如arr[3],值爲undefined)

var arr = [1,null,undefined,,5];
arr.forEach(function(value,index, array){
    console.log("第"+ index + "的值是：" + value);
});

/* logs 
第0的值是：1
第1的值是：null
第2的值是：undefined
第4的值是：5
*/

 

forEach第二個參數改變回調函數裏面的this指向

var arr = [1,2,3,4,5];
var arr2 = ["a","b","c","d","e"];
arr.forEach(function(value, index, array){
    console.log("第"+ index + "的值是：" + value);
    console.log(this);          // 第二個參數改變回調函數裏面的this指向  this = ["a", "b", "c", "d", "e"];
}, arr2);

 

polyfill

/*
* polyfill
* @ forEach()是ECMAScript5中的方法
*/
if(!Array.prototype.forEach){
    Array.prototype.forEach = function(callback,thisArg){
        var T, k;
        if(this === null){
            throw new TypeError("this is null or not defined")
        }
        var O = Object(this);
        var len = O.length >>> 0;
        if(typeof callback !== "function"){
            throw new TypeError(callback + " is not a function");
        }
        if(arguments.length > 1){
            T = thisArg;
        }
        k = 0;
        while(k < len){
            var kValue;
            if(k in O){
                kValue = O[k];
                callback.call(T,kValue,k,O);
            }
            k++;
        }
    }
}

var len = O.length >>> 0;
這麼寫確實比 var len = this.length || 0; （parseInt?）要好不少，在遇到意外的 this 時，它不會返回 { }、[ ] 等意外的值。（IE 6+ 支持）
1.全部非數值轉換成0
2.全部大於等於 0 等數取整數部分

// 測試類型值 >>> 的結果