vue数组中不满足条件跳出循环问题

 更新时间:2023年07月12日 17:11:31   作者:Lemon今天学习了吗  
这篇文章主要介绍了vue数组中不满足条件跳出循环问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue数组中不满足条件跳出循环

场景

在表格中选中的数据在右边显示,在点击确定按钮时,循环判断没有填写条件名称的数据,第一个不满足条件的显示输入框,且只弹出一次警告。

分析

在vue项目中,循环多数习惯会用forEach、map等方法去遍历数组,但是大家会发现在forEachforEachforEach和map中使用break和continue不仅不能调出整个循环 ,还会报错,使用return也不行。

解决方式

1. 使用for循环 ;

// 普通for循环
for(let i  = 0; i <= 5; i++){
    break
}
//遍历对象:for in 返回的是索引(键值),直接拿到key
for(let key in Object){
    break
}
//遍历数组: for of 返回元素,不可用于原对象(没有索引)
for(let item of Array){
    break
}

2. 使用try-catch-finally处理forEach的循环;

try{ 
 // 可能会导致错误的代码
} catch(error){ 
 // 在错误发生时怎么处理
} finally {
 // 只要代码中包含 finally 子句,那么无论try 还是catch 语句块中的return 语句都将被忽略。
}
let arr= [1, 2, 'lemon', 4, 5,'666']
try {
   arr.forEach(item => {
        // 元素达到条件时需要抛出的异常,再catch中处理
        if (item === 'lemon') {
            throw new Error("lemon")
        } else {
            throw new Error("other")
        }
  })
} catch (e) {
    // 异常抛出时你想要做的操作
    console.log(e.massage);
} finally {
    console.log(1) //一定会执行的操作
}

3. 使用some方法return true跳出循环,数组里面所有的元素有一个符合条件就返回true;

let arr = [1, 2, 'lemon', 4, 5,'666']
arr.some((item) => {
    if (item === 'lemon') {
        return true
    }
})

4. every()使用return false 跳出循环,数组里面所有的元素都符合条件就返回true;

let arr = [1, 2, 'lemon', 4, 5,'666']
arr.every((item) => {
    if (item === 'lemon') {
        return false
    } else {
        return true
    }
})

实现

综上所述,最终使用some方法对于上面需求实现是最简单便捷的。

    //提交  this.selectedArr:选中的数据
    async submit() {
      if (this.selectedArr.length > 0) {
        this.btn_loading = true
        this.selectedArr.some((item) => {
            if (!item.name) {
                // 显示输入框
              this.selctEditClick(item)
              this.$message.warning('条件名称不能为空')
              this.btn_loading = false
              return true
            }
        }) 
      } else {
          this.$message.warning('请选择要添加的条件数据')
      }
    },
     // 选中数据字段编辑
    selctEditClick(data) {
      this.selectedArr.forEach((item) => {
        this.$set(item, 'isEdit', false)
        if (item.keyId == data.keyId) {
          this.$set(item, 'isEdit', true)
        }
      })
    },

vue数组循环遍历中途跳出整个循环

vue数组循环遍历中途跳出整个循环,使用some进行循环,return true时,跳出整个循环

judgePoint(arr) {
      if (this.haveError) {
        this.haveError = false
      }
      arr.some((item, index) => {
        if (item.x.match(/^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/)) {
          if (!item.y.match(/^(\-|\+)?([0-8]?\d{1}\.\d{0,6}|90\.0{0,6}|[0-8]?\d{1}|90)$/)) {
            this.$message({
              type: 'warning',
              message: '点' + (index + 1) + '纬度为-90~90,小数限6位'
            })
            this.haveError = true
            return true
          }
        } else {
          this.$message({
            type: 'warning',
            message: '点' + (index + 1) + '经度为-180~180,小数限6位!'
          })
          this.haveError = true
          return true
        }
      });
    },

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vuejs指令详解

    vuejs指令详解

    本文介绍了vuejs指令的相关知识,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • VUE正则表达式用法全集整理(推荐!)

    VUE正则表达式用法全集整理(推荐!)

    正则表达式是由一些特定的字符组成,代表一个规则,可以用来检验数据格式是否合法,也可以在一段文本中查找满足要求的内容,这篇文章主要给大家介绍了关于VUE正则表达式用法的相关资料,需要的朋友可以参考下
    2024-02-02
  • vue3 选中对话框时对话框右侧出一个箭头效果

    vue3 选中对话框时对话框右侧出一个箭头效果

    本文主要介绍了Vue3实现选中对话框带箭头效果的方法,首先通过后台获取数据进行遍历,利用ts代码判断选中下标与循环游标是否一致以改变样式,感兴趣的朋友一起看看吧
    2024-10-10
  • Vue的export default和带返回值的data()及@符号的用法说明

    Vue的export default和带返回值的data()及@符号的用法说明

    这篇文章主要介绍了Vue的export default和带返回值的data()及@符号的用法说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • 从0到1搭建element后台框架优化篇(打包优化)

    从0到1搭建element后台框架优化篇(打包优化)

    这篇文章主要介绍了从0到1搭建element后台框架优化篇(打包优化),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • vue项目中如何调用多个不同的ip接口

    vue项目中如何调用多个不同的ip接口

    这篇文章主要介绍了vue项目中如何调用多个不同的ip接口,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue 多入口文件搭建 vue多页面搭建的实例讲解

    vue 多入口文件搭建 vue多页面搭建的实例讲解

    下面小编就为大家分享一篇vue 多入口文件搭建 vue多页面搭建的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue 实现微信浮标效果

    vue 实现微信浮标效果

    微信的浮窗,大伙应该都用过,当我们正在阅读一篇公众号文章时,突然需要处理微信消息,点击浮窗,在微信上会有个浮标,点击浮标可以再次回到文章。今天小编抽空给大家介绍vue 实现微信浮标效果,感兴趣的朋友一起看看吧
    2019-09-09
  • Vue3中Composition API和Options API的区别

    Vue3中Composition API和Options API的区别

    Vue3的Composition API和Options API是Vue.js框架中的两种不同的API,本文主要介绍了Vue3中Composition API和Options API的区别,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • Vue3+ElementPlus封装图片空间组件的门面实例

    Vue3+ElementPlus封装图片空间组件的门面实例

    图片空间是用于管理上传图片的工具,可以让用户方便地存储、管理和调用图片,提高工作效率,它通常具备多样的样式,但操作入口统一,便于使用,通过图片空间组件,用户能直接在其他模块(例如商品图片)中选择所需图片
    2024-09-09

最新评论