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

`Array.includes()` 是替代冗长多 `||` 判断的优雅方案，它基于严格相等（SameValueZero）、天然支持 `NaN`、逻辑清晰且可读性强；只需将待匹配值提取为常量数组（如 `const validColors = ['red','blue','green']`），再用 `validColors.includes(x)` 一行代码即可安全判断，避免了 `===` 漏写、字符串拼错及假值隐式转换陷阱；但需注意：它不适用于对象深比较或类数组对象（需转数组），字符串应直接调用自身 `includes()` 方法，大数组高频查询建议升级为 `Set.has()` 提升性能，旧浏览器可通过轻量函数降级，真正复杂场景则应选用 `some()` 或 `find()` 等更合适的工具——让代码既简洁又健壮。

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

好了，本文到此结束，带大家了解了《Array.includes优雅替代多||判断方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！