find/some/every/includes:数组查找与判断实战用法|JS 基础语法与数据操作篇

news2026/3/16 15:35:56
【find/some/every/includes】数组查找与判断从核心逻辑到落地实操彻底搞懂数组判断的最佳写法避开高频坑 文章目录前言一、先搞清楚find / some / every / includes 在干什么二、数组查找与判断的 10 个常用场景2.1 场景 1找第一个符合条件的对象find2.2 场景 2判断是否至少有一个满足条件some2.3 场景 3判断是否全部满足条件every2.4 场景 4判断数组是否包含某个值includes2.5 场景 5权限判断是否有某个权限some includes2.6 场景 6表单校验是否全部必填项已填every2.7 场景 7勾选状态是否全部选中every2.8 场景 8找第一个并给默认值find ??2.9 场景 9对象数组是否包含某个 idsome2.10 场景 10组合判断全部满足 A 且至少一个满足 Bevery some三、容易踩的坑3.1 find 找不到返回 undefined直接解构会报错3.2 空数组时 every 返回 truesome 返回 false3.3 includes 只能判断简单值对象数组要用 some3.4 find 和 filter 的区别find 只找第一个filter 找全部3.5 some 和 every 的短路特性找到就停四、实战推荐写法模板五、小结 本系列专栏导航同学们好我是 Eugene尤金一个拥有多年中后台开发经验的前端工程师~Eugene 发音很简单/juːˈdʒiːn/大家怎么顺口怎么叫就好你是否也有过明明学过很多技术一到关键时候却讲不出来、甚至写不出来你是否也曾怀疑自己是不是太笨了明明感觉会却总差一口气就算想沉下心从头梳理可工作那么忙回家还要陪伴家人。一天只有24小时时间永远不够用常常感到力不从心。技术行业本就是逆水行舟不进则退。如果你也有同样的困扰别慌。从现在开始跟着我一起心态归零利用碎片时间来一次彻彻底底的基础扫盲。这一次我们一起慢慢来扎扎实实变强。不搞花里胡哨的理论堆砌只分享看得懂、用得上的前端干货咱们一起稳步积累真正摆脱“面向搜索引擎写代码”的尴尬。今天是2026年2月17日农历正月初一在2026 愿大家身体健康无病痛收入翻番钱包鼓代码 0 Error 0 Warning需求一次过上线零回滚策马扬鞭从小白进阶专家新年一路 “狂飙” 给大家拜年啦~前言前端里权限判断、表单校验、勾选状态几乎都要判断「数组里有没有某个值」或「是否全部满足条件」。很多人习惯用for循环 if一把梭或者indexOf判断写多了既啰嗦又容易漏边界情况。用find/some/every/includes这四个方法可以把「查找 → 判断 → 校验」写得更短、更语义化也更好处理边界情况。本文用 10 个常见场景把日常该怎么选、为什么这么选、容易踩的坑讲清楚。⬆ 返回目录一、先搞清楚find/some/every/includes在干什么这四个方法都不是黑魔法本质是在不动原数组的前提下用一次遍历完成「查找 / 判断是否存在 / 判断是否全部满足」。方法在干什么返回值什么时候停find找第一个符合条件的元素找到的元素找不到返回undefined找到第一个就停some判断是否至少有一个满足条件true或false找到第一个就停短路every判断是否全部满足条件true或false遇到第一个不满足就停短路includes判断数组里是否包含某个值严格相等true或false遍历完或找到就停// 传统 for意图分散还要自己管 breakletfoundnull;for(leti0;iusers.length;i){if(users[i].idtargetId){foundusers[i];break;}}// find一眼看出「找第一个 id 匹配的」constfoundusers.find((u)u.idtargetId);记住一点能用语义化方法就不用循环用find/some/every/includes把「要查什么、要判断什么」写清楚比「怎么循环、怎么break」更重要。⬆ 返回目录二、数组查找与判断的 10 个常用场景假设接口返回的数据类似constusers[{id:1,name:张三,role:admin,status:active},{id:2,name:李四,role:user,status:active},{id:3,name:王五,role:user,status:inactive},];constpermissions[read,write,delete];constselectedIds[1,2];下面 10 个写法覆盖权限判断、表单校验、勾选状态等真实场景。⬆ 返回目录2.1 场景 1找第一个符合条件的对象findconstadminusers.find((user)user.roleadmin);// { id: 1, name: 张三, role: admin, status: active }// 找不到返回 undefinedconstsuperAdminusers.find((user)user.rolesuperAdmin);// undefined适用默认选中第一项、取第一个有效配置、根据 id 找对象等。注意find找不到返回undefined后续解构或访问属性要处理用??给默认值。⬆ 返回目录2.2 场景 2判断是否至少有一个满足条件someconsthasAdminusers.some((user)user.roleadmin);// trueconsthasInactiveusers.some((user)user.statusinactive);// true适用权限判断「是否有任一管理员」、表单校验「是否有错误项」、状态判断「是否有未完成项」等。注意空数组时some返回false业务上要结合「空列表算通过还是不算」处理。⬆ 返回目录2.3 场景 3判断是否全部满足条件everyconstallActiveusers.every((user)user.statusactive);// false因为有王五是 inactiveconstallHaveIdusers.every((user)user.id!null);// true适用表单校验「是否全部勾选」、权限判断「是否全部有权限」、状态判断「是否全部完成」等。注意空数组时every返回true空真业务上要结合「空列表算通过还是不算」处理。⬆ 返回目录2.4 场景 4判断数组是否包含某个值includesconsthasReadpermissions.includes(read);// trueconsthasExecutepermissions.includes(execute);// false适用简单值数组的包含判断、权限列表判断、标签列表判断等。注意includes底层用 严格相等做比较这对「简单值string/number/boolean」很友好但对「对象/数组」这类引用类型完全不适用因为比较的是内存地址而非内容。⬆ 返回目录2.5 场景 5权限判断是否有某个权限someincludesconstuserPermissions[read,write];constrequiredPermissiondelete;consthasPermissionuserPermissions.includes(requiredPermission);// false// 或判断多个权限中是否有任一constrequiredPermissions[delete,admin];consthasAnyPermissionrequiredPermissions.some((perm)userPermissions.includes(perm));// false适用按钮权限控制、路由权限控制、功能权限判断等。推荐简单值用includes复杂条件用some 回调。⬆ 返回目录2.6 场景 6表单校验是否全部必填项已填everyconstformFields[{name:username,value:张三,required:true},{name:email,value:,required:true},{name:phone,value:13800138000,required:false},];constallRequiredFilledformFields.filter((field)field.required).every((field)field.value.trim()!);// falseemail 为空适用表单提交前校验、批量操作前校验、多步骤流程校验等。推荐先filter筛出必填项再用every判断是否全部有值。⬆ 返回目录2.7 场景 7勾选状态是否全部选中everyconstcheckboxes[{id:1,checked:true},{id:2,checked:true},{id:3,checked:false},];constallCheckedcheckboxes.every((item)item.checked);// falseconsthasCheckedcheckboxes.some((item)item.checked);// true适用全选/反选功能、批量操作按钮状态、表格多选状态等。推荐every判断全选some判断是否有选中项。⬆ 返回目录2.8 场景 8找第一个并给默认值find??constdefaultUserusers.find((user)user.roleadmin)??{id:0,name:默认用户,role:guest,};适用默认选中第一项、取第一个有效配置、兜底默认值等。注意find 找不到返回undefined用??可以统一成默认对象避免后面解构报错。⬆ 返回目录2.9 场景 9对象数组是否包含某个 idsomeconsttargetId2;constexistsusers.some((user)user.idtargetId);// true// 或判断多个 id 中是否有任一存在consttargetIds[2,5];consthasAnytargetIds.some((id)users.some((user)user.idid));// true2 存在适用判断选中项是否在列表里、判断 id 是否已存在、去重前判断等。注意对象数组不能用includes要用some 条件判断。⬆ 返回目录2.10 场景 10组合判断全部满足 A 且至少一个满足 BeverysomeconstallActiveusers.every((user)user.statusactive);consthasAdminusers.some((user)user.roleadmin);// 业务逻辑全部激活 且 有管理员constcanOperateallActivehasAdmin;// false因为有 inactive 的适用复杂业务规则判断、多条件组合校验、权限组合判断等。推荐把每个条件拆成变量用名字表达「这一步在判断什么」可读性和调试都会好很多。⬆ 返回目录三、容易踩的坑3.1find找不到返回undefined直接解构会报错constuserusers.find((u)u.id999);const{name}user;// TypeError: Cannot read property name of undefined正确用??给默认值或先判断再解构。constuserusers.find((u)u.id999)??{name:未知};// 或constuserusers.find((u)u.id999);if(user){const{name}user;}⬆ 返回目录3.2 空数组时every返回truesome返回false[].every((x)x0);// true空真[].some((x)x0);// false业务上要结合「空列表算通过还是不算」处理。例如表单校验空列表可能应该算「未填写」而不是「通过」。constfields[];constallFilledfields.length0fields.every((f)f.value);// 先判断长度再 every⬆ 返回目录3.3includes只能判断简单值对象数组要用someconstusers[{id:1},{id:2}];users.includes({id:1});// false对象引用不同// 正确用 some 条件判断users.some((user)user.id1);// true⬆ 返回目录3.4find和filter的区别find只找第一个filter找全部constfirstAdminusers.find((u)u.roleadmin);// 返回第一个对象或 undefinedconstallAdminsusers.filter((u)u.roleadmin);// 返回数组可能为空数组 []要「第一个」用find要「全部」用filter别混用。⬆ 返回目录3.5some和every的短路特性找到就停constusers[{id:1,role:admin},{id:2,role:user},{id:3,role:admin},];// some找到第一个 admin 就停不会继续遍历users.some((u){console.log(u.id);// 只打印 1returnu.roleadmin;});// every遇到第一个不是 admin 就停users.every((u){console.log(u.id);// 打印 1, 2遇到 user 就停returnu.roleadmin;});性能上这是好事但如果有副作用如打印、修改外部变量要注意只执行到第一个匹配项。⬆ 返回目录四、实战推荐写法模板权限判断是否有某个权限constuserPermissionsresponse?.data?.permissions??[];constcanDeleteuserPermissions.includes(delete);// 或判断多个权限中是否有任一constcanManage[delete,admin].some((perm)userPermissions.includes(perm));表单校验是否全部必填项已填constfieldsformData?.fields??[];constisValidfields.filter((field)field.required).every((field)field.value?.trim()!);// 或更严格的校验constisValidfields.length0fields.filter((f)f.required).every((f)f.value?.trim()!);勾选状态全选/部分选中constitemstableData??[];constallCheckeditems.length0items.every((item)item.checked);consthasCheckeditems.some((item)item.checked);// 全选按钮状态constselectAllDisableditems.length0;constselectAllCheckedallChecked;找第一个并给默认值constdefaultItem(response?.data?.list??[]).find((item)item.isDefault)??{id:0,name:默认选项,value:,};对象数组是否包含某个 idconstselectedIds[1,2,3];consttargetId2;constisSelectedselectedIds.includes(targetId);// 对象数组constusersresponse?.data?.users??[];consttargetId2;constexistsusers.some((user)user.idtargetId);⬆ 返回目录五、小结场景推荐写法返回值找第一个符合条件的对象list.find(item ...)对象或undefined判断是否至少有一个满足list.some(item ...)true或false判断是否全部满足list.every(item ...)true或false判断是否包含某个值简单值list.includes(value)true或false找第一个并给默认值list.find(...) ?? 默认值对象或默认值对象数组是否包含某个 idlist.some(item item.id id)true或false表单校验全部必填已填list.filter(...).every(...)true或false勾选状态全部选中list.every(item item.checked)true或false记住find负责「找」some负责「至少一个」every负责「全部」includes负责「简单值包含」。日常写权限、校验、状态判断时先想清楚是要找对象、判断存在、判断全部还是简单值包含再选方法代码会干净很多也少踩坑。特别提醒find找不到返回undefined记得用??给默认值空数组时every为truesome为false业务上要结合长度判断对象数组不能用includes要用some 条件判断⬆ 返回目录 本系列专栏导航 JS 基础语法与数据操作一、《var/let/const变量与作用域实战选型JS 基础语法与数据操作篇》二、《this、箭头函数与普通函数前端实战避坑指南 | JS 基础语法与数据操作篇》三、《对象解构赋值接口数据解包 10 个实战写法JS 基础语法与数据操作篇》四、《map/filter/reduce数组10个常用实战操作JS 基础语法与数据操作篇》五、《find/some/every/includes数组查找与判断实战用法JS 基础语法与数据操作篇》六、《sort/localeCompare对象数组排序与分组实战JS 基础语法与数据操作篇》七、《模板字符串 /split/join/ 正则字符串处理实战JS 基础语法与数据操作篇》八、《Date/dayjs日期时间处理实战JS 基础语法与数据操作篇》九、《try/catch/Promise前端错误处理实战JS 基础语法与数据操作篇》十、《import/export前端模块化实战JS 基础语法与数据操作篇》 跟着系列慢慢学把技术功底扎扎实实地打牢 更多内容TS/Vue/工程化等共47篇已整理成「全体系总目录」收藏后可一站式学习 系列总览想系统学习Vue3中后台开发收藏这份「全体系指南」47篇干货从基础到工程化全覆盖《前端基础实战JS/TS与Vue体系化扫盲47 篇完整目录 避坑》 每篇都配套实战场景避坑指南帮你摆脱「面向搜索引擎写代码」的尴尬⬆ 返回目录学习本就是一场持久战不需要急着一口吃成胖子。哪怕今天你只记住了一点点这都是实打实的进步。后续我还会继续用这种大白话、讲实战方式带大家扫盲更多前端基础。关注我不迷路咱们把那些曾经模糊的知识点一个个彻底搞清楚。如果你觉得这篇内容对你有帮助不妨点赞收藏下次写代码卡壳时拿出来翻一翻比搜引擎更靠谱。我是 Eugene你的电子学友我们下一篇干货见

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2416375.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站,会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后,网站没有变化的情况。 不熟悉siteground主机的新手,遇到这个问题,就很抓狂,明明是哪都没操作错误&#x…

网络编程(Modbus进阶)

思维导图 Modbus RTU(先学一点理论) 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议,由 Modicon 公司(现施耐德电气)于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇,在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下: 【Note】:如果你已经完成安装等操作,可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作,重…

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周,有很多同学在写期末Java web作业时,运行tomcat出现乱码问题,经过多次解决与研究,我做了如下整理: 原因: IDEA本身编码与tomcat的编码与Windows编码不同导致,Windows 系统控制台…

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…