前端判断界的“双子星”：includes 和 indexOf_vue indexof

前言

开发路上无小事，一个简单的存在性判断，也能使主编陷入久久沉思。includes和 indexOf 看似双胞胎，实则性格迥异啊! ! ! 好在主编经历了一番百度 + 问同事 + 灵码助攻之后，我终于把这对兄弟的底裤都翻了个遍🙂。接下来就由既帅气又有才华的主编带大佬们,看清这对“兄弟”的本质区别，别再写错判断条件啦！

相似之处

双胞胎毋庸置疑就是外貌啊,特征啊等都是大致相同的;

那么includes和 indexOf 两兄弟也有相似之处滴 :

• 相似处一 : 用于查找元素是否存在

  • 两者都可以用来检查(判断)一个字符串或者数组中是否包含指定的元素或字符串。

• 相似处二 : 适用于字符串和数组

  • 在 JavaScript中, includes()和 indexOf()可以在数组(Array)当中使用 ,也可以在字符串(String)中使用。

  举个栗子

// 数组const arr = [1, 2, 3, 4, 5];// 使用 includesconsole.log(arr.includes(3)); // true// 使用 indexOfconsole.log(arr.indexOf(3) !== -1); // true// 字符串const str = \"hello world\";// 使用 includesconsole.log(str.includes(\"world\")); // true// 使用 indexOfconsole.log(str.indexOf(\"world\") !== -1); // true

平时在日常使用中可以搭配一下判断语句使用,充当判断条件

举个栗子

// 使用includesconst message = \"Hello, how are you?\";if (message.includes(\"how\")) { // true console.log(\"包含 \'how\'\");}// 使用indexOfconst message = \"Hello, how are you?\";if (message.indexOf(\"how\") !== -1) { console.log(\"包含 \'how\'\");}

不同之处

双胞胎即便是外貌相同,但是其性格和说话方式等行为往往是不同的; 海尔兄弟还一个黑一个白呢! 更何况是includes和 indexOf 。

区别一 : 作用对比

特性 includes(searchValue) indexOf(searchValue) 用途 判断是否包含指定的子字符串（返回布尔值） 查找子字符串首次出现的位置（返回索引） 返回类型 true / false 数字（>=0 表示位置，-1 表示未找到） 可读性 更直观清晰 需要结合判断是否为 -1

• 用途

  • includes() :

    • 主要用于判断字符串或数组中是否包含某个值，返回的是一个布尔值（true 或 false）。

    • \'hello\'.includes(\'e\'); // true

  • indexOf() :

    • 用于查找某个值在字符串或数组中第一次出现的位置索引，如果未找到则返回 -1。

    • \'hello\'.indexOf(\'e\'); // 1

• 返回类型

  • includes()返回的是 :

    • true : 表示包含该值;

    • false : 表示不包含该值;

  • indexOf()返回的是 :

    • 一个数字 (>= 0) : 表示该值首次出现的位置;

    • -1 : 表示没有找到对应的值;

• 可读性

  • includes()更加语义化，直接表达“是否包含”意思;

  • indexOf()需要搭配比较运算符使用，才能实现判断功能，相对来说不够直观;

区别二 : 语法和使用地方

语法差异

方法名 语法格式 特点说明 includes() str.includes(searchValue, start) 支持从指定位置开始查找，返回布尔值 indexOf() str.indexOf(searchValue, fromIndex) 支持从指定索引开始查找，返回数字（索引）

注意：两者都支持第二个参数用于指定起始位置，但语义不同。

结合应用场景说明

• includes()

  • 它更适合简洁存在判断

  • \'hello world\'.includes(\'world\', 6); // true

  • 适用场景：

    • 判断用户输入是否包含敏感词;

    • 检查数组中是否存在某个选项;

    • 简洁地进行条件判断，如 if (userName.includes(\'admin\'));

• indexOf()

  • 它更适合需要获取位置信息的场景

  • \'hello world\'.includes(\'world\', 6); // 6

  • 适用场景：

    • 字符串解析时提取子串位置;

    • 需要知道某个元素首次出现的位置;

    • 兼容老旧浏览器或需要回溯逻辑的代码中;

区别三 : 在 Vue 模板中的使用差异

对比项 includes indexOf 是否需要额外判断 不需要，直接返回布尔值 需要配合 !== -1 判断 可读性 更高，语义清晰 稍低，需理解索引含义 推荐程度 ✅ 推荐在 Vue 模板中使用 ❌ 除非有兼容需求，否则不优先使用 能否获取位置信息 ❌ 不能 ✅ 可以获取首次出现的位置

使用场景 : v-if 或 v-show中作为判断条件

• includes() 推荐使用
  • 代码案例

  •  包含 \"hello\"

  • 好处:

    • 更加直观，语义清晰；

    • 直接返回布尔值;

• indexOf()

  • 代码案例

  •  包含 \"hello\"

  •  特点: 主编在这都不说好处了(细节)

    • 同样可以实现功能；

    • 语法稍显复杂，需要手动判断是否为 -1

区别四 : 兼容性差异

特性 includes() indexOf() 引入版本 ES6 (ECMAScript 2015) ES3 IE 支持情况 ❌ 不支持 IE ✅ 完全支持 IE 现代浏览器 ✅ 所有主流浏览器（Chrome/Firefox/Safari/Edge） ✅ 所有浏览器 是否需要 Polyfill ✅ 需要（如果支持 IE 或老旧环境） ❌ 不需要

差异解析

• includes() 的兼容性问题

  • 是 ES6 引入的新方法；

  • 不被 IE 浏览器支持（包括 IE11）；

  • 如果你使用的是 Vue + Babel + Webpack/Vite 等现代构建工具，通常会自动通过 polyfill 解决兼容问题；

  • 如果你没有启用 polyfill，而在 IE 中运行包含 includes() 的代码，会出现如下错误：

  • Object doesn\'t support property or method \'includes\'

•  indexOf() 的兼容性优势

  • 是一个非常古老的方法，早在 ES3 就已存在；

  • 几乎所有浏览器都支持，包括 IE；

  • 因为历史悠久，也广泛用于旧项目的判断逻辑中；

  • 不需要任何 polyfill 即可在任何环境下使用;

补充说明 : Vue 中使用 includes 无需担心兼容性的原因

原因描述 说明 Vue 项目默认构建流程支持 ES6+ 转译 使用 Babel 可向下兼容 多数项目不再需要支持 IE 主流企业应用已放弃 IE 支持 Vue 官方文档和生态库也广泛使用 ES6+ 包括 Vuex、Vue Router 等 开发体验优先于老式语法 更推荐语义清晰的 includes

小结

对比项 includes() indexOf() 语法简洁度 更简洁，语义清晰 稍复杂，需配合 -1 判断 使用目的 只关心“有没有” 关心“在哪” 扩展用途 多用于权限、关键词过滤等逻辑判断 常用于字符串截取、日志分析、结构解析等场景

如果你需要的是“存在与否”的判断，优先使用 includes；如果需要知道“出现在哪”，则选择 indexOf。