ES6 for of的使用

與其他遍歷方法的比較

const fruits = ['apple','coconut','mango','durian'];

//for循環(huán)數(shù)組，通過下標取得每一項的值
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

//數(shù)組的forEach方法，相對for循環(huán)語法更簡單
fruits.forEach(fruit => {
    console.log(fruit);
})

//forEach有個問題是不能終止循環(huán)
fruits.forEach(fruit => {
    if(fruit === 'mango' ){
        break;                        //Illegal break statement
    }
    console.log(fruit);
})

//for...in循環(huán)，遍歷數(shù)組對象的屬性，MDN不推薦使用for...in遍歷數(shù)組
//for...in循環(huán)會打印出非數(shù)字屬性
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循環(huán)，遍歷屬性值
for(let fruit of fruits){
    console.log(fruit);
}

//支持終止循環(huán)，也不會遍歷非數(shù)字屬性
for(let fruit of fruits){
    if(fruit === 'mango' ){
        break;
    }
    console.log(fruit);      //apple coconut durian
}

應(yīng)用場景

//arguments是個類數(shù)組對象，通常先要將其轉(zhuǎn)換為數(shù)組才能遍歷，但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>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容