整理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新提供的对象的遍历方法