简介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 字符串 includesconst list [苹果,香蕉,橙子]; // 需求找有没有带“香”的水果 const has list.some(item item.includes(香)); console.log(has); // true对象数组不能直接用 includeslet 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(itemitem.includes(关键词))组合使用。五、与 indexOf 简单对比includes直接返回布尔值代码可读性更好indexOf返回下标找不到返回‑1includes可以识别NaNindexOf识别不了NaN。const arr [NaN] console.log(arr.includes(NaN)); // true console.log(arr.indexOf(NaN)); // -1总结需要布尔判断优先用includes需要拿到索引位置再用indexOf。