简介:
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 |
易错坑点
- 数组
includes不能用来模糊匹配数组里面字符串的一部分 如果想模糊搜索数组里面字符串元素,要结合some+ 字符串 includes:
const list = ["苹果","香蕉","橙子"]; // 需求:找有没有带“香”的水果 const has = list.some(item => item.includes("香")); console.log(has); // true- 对象数组不能直接用 includes
let arr = [{name:'张三'}]; console.log(arr.includes({name:'张三'})); //false,对象引用地址不同includes 做的是
===严格相等,对象对比看内存地址,不能直接匹配字面量对象。对象数组查找建议用some/find。
- 支持第二个参数:指定开始查找的下标
//字符串 'abcde'.includes('c',3); //从下标3开始找,找不到c,返回false //数组 [1,2,3,4].includes(2,2); //从下标2开始找,找不到2,返回false四、业务场景小结
- ✅字符串
.includes():搜索框模糊匹配、判断文本是否包含关键字。 - ✅数组
.includes():判断数组是否存在某个确定完整值,比如判断选中值是否在白名单数组。 - ✅数组内部字符串模糊检索:
数组.some(item=>item.includes(关键词))组合使用。
五、与 indexOf 简单对比
includes直接返回布尔值,代码可读性更好;indexOf返回下标,找不到返回‑1;includes可以识别NaN,indexOf识别不了NaN。
const arr = [NaN] console.log(arr.includes(NaN)); // true console.log(arr.indexOf(NaN)); // -1总结:需要布尔判断优先用
includes,需要拿到索引位置再用indexOf。