for…of 一种用于遍历数据结构的方法。它可遍历的对象包括数组，对象，字符串，set和map结构等具有iterator 接口的数据结构。

传统遍历方式与for…of优缺

1、for 循环

var arr = [1,2,3,4,5];
    for(let i = 0;i<arr.length;i++){
        //...
    }
//缺点：代码不够简洁。

2、forEach

var arr = [1,2,3,4,5];
arr.forEach(function (value,index) {
   //...
});
//缺点：无法中断停止整个循环。

3、for…in

var arr = [1,2,3,4,5];
    for(let i in arr){
        //...
    } 

for…in循环更常用于对象的循环，如果用于数组的循环，那么就要注意了，上述代码中每次循环中得到的i是字符串类型，而不是预料中的数字类型，要想对它进行运算，那得先要进行类型转换，造成不方便。

4、for…of

var arr = [1,2,3,4,5];
for(let value of arr){
    console.log(value);
}
//打印结果：依次输出：1 2 3 4 5

写法比for循环简洁很多；
可以用break来终止整个循环，或者continute来跳出当前循环，继续后面的循环；
结合keys( )获取到循环的索引，并且是数字类型，而不是字符串类型。

循环可以终止

var arr = [1,2,3,4,5];
    for(let value of arr){
        if(value == 3){
            //终止整个循环
            break;
        }
        console.log(value);
    }
    //打印结果：1 2

用break实现了终止整个循环，不会继续后面的遍历，所以打印结果为：1 2。

可跳过当前循环

var arr = [1,2,3,4,5];
    for(let value of arr){
        if(value == 3){
            //跳过当前循环，继续后面的循环
            continue;
        }
        console.log(value);
    }
    //打印结果：1 2 4  5

用continue跳过当前循环，继续后面的循环，所以打印结果为：1 2 4 5。

得到数字类型的索引

var arr = [1,2,3,4,5];
    for(let index of arr.keys()){
        console.log(index);
    }
    //打印结果：依次输出:0 1 2 3 4

遍历字符串

let word = "我爱吃花生";
    for(let w of word){
        console.log(w);
    }
    //打印结果：我  爱  吃  花  生

遍历DOM List

    <p>1</p>
    <p>2</p>
    <p>3</p>
    //假设有3个p元素
    let pList = document.getElementsByTagName('p');

    for(let p of pList){
        console.log(p);
    }
    // 打印结果：<p>1</p>
    //          <p>2</p>
    //          <p>3</p>

json数组循环

var arr1 = [{a:1},{a:2},{a:3}];
for (var val of arr1.keys()) { 
    console.log(val,arr1[val].a)
}
// 0 1
// 1 2
// 2 3

var arr1 = [{a:1},{a:2},{a:3}];
for (var val of arr1) { 
    console.log(val)
}
// 1
// 2
// 3

for of不能遍历对象，因为能够被for…of正常遍历的，都需要实现一个遍历器Iterator。而数组、字符串、Set、Map结构，早就内置好了Iterator（迭代器），它们的原型中都有一个Symbol.iterator方法，而Object对象并没有实现这个接口，使得它无法被for…of遍历。例如：

Array.prototype[Symbol.iterator];
 
// ƒ values() { [native code] }
 
String.prototype[Symbol.iterator];
 
// ƒ [Symbol.iterator]() { [native code] }
 
Set.prototype[Symbol.iterator];
 
// ƒ values() { [native code] }
 
Map.prototype[Symbol.iterator];
 
// ƒ entries() { [native code] }
 
Object.prototype[Symbol.iterator];
 
// undefined