for...of的使用

案例一（与其他遍历的对比）

var arr = [1, 2, 3, 4]
    // 代码不简洁
    for (var i = 0; i < arr.length; i++) {
        if (i == 2) {
            break
        }
        console.log(arr[i]);
    }
    // 不能终止循环
    arr.forEach((item, index) => {
        console.log(item);
        if (index == 2) {
            // break
        }
    })
    // 遍历出来的是字符串类型
    for (key in arr) {
        console.log(key);
    }
    // 不能获取索引
    console.log(...arr);

案例二（优势）

// 代码简洁
    // 终止循环
    // 索引和值可以分开遍历
    for (key of arr.keys()) {
        console.log(key);
    }
    for (value of arr.values()) {
        if (value == 2) {
            break
        }
        console.log(value);

    }
    for ([key, value] of arr.entries()) {
        console.log(key);
        console.log(value);
    }

    var obj = {
        name: 'zs',
        age: 18
    }
    // console.log(arr.keys());
    // console.log(obj.keys());
    for (value of obj) {
        console.log(value);  // obj is not iterable
    }

案例三

// 可遍历对象：可以被for...of遍历的对象，例如：数组 字符串 伪数组 Set Map
    var str = '我是可遍历对象'
    // console.log(str.values());
    for (value of str) {
        console.log(value);
    }