JS数组方法some、every和find的使用详情


Posted in Javascript onOctober 05, 2021

1、some

在MDN中这样定义some()方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

简而言之就是:它对数组中的每一项进行校验,只要有一项通过了就是true

  • 它只会返回truefalse
  • 它会对数组中的每一项进行检测,千万不要在some里面进行if else操作
  • 不要在return后面写truefalsereturn后面跟的是你的条件

最近做后台管理系统遇到一个需求:弹出一个Dialog,只要这个Dialog里面的input有一个有值,就可以;否则提示至少要有一个值。

JS数组方法some、every和find的使用详情

数据结构如下,使用some

let arr = [
    { value: "apple" },
    { value: "" },
    { value: "banana" },
    { value: "orange" },
    { value: "" },
]
let res = arr.some(item=>{
    return item.value !== ""
})
console.log(res);

在这里,只要有值,res就为true,所以我们可以在restrue时进行下一步操作。

if (res) {
    console.log("数组有值");
} else {
    console.log("至少输入一个值");
}

2、every

every的使用方法和some一样。 在MDN中:every()方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

简而言之就是:它对数组中的每一项进行校验,只要有一项不通过它就是false
注意事项与some一样。 如果要求每一个输入框中都必须有值时,

let arr2 = [
    { value: "apple" },
    { value: "" },
    { value: "banana" },
    { value: "orange" },
    { value: "er" },
]

var res2 = arr2.every(item => {
    return item.value !== ""
})
console.log(res2);

在这里,只要有一项没有值,res2就为false

if (!res2) {
    //res2为真,则走else;为假,则走if
    console.log("输入框有空值");
} else {
    console.log("输入框没空值");
    console.log("进行下步操作");
}

3、find

MDN中,find()方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined
注意:find()和上面两个不一样,它返回的是值,而且是第一个满足条件的值

let arr3 = [
    { value: "" },
    { value: "" },
    { value: "" },
    { value: "" },
    { value: "apple" },
]
var res3 = arr3.find(item => {
    return item.value !== ""
})
console.log(res3);

可以根据find的返回值是否为undefined来判断itemvalue,

if (res3) {
    //res3有值,在这里进行下一步操作。
    console.log("数组中至少有一个值");
} else {
    //res3为undefined
    console.log("数组为空!");
}

到此这篇关于JS数组方法some、everyfind的使用详情的文章就介绍到这了,更多相关JS数组方法someeveryfind的使用内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
从阿里妈妈发现的几个不错的表单验证函数
Sep 21 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
Oct 11 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
js右下角弹出提示框示例代码
Jan 12 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
基于wordpress的ajax写法详解
Jan 02 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
js中的数组对象排序分析
Dec 11 Javascript
实例讲解vue源码架构
Jan 24 Javascript
Vue.js实现tab切换效果
Jul 24 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 Javascript
vue实现导航菜单和编辑文本的示例代码
Jul 04 Javascript
8个JS的reduce使用实例和reduce操作方式
Oct 05 #Javascript
JS 4个超级实用的小技巧 提升开发效率
Oct 05 #Javascript
JavaScript实现简单拖拽效果
Sep 15 #Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 #Javascript
Javascript之datagrid查询详解
Sep 15 #Javascript
Js类的构建与继承案例详解
Sep 15 #Javascript
JavaScript 数组去重详解
Sep 15 #Javascript
You might like
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
php开发时容易忘记的一些技术细节
2016/02/03 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
Node.js返回JSONP详解
2016/05/18 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
2016/11/29 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
Python实现在线音乐播放器
2017/03/03 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
Python求出0~100以内的所有素数
2018/01/23 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
python制作微博图片爬取工具
2021/01/16 Python
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
垃圾回收的优点和原理
2014/05/16 面试题
学生个人求职自荐信格式
2013/09/23 职场文书
大学毕业自我评价
2014/02/02 职场文书
医学生临床实习自我评价
2014/03/07 职场文书
节约用水倡议书
2014/04/16 职场文书
2014司机年终工作总结
2014/12/05 职场文书