news 2026/9/1 19:51:04

js中includes的不同使用场景

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
js中includes的不同使用场景

简介:includes()是 ES6 新增的方法,数组、字符串都拥有该 API,但是两者查找逻辑有区别,很多同学容易混淆,本文结合示例讲清楚用法、区别、注意事项。

一、字符串的 includes ()

作用

判断一个字符串里面是否包含某个子片段,只要能匹配一部分字符就返回true

语法

str.includes(要查找的子串)
  • 返回值:布尔值true / false
  • 区分大小写!"Banana".includes("ban")→ false

代码示例

let fruit = "香蕉"; console.log(fruit.includes("香")); // true,包含"香"这个片段 console.log(fruit.includes("苹")); // false // 业务常用:多字段模糊搜索 const keyword = "张"; const item = { name: "张三", gender: "男" } // 名字或者性别任意一个包含关键词就匹配 let res = item.name.includes(keyword) || item.gender.includes(keyword); console.log(res); // true

✅字符串 includes:匹配片段,不需要完整相等,适合做模糊搜索。

二、数组的 includes ()

作用

判断数组中是否存在完整的数组元素,必须和数组某一项完全相等才返回 true。

语法

arr.includes(要查找的值)
  • 返回值:布尔值true / false

代码示例

const arr = [10, 20, 30, 40]; console.log(arr.includes(20)); // true,数组存在完整元素20 console.log(arr.includes(50)); // false,数组没有50 // ❗重点:数组includes不会做片段匹配! const arr2 = ["苹果","香蕉","橙子"] console.log(arr2.includes("香")); // false!数组没有叫"香"的元素,"香蕉"才是完整元素

✅数组 includes:匹配完整元素,不是匹配片段。数组项必须全等。

三、核心对比(重点,面试常考)

类型方法查找规则例子
字符串str.includes('a')匹配子片段,部分对上就 true"香蕉".includes("香") → true
数组arr.includes('a')匹配完整数组元素,必须全等["香蕉"].includes("香") → false

易错坑点

  1. 数组includes不能用来模糊匹配数组里面字符串的一部分 如果想模糊搜索数组里面字符串元素,要结合some+ 字符串 includes:
const list = ["苹果","香蕉","橙子"]; // 需求:找有没有带“香”的水果 const has = list.some(item => item.includes("香")); console.log(has); // true
  1. 对象数组不能直接用 includes
let arr = [{name:'张三'}]; console.log(arr.includes({name:'张三'})); //false,对象引用地址不同

includes 做的是===严格相等,对象对比看内存地址,不能直接匹配字面量对象。对象数组查找建议用some/find

  1. 支持第二个参数:指定开始查找的下标
//字符串 'abcde'.includes('c',3); //从下标3开始找,找不到c,返回false //数组 [1,2,3,4].includes(2,2); //从下标2开始找,找不到2,返回false

四、业务场景小结

  1. ✅字符串.includes():搜索框模糊匹配、判断文本是否包含关键字。
  2. ✅数组.includes():判断数组是否存在某个确定完整值,比如判断选中值是否在白名单数组。
  3. ✅数组内部字符串模糊检索:数组.some(item=>item.includes(关键词))组合使用。

五、与 indexOf 简单对比

  • includes直接返回布尔值,代码可读性更好;
  • indexOf返回下标,找不到返回‑1;
  • includes可以识别NaNindexOf识别不了NaN
const arr = [NaN] console.log(arr.includes(NaN)); // true console.log(arr.indexOf(NaN)); // -1

总结:需要布尔判断优先用includes,需要拿到索引位置再用indexOf

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/9/1 19:49:42

游戏管理工具开发实战:数据统一、封面处理与自动更新

在游戏开发与运营的日常工作中,我们常常需要处理海量的游戏资源、元数据以及版本发布。手动管理这些内容不仅效率低下,而且极易出错,尤其是在需要统一更新多款游戏或调整大量素材时。近期,一个名为“绅游管理工具”的辅助软件更新…

作者头像 李华
网站建设 2026/9/1 19:44:40

模玩新品情报追踪系统:从COMING SOON到自动监控

看到 FansToys FT-63 TURBO COMING SOON! 这条预告时,玩家通常的回应是去搜索,然后得到一堆不完整的信息。有人说是新品,有人说是系列改版,有人贴出一张没有来源的渲染图,还有人已经开始发预订链接。信息分散、真假混杂…

作者头像 李华
网站建设 2026/9/1 19:44:11

技术学习总有‘雾感‘?三层去雾框架让你不再触不可及

你有没有过这样的时刻:面对一个新技术栈,教程看了很多,代码也能照着敲,可一旦脱离样例,还是不会写。工具文档一行行看下来,每个单词都认识,合上页面却不知道自己该从哪里开始。这种状态&#xf…

作者头像 李华
网站建设 2026/9/1 19:42:54

2026铁岭工程建筑材料检测排名 TOP5 CMA 资质提供钢材检测、水泥检测、砂石检测 全覆盖联系方式推荐

铁岭建材检测市场近年机构数量激增,各类实验室招牌林立,但资质参差、能力悬殊的问题让工程单位头疼不已。建筑总包方、混凝土搅拌站、市政项目部、装修企业选材验收时,稍有不慎就会碰上无资质机构出具的检测报告,这类文件根本无法…

作者头像 李华
网站建设 2026/9/1 19:39:27

AI Agent入门指南:小白程序员必备,收藏学习大模型新趋势!

本文深入浅出地介绍了AI Agent的概念、发展历程及其核心技术组成,包括大模型、角色与人格、记忆、工具、规划和循环等模块。文章通过对比Agent与普通聊天机器人的区别,阐述了Agent在编程、研究助手、客服运营及个人助理等领域的应用潜力,并展…

作者头像 李华
网站建设 2026/9/1 19:36:27

ComfyUI v0.33.x实测:从AI音乐生成到视频渲染,一套工作流全搞定

ComfyUI v0.33.x实测:从AI音乐生成到视频渲染,一套工作流全搞定赛博仓鼠|专注AIGC本地部署实测|每期分享真实踩坑经验与资源链接2026年8月,ComfyUI连续发布了v0.33.0、v0.33.1、v0.33.2三个版本。表面看是常规迭代&…

作者头像 李华