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

阳光穿透心脏的1/2处 2022-10-02 12:54 245阅读 0赞

<!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>