循环结构（for/in 语句、for/of语句以及for of与for in 区别）

for/in 语句

用于循环对象属性。

循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。

for-in循环实际是为循环”enumerable“对象而设计的。

例如：循环对象属性

console输出预览效果

  for/of语句

for/of 在 2015 年被添加到 JavaScript (ES6)。

for-of的语法看起来跟for-in很相似，但它的功能却丰富的多，它能循环很多东西。

语法

for (索引变量名 of 数组/对象){ 
    在此执行代码
}

for (let a of object) {
 //a代表数组/对象中 每一项内容
 执行的代码块
}

 Internet Explorer 不支持 for/of

for of与for in 区别

区别（1）：不能直接遍历对象（for of无法循环遍历对象）

 {
            let person = {fname:'John',lname:'Doe',age:15}

            let text = '';
            let x;
            for(x of person){
                console.log(x);
            }
        }

console输出预览效果

注意： for/in可以遍历对象 for/of不能直接遍历对象（如上现象）

 区别（2）：for/in   for/of 遍历数组，遍历输出结果不同

 {
            //区别(2):for/in  for/of 遍历输出结果不同
            let arr = ['tom','jerry','elva','lili'];
            // key 输出的是 数组中每个单元所对应的索引
            for(let key in arr){
                console.log(key);

            }
            // item 输出的是 数组中每个单元所对应的内容
            for(let item of arr){
                console.log(item);
            }

        }

console输出预览效果

 

区别（3）：for in 会遍历自定义属性，for of不会 

for in 能够遍历到数组的索引；for of 不会。

 // 区别(3):for in 会遍历到 自定义属性，for of不会

        // for in 能够遍历到数组的索引；for of 不会
        // 如果我们在数组上自定义一个属性
        // 例如 arr.name = '小芮'
        { 
            var arr = ['nick','freddy','mike','james'];
            arr.name = '小芮';
            for(let key in arr){
                console.log(key + '===' + arr[key]);
            }
            for(let key of arr){
                console.log(key);
            }
        }

console输出预览效果

 例如：循环遍历数组对象

 // for/of 遍历数组对象
        {
            var arr = [
                {name:'nick',age:18},
                {name:'freddy',age:24},
                {name:'mike',age:26},
                {name:'james',age:34},
            ];
            // 对象中的属性获取方式   对象名.属性名
            for(let item of arr){
                console.log(item.name, item.age);
            }
        }

console输出预览效果