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循环遍历出的数据
在这里插入图片描述

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

2.for in 循环

第二种for in循环遍历出的数据
在这里插入图片描述

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

3.for of 循环

第三种for of循环遍历出的数据
在这里插入图片描述

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

总结

从上面的小案例可以看出,如果要遍历一个对象数组
for in循环会返回数组的下标
普通for循环和for of循环都能返回具体的数据,但是for of循环明显要更简便一点

写作经验不多,有问题欢迎在评论区提出

  • 4
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值