关于JS常见遍历语法比较

for循环

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

输出结果为：1,2,3

for循环还有一个优化版的方案，将需要遍历的长度临时存起来

var arr = [1,2,3]
for(var i = 0;len=arr.lenght;i<len;i++){
    console.log(arr[i])
}

forEach

var arr = [1,2,3]
    arr.forEach((item,i)=>{
        console.log('第'+i+'个为'+item)
    })

输出结果为：第0个为1  第1个为2 第2个为3，这里的item为value,i为索引值

使用forEach缺点为无法中途跳出forEach循环，break命令或return命令都不行

for..in

该方法主要用于遍历对象的可枚举属性，不适用于遍历数组

var obj = {
        name:'pob',
        age:'26',
        sex:'男'
    }
    for(var item in obj){
        console.log(obj[item])
    }

输出结果为：pob,26,男  这里的item指key值name,age,sex

这里需要注意的时，开发过程中，常常需要将获取到的json写入HTML中，如下：

<select class="select"></select>

var obj = {
        name:'pob',
        age:'26',
        sex:'男'
    }
    var txt = ''
    for(var i in obj){
        txt += '<option>'+i+'</option>'
    }
   $('.select').html(txt)

特别需要注意的是，这里的txt，将所有需要写入页面的元素先存储起来，最后加入到页面中去，这样会比循环添加节省不少内存，效率很高很多。如果有页面加载缓慢的情况，请仔细检查有没有按照此写法写。

for...of

for...of不能直接遍历一个对象，否则会报错，这里我们可以使用Object.keys方法将对象的键名生成一个数组，遍历这个数组就好了

var obj = {
            name:'pob',
            age:'26',
            sex:'男'
        }
        for(var item of Object.keys(obj)){
            console.log(item)
        }

输出结果为：name,age,sex，这里的item指的是key值

for...of遍历数组

var arr = ['aaa','bbb','ccc']
        for(let item of arr){
            console.log(item)
        }

输出结果为：aaa,bbb,ccc

for...of遍历字符串

 var str = 'hello world'
        for(var item of str){
            console.log(item)//h e l l o w o r l d
        }