Iterator和for...of循环→for...of循环-蒲公英云

Iterator和for...of循环→for...of循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>for...of循环</title>
</head>
<body>
    <script>
        const fruits = ['apple', 'banana', 'orange', 'mango'];
        /*
        ES5
        */
        for (let i = 0; i < fruits.length; i++) {
            console.log(fruits[i])
        }
        fruits.forEach(friut => {//forEach缺点不能中止和跳过
            // if(friuts[0]==='apple'){//报错：Uncaught ReferenceError: friuts is not defined at fruits.forEach.friut (for...of循环.html:23) at Array.forEach (<anonymous>) at for...of循环.html:22
            //     console.log(friuts[0])
            // }
            console.log(friut);
        })
        for (let friut in fruits) {//这里的friut获取的是下标
            console.log(friut);//0 1 2 3
        }
        /*
            for...in循环遍历对象上可枚举的所有属性
        */
        fruits.describe = 'my favorite friuts';
        for (let index in fruits) {
            console.log(fruits[index]);//apple banana orange mango  my favorite friuts
        }
        /*
        ES6  for...of循环
        支持中止和跳过
        */
        for (let friut of fruits) {
            console.log(friut);//apple banana orange mango
        }
        for (let friut of fruits) {
            if (friut === 'orange') {//支持中止
                break;
            }
            console.log(friut);//apple banana
        }
        for (let friut of fruits) {
            if (friut === 'orange') {//支持跳过
                continue;
            }
            console.log(friut);//apple banana mango
        }
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>for...of实例</title>
    <style>
        .completed{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <ul>
        <li>X</li>
        <li>Y</li>
        <li>Z</li>
    </ul>
    <script>
        const fruits = ['apple', 'banana', 'orange', 'mango'];
        /*
        entries() 方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。
         console.log(fruit)结果为：
            (2) [0, "apple"]
            (2) [1, "banana"]
            (2) [2, "orange"]
            (2) [3, "mango"]
            注解：0,1,2,3是索引
        */
        for (let fruit of fruits.entries()) {
            console.log(fruit);
        }
        /*
        注意：我现在想通过entries（）方法，
        直接获得值（'apple', 'banana', 'orange', 'mango'）
        */
        for (let [index, fruit] of fruits.entries()) {
            console.log(fruit);
        }
        //将下标值（index）和值结合起来，注意下标值是从0开始的；
        for (let [index, fruit] of fruits.entries()) {
            console.log(`第${index + 1}天，吃${fruit}`);
        }
        /*
        sum(4,30,623,1447,8,501,475,6)里面的数字加起来,操作如下；
        arguments 是一个对应于传递给函数的参数的类数组对象。
        arguments对象是所有（非箭头）函数中都可用的局部变量。
        */
        function sum() {
            //    console.log(arguments);
            let total = 0;
            for (let num of arguments) {
                total += num;
            }
            console.log(total);
            return total;
        }
        sum(4, 30, 623, 1447, 8, 501, 475, 6)//3094
        /*
        for...of循环利用与字符串
        */
        let name = 'xyz';
        for (let char of name) {
            console.log(char);//x y z
        }
        /*
        for...of循环小操作
        querySelectorAll:
            返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。
            返回的对象是 NodeList 。
        */
       const lis=document.querySelectorAll('li');
       console.log(lis);//NodeList(3) [li, li, li]
       for(let li of lis){
           li.addEventListener('click',function(){
               this.classList.toggle('completed');
           })
       }
    </script>
</body>
</html>