首页 > 其他分享 >vue中退出循环的方法

vue中退出循环的方法

时间:2023-03-30 11:33:07浏览次数:32  
标签:vue return admin break 循环 报错 退出

forEach
forEach不能使用break和continue。return也无法退出循环。

使用break,会报错(报错信息:SyntaxError: Illegal break statement)。

使用continue,会报错(报错信息:SyntaxError: Illegal continue statement: no surrounding iteration statement)

使用return,只能跳出本次循环,并不能终止循环。

退出循环的方法:
1. 仍用 forEach:但加上try...catch...

try{

    this.userList.forEach( u => {

        if( u.username === "admin"){

            alert("找到admin用户");

            throw new Error("已找到,退出循环");

        }

    })

}catch(e){

    console.log(e) 

};

  

注意:此方法将退出循环,继续执行该函数内 循环后面的代码。

若想直接退出当前函数,catch里必须有return。即try{}catch(){...return}

 

2. 改用 for循环 

for(let i=0;i<this.userList.length;i++){

    if( this.userList[i].username === "admin"){

        alert("找到admin用户");

        break;

    }

}

 

注意:此方法将退出循环,继续执行该函数内 循环后面的代码。

若想直接退出当前函数,将break改为return。

 

3. 改用 some( )

this.userList.some( u =>{

    if( u.username === "admin"){

        alert("找到admin用户");

        return true; 

    }

})

 

注意:some只有循环内部return true才会退出循环,继续执行该函数内 循环后面的代码。

 

4. 改用 every( )

this.userList.every( u =>{

    if( u.username === "admin"){

        alert("找到admin用户");

        return false; 

    }else{

        return true;

})

 

注意:every只要循环内部return false就会退出循环,继续执行该函数内 循环后面的代码。

标签:vue,return,admin,break,循环,报错,退出
From: https://www.cnblogs.com/lemperor/p/17271948.html

相关文章

  • Java流程控制(分支结构、循环结构)
    目录JavaSE流程控制分支结构if...else循环结构whiledowhilefor关键字JavaSE流程控制分支结构if...else//单分支,()中的条件成立,则执行if代码块if(){}//双分支,()......
  • ant-design-vue 两个select省市联动是典型的例子(添加汉语名字)
    <template><div><a-form:label-col='{span:7}':wrapper-col='{span:15}'><a-row><a-col:span='12'><a-form-itemlabel='省'>......
  • 第十六篇 vue - 深入组件 - 注册
    组件注册一个Vue组件在使用前需要先被“注册”,这样Vue才能在渲染模板时找到其对应的实现。组件注册有两种方式:全局注册和局部注册全局注册app.component()我们......
  • Vue
    Vue1.什么是Vue?Vue是一款渐进式前端框架基于MVVM模式,免除JS中DOM操作,简化书写和操作流程.2.如何使用?1.新建一个HTML文件,引入Vue.js文件.<scriptsrc="js/vu......
  • Node.js: 如何退出node命令或者node server
    如果是要退出node命令的话,可以使用:$node>9+2332>process.exit()$ 或者$node>9+2332>.exit$ 如果是要退出nodeserver的话,可以使用:  别人是推荐点击两......
  • vue-qr引入时报错You may need an appropriate loader to handle this file type. 问
    今天研究了一下vue生成二维码的功能,在使用vue-qr插件的时候,在所需页面引入,报错,于是就研究了一番。  解决方法找到node_modules/vue-qr/dist/vue-qr.js文件,搜...e,将......
  • vue 实现下拉滑动触底加载
    实现下拉滑动触底加载可以分为以下几个步骤:监听滚动事件,判断是否到达底部。到达底部后,发起数据请求,获取数据。将获取到的数据添加到页面上。下面是一个基于Vue......
  • vue-router学习笔记
    入门router-link//GotoHomerouter-view//router-view将显示与url对应的组件。动态路由匹配带参数的动态路由匹配($route.params)constUser={template:......
  • vue全家桶进阶之路24:Mock
    Mock是一个JavaScript库,用于生成随机数据或模拟HTTP请求响应,用于前端开发中的单元测试、功能测试、集成测试等场景。Mock可以生成各种类型的数据,包括字符串、数字、......
  • Vue.js 路由的query参数
    视频4.路由的query参数传递参数<!--跳转并携带query参数,to的字符串写法--><router-link:to="/home/message/detail?id=666&title=你好">跳转</router-link> ......