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 相关文章推荐
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
Apr 12 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
vue实现全选、反选功能
Nov 17 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 Javascript
js+html5 canvas实现ps钢笔抠图
Apr 28 Javascript
ES6 Map结构的应用实例分析
Jun 26 Javascript
antd table按表格里的日期去排序操作
Nov 17 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
php过滤危险html代码
2008/08/18 PHP
php Rename 更改文件、文件夹名称
2011/05/24 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
Python中的匿名函数使用简介
2015/04/27 Python
一道python走迷宫算法题
2018/01/22 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
Python enumerate内置库用法解析
2020/02/24 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
运动会广播稿诗歌版
2014/09/12 职场文书
刑事辩护词范文
2015/05/21 职场文书
教师节座谈会主持词
2015/07/03 职场文书
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle