與其他遍歷方法的比較
const fruits = ['apple','coconut','mango','durian'];
//for循環(huán)數(shù)組运挫，通過(guò)下標(biāo)取得每一項(xiàng)的值
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
//數(shù)組的forEach方法，相對(duì)for循環(huán)語(yǔ)法更簡(jiǎn)單
fruits.forEach(fruit => {
console.log(fruit);
})
//forEach有個(gè)問(wèn)題是不能終止循環(huán)
fruits.forEach(fruit => {
if(fruit === 'mango' ){
break; //Illegal break statement
}
console.log(fruit);
})
//for...in循環(huán)咬展，遍歷數(shù)組對(duì)象的屬性丰刊，MDN不推薦使用for...in遍歷數(shù)組
//for...in循環(huán)會(huì)打印出非數(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)，也不會(huì)遍歷非數(shù)字屬性
for(let fruit of fruits){
if(fruit === 'mango' ){
break;
}
console.log(fruit); //apple coconut durian
}
應(yīng)用場(chǎng)景
//arguments是個(gè)類數(shù)組對(duì)象，通常先要將其轉(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>
