整理JavaScript循環數組和對象的方法

 

　　眾所周知，常用的循環語句有for、while、do-while、for-in，forEach以及jQuery中提供的循環的方法；以及ES6中提供的很多用來循環對象的方法如map，

　　在 Javascript 中，當某些條件得到滿足時，用 break 語句來中斷一個循環的運行。（請注意，也用 break 語句退出一個 switch 塊。參見 Javascript 條件語句）。如果是一個 for 或者 for...in 循環，在更新計數器變量時使用 continue 語句越過余下的代碼塊而直接跳到循環的下一次重復中。

//數組長度
let len = 200;

//准備測試數組
let arr = new Array();
for (let i = 0 ; i < len; i++){
    arr.push("abc"+i);
}

第一部分：循環數組的方法

1、for循環

//正向for循環
for(let i = 0, len = arr.length; i < len; i++){
    let value = arr[i];
}
//反向for循環
for(let i = arr.length; i > 0; i--){
    let value = arr[i];
}

2、while循環

let i = 0;
let len = arr.length;
while(i < len){
    let value = arr[i];
    i++;
}

3、do-while循環

let i = 0;
let len = arr.length;
do{
    let value = arr[i];
    i++;
}while(i < len);

4、for-in循環

//循環數組時for-in循環相對性能很差，其主要用於循環對象。
for(let item in arr){
    let value = item;
}

5、forEach方法

//這個方法執行是沒有返回值的，對原來數組也沒有影響；
//forEach方法中的this是原數組,匿名回調函數中的this默認是window；
let res = arr.forEach((val, ind, input)=>{
    let value = val;    //數組的每一項的值
    let index = ind;    //數組的索引值
    let array = input;  //原數組
    input[ind] = val*10;    //可以改變原數組 
})
console.log(arr);//原數組已經改變
console.log(res);//undefined

6、map方法

//map:和forEach非常相似，都是用來遍歷數組中的每一項值的，用來遍歷數組中的每一項；
//區別：map的回調函數中支持return返回值；
//return的是什么，相當於把數組中的這一項變為什么
//（並不影響原來的數組，只是相當於把原數組克隆一份，把克隆的這一份的數組中的對應項改變了）；
//不管是forEach還是map 都支持第二個參數值，第二個參數的意思是把匿名回調函數中的this進行修改。
let res = arr.map((val, ind, input)=>{
    let value = val;    //數組中的每一項的值
    let index = ind;    //數組的索引
    let array = input;  //原數組
    return val*10;      //數組中的每一項return出去為map方法的返回值
})
console.log(arr);//原數組未改變
console.log(res);//原數組改變后的數組

注：不管是forEach還是map在IE6-8下都不兼容（不兼容的情況下在Array.prototype上沒有這兩個方法）,那么需要我們自己封裝一個都兼容的方法，代碼如下：

/**
* forEach遍歷數組
* @param callback [function] 回調函數；
* @param context [object] 上下文；
*/
Array.prototype.myForEach = function myForEach(callback,context){
    context = context || window;
    if('forEach' in Array.prototye) {
        this.forEach(callback,context);
        return;
    }
    //IE6-8下自己編寫回調函數執行的邏輯
    for(var i = 0,len = this.length; i < len;i++) {
        callback && callback.call(context,this[i],i,this);
    }
}

/**
* map遍歷數組
* @param callback [function] 回調函數；
* @param context [object] 上下文；
*/
Array.prototype.myMap = function myMap(callback,context){
    context = context || window;
    if('map' in Array.prototye) {
        return this.map(callback,context);
    }
    //IE6-8下自己編寫回調函數執行的邏輯
    var newAry = [];
    for(var i = 0,len = this.length; i < len;i++) {
        if(typeof  callback === 'function') {
            var val = callback.call(context,this[i],i,this);
            newAry[newAry.length] = val;
        }
    }
    return newAry;
}

7、jQuery中遍歷數組的方法$.each()

$.each(arr, (ind, val)=>{
    let index = ind;//數組中每一項的索引
    let value = val;//數組中每一項的值
})

第二部分：循環對象的方法

//對象中鍵值對個數
let len = 200;

//准備測試數組
let obj = new Object();
for (let i = 0 ; i < len; i++){
    obj[`index${i}`] = `value${i}`;
}

1、for-in用來遍歷非數組對象

for(let ind in obj){
    let index = ind;    //對象中的每一項的鍵名
    let value = obj[ind];   //對象中的每一項的值
}

2、jQuery中遍歷對象的方法$.each()

$.each(obj, (ind, val)=>{
    let index = ind;    //對象中每一項的鍵名
    let value = val;    //對象中每一項的值
})

3、ES6新提供的對象的遍歷方法

（未完待續。。。）