Array.includes优雅替代多||判断方法

`Array.includes()` 是比多重 `||` 判断更优雅、可靠且可读性更强的值匹配方案，它基于严格相等（SameValueZero），天然支持 `NaN`，避免隐式类型转换陷阱，同时将分散的判断逻辑集中到一个语义清晰的数组中；但需注意其仅适用于浅层值匹配，对字符串和类数组需分别调用对应方法或手动转换，大数组高频查询时建议升级为 `Set.has()` 以提升性能，旧浏览器兼容则推荐轻量函数降级而非污染原型——掌握这些细节，才能真正用好这个现代 JavaScript 的实用利器。

为什么 includes 比一堆 || 更可靠 用 || 连接多个相等判断（比如 val === 'a' || val === 'b' || val === 'c'）看似直观，但容易漏写 ===、拼错字符串、或在值为 0、''、false 时因类型隐式转换出问题。而 includes() 是严格相等（SameValueZero），对 NaN 也友好（[NaN].includes(NaN) 返回 true），且逻辑集中、可读性强。

注意：它不支持对象深比较，只做浅层值匹配。

如何把 if (x === 'red' || x === 'blue' || x === 'green') 改成 includes 直接把待匹配的值收进数组，调用 includes()：

✅ 正确写法：

const validColors = ['red', 'blue', 'green'];
if (validColors.includes(x)) { ... }

⚠️ 常见错误：

• 写成 ['red','blue','green'].includes(x) —— 没问题，但每次执行都新建数组，小场景无感，高频调用（如渲染循环、事件回调）建议提前提取为常量
• 误用 indexOf() > -1 替代 —— 功能等价但更啰嗦，且 indexOf 对 NaN 返回 -1，不如 includes 直观
• 传入未定义变量：colors.includes(x) 中 x 为 undefined 或 null 不会报错，但结果就是 false，需确认这是否符合业务预期

includes 在字符串和类数组上的边界行为 includes() 是数组方法，不能直接用于字符串（除非转成数组），但字符串原生有同名方法：'hello'.includes('ll') —— 这是字符串的 includes()，和数组无关。

类数组对象（如 arguments、NodeList）不能直接调用 includes()，得先转数组：

Array.from(document.querySelectorAll('button')).includes(myBtn)

或者用扩展运算符：[...document.querySelectorAll('button')].includes(myBtn)

性能提示：对大数组，includes() 是线性查找，时间复杂度 O(n)；若需高频查询，应考虑转为 Set：const colorSet = new Set(['red','blue','green']); colorSet.has(x);

兼容性与降级方案 includes() 在 IE 完全不支持，Chrome 47+/Firefox 43+/Safari 9+ 开始支持。如果项目还需兼容旧环境：

✅ 推荐降级方式（不污染原型）：

function arrayIncludes(arr, value) {
  return arr.indexOf(value) !== -1;
}
// 使用：arrayIncludes(['a','b'], 'a')

⚠️ 避免 polyfill 修改 Array.prototype，尤其在第三方库共存的项目里容易引发冲突

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。