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 相关文章推荐
javascript 写类方式之九
Jul 05 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
Immutable 在 JavaScript 中的应用
May 02 Javascript
js微信分享API
Oct 11 Javascript
纯JavaScript手写图片轮播代码
Oct 20 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
javascript基础知识之html5轮播图实例讲解(44)
Feb 17 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
React 组件中的 bind(this)示例代码
Sep 16 Javascript
webpack结合express实现自动刷新的方法
May 07 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
帅气的琦玉老师
2020/03/02 日漫
php 传值赋值与引用赋值的区别
2010/12/29 PHP
基于header的一些常用指令详解
2013/06/06 PHP
Destoon实现多表查询示例
2014/08/21 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
javascript 全等号运算符使用说明
2010/05/31 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
2013/01/23 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
php的文件上传入门教程(实例讲解)
2014/04/10 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
tab栏切换原理
2017/03/22 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
深入理解Python3 内置函数大全
2017/11/23 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
Python Numpy,mask图像的生成详解
2020/02/19 Python
python实现飞船大战
2020/04/24 Python
css3 media 响应式布局的简单实例
2016/08/03 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
英国领先的男士服装和时尚零售商:Burton
2017/01/09 全球购物
欧舒丹美国官网:L’Occitane美国
2018/02/23 全球购物
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
校长竞聘演讲稿
2014/05/16 职场文书
经营目标责任书
2015/05/08 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL