美文网首页
ES6-for of

ES6-for of

作者: 闪电西兰花 | 来源:发表于2018-06-11 13:36 被阅读0次
    const fruits = ['apple','coconut','mango','durian'];
    
    //for循环数组,通过下标取得每一项的值
    for (let i = 0; i < fruits.length; i++) {
        console.log(fruits[i]);
    }
    
    //数组的forEach方法,相对for循环语法更简单
    fruits.forEach(fruit => {
        console.log(fruit);
    })
    
    //forEach有个问题是不能终止循环
    fruits.forEach(fruit => {
        if(fruit === 'mango' ){
            break;                        //Illegal break statement
        }
        console.log(fruit);
    })
    
    //for...in循环,遍历数组对象的属性,MDN不推荐使用for...in遍历数组
    //for...in循环会打印出非数字属性
    const fruits = ['apple','coconut','mango','durian'];
    fruits.fav = 'my favorite fruit';
    
    for(let index in fruits){
        console.log(fruits[index]);   //...my favorite fruit
    }
    
    const fruits = ['apple','coconut','mango','durian'];
    fruits.fav = 'my favorite fruit';
    
    //ES6中的for...of循环,遍历属性值
    for(let fruit of fruits){
        console.log(fruit);
    }
    
    //支持终止循环,也不会遍历非数字属性
    for(let fruit of fruits){
        if(fruit === 'mango' ){
            break;
        }
        console.log(fruit);      //apple coconut durian
    }
    
    • 应用场景
    //arguments是个类数组对象,通常先要将其转换为数组才能遍历,但for...of可以直接遍历
    function sum() {
        let sum = 0
        for(let num of arguments){
            sum += num
        }
        console.log(sum);        //15
    }
    
    sum(1,2,3,4,5)
    
    //遍历字符串
    let name = 'Asher';
    for (let char of name){
        console.log(char);         //A s h e r
    }
    
    //遍历nodelists,效果如下图
    <style type="text/css">
        .completed {
            text-decoration: line-through;
        }
    </style>
    <body>
        <ul>
            <li>yoga</li>
            <li>boxing</li>
            <li>press</li>
        </ul>
    
        <script type="text/javascript">
            const lis = document.querySelectorAll('li');
            for(let li of lis){
                li.addEventListener('click',function(){
                    this.classList.toggle('completed');
                })
            }
        </script>
    </body>
    
    for-of-nodelists.PNG

    相关文章

      网友评论

          本文标题:ES6-for of

          本文链接:https://www.haomeiwen.com/subject/bnaceftx.html