三種for循環(huán)
js中的for循環(huán)有三種 :1.普通的for循環(huán) ,2.for in 循環(huán) ,3.for of 循環(huán)
它們?nèi)齻€(gè)各自有各自的特點(diǎn)和作用，下面我會(huì)用一個(gè)小案例來(lái)幫助大家理解它們?nèi)齻€(gè)的區(qū)別
（三種for循環(huán)都能寫(xiě)break，return等跳出）
**案例：**現(xiàn)在想用for循環(huán)展示lists里的name數(shù)據(jù)
<template>
<div>
<button @click="listsFor">點(diǎn)我循環(huán)展示lists里的數(shù)據(jù)</button>
<!-- list1,2,3分別表示用三種for循環(huán)遍歷出來(lái)的數(shù)據(jù) -->
<h1>list1里的數(shù)據(jù): {{list1}}</h1>
<h1>list2里的數(shù)據(jù): {{list2}}</h1>
<h1>list3里的數(shù)據(jù): {{list3}}</h1>
</div>
</template>
<script>
export default {
name:'MyCount',
data() {
return {
// 準(zhǔn)備數(shù)據(jù)
lists:[
{id:'001',name:'張三'},
{id:'002',name:'李四'},
{id:'003',name:'王五'},
],
// 用插值語(yǔ)法同步到<h1>中
list1:'',
list2:'',
list3:''
}
},
}
</script>
1.普通的for循環(huán)
第一種普通for循環(huán)遍歷出的數(shù)據(jù)
methods:{
listsFor(){
// 第一種for循環(huán)
for (let i = 0; i < this.lists.length; i++) {
this.list1 += this.lists[i].name+" "
}
}
}
2.for in 循環(huán)
第二種for in循環(huán)遍歷出的數(shù)據(jù)
methods:{
listsFor(){
// 第二種for循環(huán)
for (let i in this.lists) {
this.list2 += i + " "
}
}
3.for of 循環(huán)
第三種for of循環(huán)遍歷出的數(shù)據(jù)
methods:{
listsFor(){
// 第三種for循環(huán)
for (let list of this.lists) {
this.list3 += list.name + " "
}
}
總結(jié)
從上面的小案例可以看出，如果要遍歷一個(gè)對(duì)象數(shù)組
for in循環(huán)會(huì)返回?cái)?shù)組的下標(biāo)
普通for循環(huán)和for of循環(huán)都能返回具體的數(shù)據(jù)，但是for of循環(huán)明顯要更簡(jiǎn)便一點(diǎn)文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-701062.html
寫(xiě)作經(jīng)驗(yàn)不多，有問(wèn)題歡迎在評(píng)論區(qū)提出文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-701062.html
到了這里，關(guān)于js中三種for循環(huán)（含案例分析）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
