ES6中for...of的使用（遍历数据）

先说说以下循环遍历的对比

• for 循环 ES3 的方法
  需要知道遍历的次数 ， 注意：可以随时终止循环
• forEach ES5 的方法
  不需要知道循环的次数， 注意：不能随时终止循环
• for...of ES6 的方法
  综合了 for 和 forEach循环
  不需要知道循环的次数 ，注意：可以随时终止循环

说明：

    var arr = ['a', 2, 3, 4, 5];

     //【1】for循环遍历数组
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] >= 3) {
            break
        }
        console.log(arr[i]); // a 2
    }

    //【2】forEach遍历数组
    arr.forEach(function (item, index) {
        if (item >= 3) {
            break //这里会报错 非法的break语句
            // Uncaught SyntaxError: Illegal break statement
            //备注，这里加return会终止函数，得到同样的结果，但并不是终止了循环
            //终止循环只能用break和continue才可以
        }
        console.log(item);
    })

    //【3】for of 遍历数组
    for (const item of arr) {
      if (item >= 3) {
        break
      }
      console.log(item); // a 2
    }
    

继续说明：

    //当数组中存在 对象的时候 
    var arr = [
      { name: 'aaa', age: 19 },
      { name: 'bbb', age: 20 },
      { name: 'ccc', age: 21 }
    ]

    // 注意 for of 不可以遍历对象
    // var obj = {
    //   name: '123'
    // }
    // for (var key of obj) {
    //   //Uncaught TypeError: obj is not iterable 错误：obj不是遍历器
    //   console.log(key);
    // }

    // for (const item of arr1){
    //    这里的item是数组的每个对象数据
    // }  

    // for (const { name, age } of arr1) {
    //    这里把item这个对象解构
    // } 

    // 【1】for of 遍历数据用对象的用法  
    //  通过obj.属性 来获取属性值
    for (const item of arr) {
      console.log(item.name, item.age); 
    }

    // 【2】for of 遍历数据解构的用法 (推荐用这种) 
    //  通过对象解构来获取属性值
    for (const { name, age } of arr) {
      console.log(name, age);
    }
    

再继续说明：

   // 当数据为字符串的时候
    let str = 'fqniu'
    for (const item of str) {
      console.log(item);
    }

    // 打印如下图

循环可以使用的范围：
for…of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、 Generator 对象，以及字符串。

补充：
for…of与for…in的区别

• for in可以遍历对象，for of不能遍历对象
• for in不能遍历map集合，for of可以用来遍历map集合
• for in遍历数组得到的是数组的下标，for of遍历数组得到的是数组的元素
• for in遍历键 ， for of遍历值

    var arr = [1, 2, 3, 4, 5]
    for (var key in arr) {
      // console.log(key) 
      //key打印的是索引值 0 1 2 3 4
      console.log(arr[key])
      //arr[key]打印的为数据 1 2 3 4 5
    }

    var obj = {
      name: 'fqniu',
      age: 25,
      sex: '男'
    }
    for (var key in obj) {
      console.log(key)
      //key打印的是属性 name age sex 
      console.log(obj[key])
      //arr[key]打印的为属性值 fqniu 25 男
    }

    /*
      for in可以遍历对象，for of不能遍历对象
      for in不能遍历map集合，for of可以用来遍历map集合
      for in遍历数组得到的是数组的下标，for of遍历数组得到的是数组的元素
      for in遍历键  for of遍历值
    */

    var arr = [1, 2, 3, 4, 5]
    for (var key of arr) {
      console.log(key)
      //key打印的就是数据 1 2 3 4 5 6
    }

推荐阮一峰大佬的ECMAScript 6 入门教程中Iterator 和 for…of 循环