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

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

为什么 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，尤其在第三方库共存的项目里容易引发冲突

真正需要警惕的是嵌套结构里的“伪包含”判断——比如想查 users 数组里是否存在 id === 123 的对象，这时 includes() 无效，得用 some() 或 find()。别为了用 includes 而强行 flat 数据。

今天关于《Array.includes优雅替代多||判断方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！