https://www.zhangxinxu.com/wordpress/2018/08/for-in-es6-for-of/ https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for…of

    定义
    我自己理解的：for of是es6出现的一种循环迭代器的api，修复了ES5引入的for…in的不足，利用Symbol.iterator迭代器
    MDN：for…of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句

    使用
    循环数组
    循环出来的值是数组索引对应的value值

    1. const array1 = ['a', 'b', 'c'];
    2. for (const element of array1) {
    3.   console.log(element);
    4. }
    5. // expected output: "a"
    6. // expected output: "b"
    7. // expected output: "c"

    for in也可以循环数组，只不过默认循环出来的是索引

    1. let arr = [1,2,3];
    2. for (let i in arr) {
    3.     console.log(i, arr[i])
    4. }
    5. // 0 1
    6. // 1 2
    7. // 2 3

    forEach也可以，但是forEach不能中断循环，如果想要强行中断，可以试着抛错，for of可以中断循环

    1. let arr = [1,2,3]
    2. arr.forEach(item => {
    3.     console.log(item)
    4. })
    5. // 1
    6. // 2
    7. // 3

    循环字符串
    其实for in也可以循环字符串，这点，它俩差不多

    1. let iterable = "boo";
    2. for (let value of iterable) {
    3.   console.log(value);
    4. }
    5. // "b"
    6. // "o"
    7. // "o"

    循环TypedArray

    1. let iterable = new Uint8Array([0x00, 0xff]);
    3. for (let value of iterable) {
    4.   console.log(value);
    5. }
    6. // 0
    7. // 255

    循环Map
    for in 无法正常迭代

    1. let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
    2. for (let entry of iterable) {
    3.   console.log(entry);
    4. }
    5. // ["a", 1]
    6. // ["b", 2]
    7. // ["c", 3]
    8. for (let [key, value] of iterable) {
    9.   console.log(value);
    10. }
    11. // 1
    12. // 2
    13. // 3

    循环Set

    1. let iterable = new Set([1, 1, 2, 2, 3, 3]);
    3. for (let value of iterable) {
    4.   console.log(value);
    5. }
    6. // 1
    7. // 2
    8. // 3

    循环arguments对象

    1. (function() {
    2.   for (let argument of arguments) {
    3.     console.log(argument);
    4.   }
    5. })(1, 2, 3);
    7. // 1
    8. // 2
    9. // 3

    循环类数组，比如DOM list

    1. //注意：这只能在实现了NodeList.prototype[Symbol.iterator]的平台上运行
    2. let articleParagraphs = document.querySelectorAll("article > p");
    4. for (let paragraph of articleParagraphs) {
    5.   paragraph.classList.add("read");
    6. }

    循环迭代器
    可以使用自定义迭代器进行迭代
    迭代可迭代的对象

    1. function* fibonacci() { // 一个生成器函数
    2.     let [prev, curr] = [0, 1];
    3.     for (;;) { // while (true) {
    4.         [prev, curr] = [curr, prev + curr];
    5.         yield curr;
    6.     }
    7. }
    9. for (let n of fibonacci()) {
    10.      console.log(n);
    11.     // 当n大于1000时跳出循环
    12.     if (n >= 1000)
    13.         break;
    14. }

    for in 和 for of 注意

    1. for in 语句以任意顺序迭代对象的可枚举属性，for of 语句遍历可迭代对象定义要迭代的数据

    2. for in 适合遍历对象，for of适合遍历数组（想要中断）和Map、Set这些可迭代器

      1. for of可以提前中断循环，但是不会关闭迭代器，也就是下一次循环会继续上一次停止的地方开始（注意是迭代器，Symbol.iterator）
        1. let a = [1,2,3,4,5,6]
        2. let iter = a[Symbol.iterator]()
        3. // 注意这里是迭代器的工厂函数，如果直接使用a进行循环，则会直接终止和关闭
        4. for (let i of iter) {
        5. if (i === 3) {
        6. break
        7. }
        8. console.log(i)
        9. }
        10. // 1,2,3
        11. for(let i of iter){
        12. console.log(i)
        13. }
        14. // 4,5,6

    3. for of是es6新语法，注意兼容

    4. for…of不能循环普通的对象，需要通过和Object.keys()搭配使用