各种for

forin forof forEach $.each

var andy = 'dog eat bone.';
var arr = [];

traditional for

远古时候的for循环最常用也最经典。

for(let i = 0 ; i < andy.length ; i++){
    arr.push(andy[i])
}
log(arr)//["d", "o", "g", " ", "e", "a", "t", " ", "b", "o", "n", "e", "."]

也可以使用continue和break来中断循环。

for(let i = 0;i<andy.length;i++){
    if(andy[i] === 'e'){
        continue;
    }
    arr.push(andy[i])//["d", "o", "g", " ", "a", "t", " ", "b", "o", "n", "."]
}

for(let i = 0;i<andy.length;i++){
    if(andy[i] === 'e'){
        break;
    }
    arr.push(andy[i])//["d", "o", "g", " "]
}

forEach()

arr.forEach(function(e,i,arr1){
    console.log(e,i,arr1)//输出值，下标，和数组
})

forEach()是Array类型所拥有的方法，因此遍历字符串需要call的帮忙。

Array.prototype.forEach.call(andy,(v) =>{
    arr.push(v)
})
log(arr)//["d", "o", "g", " ", "e", "a", "t", " ", "b", "o", "n", "e", "."]

for in

for(let prop in andy){
    log(prop,andy[prop])
}

for in 就像是对象的forEach，只不过所有的类型都可以用这个遍历，但不一定是最合适的，它主要存在两个问题：

1. 会遍历原型链上的属性；

2. 输出的结果是无法保证顺序的。

   //遍历原型链上的属性
   String.prototype.num=13;
   for(var i in andy){
   arr.push(andy[i]);
   }
   log(arr);//["d", "o", "g", " ", "e", "a", "t", " ", "b", "o", "n", "e", ".", 13]

这个可以通过Object.prototype.hasOwnProperty()来校验是不是自己本身的属性，不过用起来就略显愚钝了。

String.prototype.age=13;
var result=[];
for(var i in andy){
    if(andy.hasOwnProperty(i)){
        result.push(andy[i]);
    }
}
log(result);


//无序的结果
var o = {  
    '01':'d',  
    '2':'o',  
    '今天':'g'  
}  
for (let k in o){  
    log(o[k])//'o','d','g'
}  

因此推荐只用来遍历Object

for of

for(let v of andy){
    arr.push(v)
}
log(arr)//["d", "o", "g", " ", "e", "a", "t", " ", "b", "o", "n", "e", "."]

ES6为字符串添加了遍历器接口，使得字符串可以被for...of循环遍历。

for of 是es6实现的方法，可以遍历所有Iterator接口的数据结构，set, map,数组，以及一些类数组的数据类型(domlist arguments)。

字符串转数组也别的办法：

log([...'dog eat bone.'])//["d", "o", "g", " ", "e", "a", "t", " ", "b", "o", "n", "e", "."]
log(Array.from('dog eat bone.'))

$.each(obj,callback,args)

$(selector).each()就是调用$.each()方法实现的

each: function( callback, args ) {
  　　  return jQuery.each( this, callback, args );
　　},

而$.each()的源码：

Jquery = {
    each: function(obj, callback, args) {
        var value,i = 0,
        length = obj.length,
        isArray = isArraylike(obj);//检验是否是数组或者类数组
        //args存在的时候
        if(args) {
            if(isArray) {
                for(; i < length; i++) {
                    value = callback.apply(obj[i], args);//funciton(args){}
                    if(value === false) { break; }
                }
            } else {
                for(i in obj) {
                    value = callback.apply(obj[i], args);
                    if(value === false) { break; }
                }
            }
            // A special, fast, case for the most common use of each
        } else {
            //args不存在的时候
            if(isArray) {
                //若是数组
                for(; i < length; i++) {
                    value = callback.call(obj[i], i, obj[i]);//function(i,e){}
                    if(value === false) { break; }//value若是存在return的值就直接结束
                }
            } else {
                //若不是数组
                for(i in obj) {
                    value = callback.call(obj[i], i, obj[i]);
                    if(value === false) { break; }
                }
            }
        }
    }
}