js中三种for循环（含案例分析）-Toy模板网

这篇具有很好参考价值的文章主要介绍了js中三种for循环（含案例分析）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

三种for循环

js中的for循环有三种 :1.普通的for循环 ,2.for in 循环 ,3.for of 循环
它们三个各自有各自的特点和作用，下面我会用一个小案例来帮助大家理解它们三个的区别
（三种for循环都能写break，return等跳出）

**案例：**现在想用for循环展示lists里的name数据

<template>
    <div>
        <button @click="listsFor">点我循环展示lists里的数据</button>
        <!-- list1,2,3分别表示用三种for循环遍历出来的数据 -->
        <h1>list1里的数据: {{list1}}</h1>
        <h1>list2里的数据: {{list2}}</h1>
        <h1>list3里的数据: {{list3}}</h1>
    </div>
   
</template>

<script>
export default {
    name:'MyCount',
    data() {
        return {
            // 准备数据
            lists:[
                {id:'001',name:'张三'},
                {id:'002',name:'李四'},
                {id:'003',name:'王五'},
            ],
            // 用插值语法同步到<h1>中
            list1:'',
            list2:'',
            list3:''
        }
    },
}
</script>

1.普通的for循环

第一种普通for循环遍历出的数据
vue for,vue.js,前端,javascript

methods:{
        listsFor(){
            // 第一种for循环
            for (let i = 0; i < this.lists.length; i++) {
                this.list1 += this.lists[i].name+" "
            }
            }
        }

2.for in 循环

第二种for in循环遍历出的数据
vue for,vue.js,前端,javascript

methods:{
        listsFor(){
            // 第二种for循环
            for (let i in this.lists) {
                this.list2 += i + " "
            }
        }

3.for of 循环

第三种for of循环遍历出的数据
vue for,vue.js,前端,javascript

methods:{
        listsFor(){
            // 第三种for循环
            for (let list of this.lists) {
                this.list3 += list.name + " "
            }
        }