【前端】JavaScript中的indexOf()方法详解：基础概念与背后的应用思路

在这里插入图片描述

博客主页： [小ᶻZ࿆]
本文专栏: 前端

文章目录

  • 💯前言
  • 💯什么是`indexOf()`方法？
    • 参数解释
    • 返回值
    • 示例
  • 💯`indexOf()` 方法的工作原理
  • 💯特殊案例：`undefined` 的处理
    • 示例代码
    • 图示解释
  • 💯`indexOf()` 在字符串中的应用
    • 特殊情况分析
      • 1. 查找空字符串的行为
      • 2. 超出长度范围的起始位置
      • 3. 查找其他字符串时的行为
    • 代码总结与逻辑理解
    • 典型应用场景
  • 💯`indexOf()` 在数组中的应用
    • 示例
    • 注意事项
  • 💯查找的起始位置：`fromIndex`
    • `fromIndex` 超出范围
  • 💯 经典误区与陷阱
    • 误区 1：省略参数
    • 误区 2：查找 `NaN`
    • 误区 3：`fromIndex` 的使用
  • 💯 实际应用场景
    • 场景 1：判断字符串是否包含子字符串
    • 场景 2：去除数组中的重复元素
  • 💯与 `includes()` 方法的比较
  • 💯小结

在这里插入图片描述

💯前言

  • 在编写 JavaScript 代码时，理解字符串和数组的查找操作是非常重要的，而 indexOf() 方法就是其中一个常用的方法。它在字符串或数组中查找指定元素的位置，如果找到则返回索引，如果找不到则返回 -1。本文将详细介绍 indexOf() 的基础概念、用法及其背后的工作机制，帮助你深入了解它的行为。
    JavaScript
    在这里插入图片描述

💯什么是indexOf()方法？

在这里插入图片描述

indexOf() 是 JavaScript 中用来在字符串或数组中查找某个子字符串或元素的方法。其基本形式为：

str.indexOf(searchValue[, fromIndex])

参数解释

  • searchValue 是必须要提供的参数，即你想要查找的字符串。
  • fromIndex 是可选参数，用于指定从哪个索引开始查找。如果你不提供 fromIndex，默认值就是从索引 0 开始查找。

在这段代码 str.indexOf(searchValue[, fromIndex]) 中，中括号表示 可选参数，而不是语法的一部分。中括号 [ ] 用于表示这个参数不是强制的，开发者可以选择是否提供。如果你不提供 fromIndex，查找将从字符串或数组的开头开始。这个表示方法是文档中的惯例，主要用于向开发者说明哪些参数是可选的，而不是代码中实际需要写中括号。

在这里插入图片描述

返回值

  • 如果找到 searchValue，返回它在字符串或数组中的首次出现的位置索引。
  • 如果没有找到，返回 -1。
    在这里插入图片描述

示例

let str = 'hello world';
console.log(str.indexOf('world')); // 输出：6
console.log(str.indexOf('js'));    // 输出：-1

在这个例子中，indexOf('world') 返回了索引 6，因为 world 从索引 6 开始出现。而查找字符串 js，由于它不在 str 中，因此返回了 -1。

在这里插入图片描述

💯indexOf() 方法的工作原理

在这里插入图片描述

当调用 indexOf() 方法时，它会遍历字符串或数组，从 fromIndex 开始，依次与 searchValue 进行比较。如果找到完全匹配的部分，就返回匹配部分的起始位置索引；如果遍历完成后仍未找到匹配项，则返回 -1。

以下是 indexOf() 的一个示例：

let array = [1, 2, 3, 4, 5];
console.log(array.indexOf(3));   // 输出：2
console.log(array.indexOf(6));   // 输出：-1
console.log(array.indexOf(2, 2)); // 输出：-1

在这个示例中：

  • 查找 3 成功，返回它在数组中的位置 2。
  • 查找 6 失败，返回 -1。
  • 从索引 2 开始查找 2 失败，因为从索引 2 开始并没有元素 2。

💯特殊案例：undefined 的处理

在 JavaScript 中，如果 indexOf() 方法没有传入 searchValue，那么默认会将其强制设置为字符串 "undefined"。这种行为可能会引发一些意想不到的结果。
在这里插入图片描述

示例代码

在这里插入图片描述

console.log('undefined'.indexOf()); // 输出：0
console.log('undefine'.indexOf());  // 输出：-1

上面这段代码输出的结果可能会让人困惑，我们来逐行分析：

  1. 'undefined'.indexOf()

    • 由于没有传入 searchValue，JavaScript 强制将其设置为字符串 "undefined"。
    • 当前字符串为 'undefined'，而查找 "undefined" 会在索引 0 处找到匹配，因此返回 0。

  2. 'undefine'.indexOf()

    • 同样地，searchValue 被设置为 "undefined"。
    • 但是，当前字符串为 'undefine'（少了最后一个字母 d），所以找不到完全匹配的 "undefined"，因此返回 -1。

图示解释

在这里插入图片描述

在截图中，我们看到了 JavaScript 的一些行为：

  • console.log('undefined'.indexOf()); // 0
    • 这里由于默认查找 "undefined"，而字符串本身就是 'undefined'，所以结果是 0。
  • console.log('undefine'.indexOf()); // -1
    • 因为 'undefine' 中并没有完整的 "undefined"，结果是 -1。

这个行为说明了 JavaScript 对于省略参数时的特殊处理机制。在代码中如果不小心省略了参数，可能会导致一些意料之外的结果。因此，显式地传递参数是一个良好的编程习惯。

💯indexOf() 在字符串中的应用

在这里插入图片描述

indexOf 方法用于查找某个字符串在另一个字符串中的位置。它接收两个参数：

  1. 要查找的字符串（第一个参数）：这是你想在原字符串中搜索的内容。
  2. 起始位置（可选的第二个参数）：从原字符串的某个索引位置开始查找，默认值是 0。该参数是可选的。

该方法的返回值是查找到的字符串的索引值（首次出现的位置），如果没有找到，则返回 -1。这是比较常见的用法。

例如：

var plants = '西红柿,黄瓜,芹菜,豆角,土豆,黄瓜';
console.log(plants.indexOf('黄瓜'));  // 输出：4
console.log(plants.indexOf('芹菜'));  // 输出：9
console.log(plants.indexOf('苹果'));  // 输出：-1 （因为不存在“苹果”）

上面的代码输出的是找到的子字符串在原字符串中的位置索引。

特殊情况分析

在这里插入图片描述

在某些情况下，使用 indexOf 查找空字符串（''）时，尤其是传入一个超出字符串长度的起始位置，indexOf 的行为与查找非空字符串时有所不同。这些特殊情况可以被总结如下：

1. 查找空字符串的行为

在这里插入图片描述

在 JavaScript 中，空字符串在任何字符串中被认为“存在”。实际上，空字符串在每一个索引位置上都可以找到，包括字符串的开头和末尾。因此，当使用 indexOf('') 时，结果往往会是指定位置的索引。

例如：

var plants = '西红柿,黄瓜,芹菜,豆角,土豆,黄瓜';
console.log(plants.indexOf(''));  // 输出：0

上述代码的结果为 0，因为空字符串可以视为在原字符串的开头存在。

2. 超出长度范围的起始位置

在这里插入图片描述

当我们在 indexOf 中指定的起始位置超过字符串的实际长度时，JavaScript 不会报错，而是会执行一种特定行为：

  • 如果查找的是空字符串（''），indexOf 会返回字符串的长度值。

考虑以下代码：

var plants = '西红柿,黄瓜,芹菜,豆角,土豆,黄瓜';  // 字符串长度为 18
console.log(plants.indexOf('', 19));  // 输出：18

在这段代码中，我们在 indexOf 中传入了一个空字符串 ''，并且起始位置设置为 19，即超出了原字符串的长度（原字符串长度为 18）。结果是返回了 18，也就是原字符串的长度。

这种行为的原因在于 JavaScript 的 indexOf 机制：

  • 在处理空字符串时，indexOf 方法认为它可以在任何位置找到空字符串，包括在超出原字符串范围的“尾部”位置。因此，当起始位置超出原字符串的长度时，返回的结果是字符串的长度。

3. 查找其他字符串时的行为

在这里插入图片描述

与查找空字符串的情况不同，当使用超出长度范围的起始位置查找非空字符串时，indexOf 会返回 -1，表示没有找到匹配项。这是因为，起始位置超出字符串长度后，已经没有更多字符可供查找。

例如：

console.log(plants.indexOf('黄瓜', 19));  // 输出：-1

此代码中，字符串 '黄瓜' 在起始位置 19 之后无法找到，所以返回 -1。

代码总结与逻辑理解

在这里插入图片描述

这种行为的逻辑可以总结如下：

  • 当查找的是空字符串时，indexOf 会返回给定起始位置的索引。如果起始位置超出字符串的长度，则返回字符串的长度。
  • 当查找的是非空字符串且起始位置超出字符串长度时，indexOf 返回 -1，因为无法在起始位置之后找到任何匹配项。

理解这种行为对于 JavaScript 编程非常重要，特别是在处理可能涉及空字符串或需要从特定位置开始查找的场景时。这种特殊情况也提醒我们，要谨慎使用超出范围的起始位置，尤其是在不确定字符串长度的情况下。

典型应用场景

在这里插入图片描述

  • 查找字符串的开头或结尾：可以使用空字符串来确定字符串的开头和末尾位置。
  • 判断字符串是否为空：当使用 indexOf('') 时，如果返回值为字符串长度，则可以判定起始位置超过了字符串有效部分。

💯indexOf() 在数组中的应用

在这里插入图片描述

indexOf() 不仅可以在字符串中使用，还可以在数组中使用，来查找数组元素的索引。

示例

let fruits = ['apple', 'banana', 'mango', 'orange'];
console.log(fruits.indexOf('mango'));  // 输出：2
console.log(fruits.indexOf('grape'));  // 输出：-1

在这个例子中：

  • 查找 'mango' 成功，返回它在数组中的位置索引 2。
  • 查找 'grape' 失败，因为数组中没有这个元素，返回 -1。

indexOf() 在数组中的查找原理与在字符串中的查找非常相似，都是从 fromIndex 开始，逐个查找直到找到匹配的项或者遍历到数组的末尾。
在这里插入图片描述

注意事项

在这里插入图片描述

  1. 类型严格比较：indexOf() 使用的是严格相等（===）来比较元素。因此，如果查找的元素类型不匹配，则不会找到。

    let numbers = [1, 2, 3, '4'];
console.log(numbers.indexOf(4));   // 输出：-1
console.log(numbers.indexOf('4')); // 输出：3

    在这个示例中，数组中虽然有 '4'，但是 4 和 '4' 类型不同，导致查找数字 4 失败。

  2. NaN 的查找：对于数组中的 NaN 值，indexOf() 由于使用严格相等比较，无法正确查找到 NaN。这是因为 NaN !== NaN，在 JavaScript 中 NaN 被认为是不等于自身的。

    let arr = [NaN, 1, 2];
console.log(arr.indexOf(NaN)); // 输出：-1

    如果需要查找 NaN，可以使用 Array.prototype.findIndex() 方法：

    console.log(arr.findIndex(Number.isNaN)); // 输出：0

💯查找的起始位置：fromIndex

在这里插入图片描述

indexOf() 的第二个参数 fromIndex 指定了查找的起始位置。如果没有提供，则默认为 0，即从头开始查找。

let str = 'hello world, hello JavaScript';
console.log(str.indexOf('hello', 5)); // 输出：13

在这个例子中，indexOf('hello', 5) 从索引 5 开始查找，因此返回了第二个 'hello' 出现的位置 13。

fromIndex 超出范围

  • 如果 fromIndex 大于等于字符串或数组的长度，indexOf() 将返回 -1，表示未找到。
  • 如果 fromIndex 是负数，则从字符串或数组末尾的偏移位置开始。
let str = 'hello';
console.log(str.indexOf('h', 10));  // 输出：-1
console.log(str.indexOf('e', -4));  // 输出：1

在这里插入图片描述

💯 经典误区与陷阱

在这里插入图片描述

误区 1：省略参数

当使用 indexOf() 时忘记传递 searchValue，JavaScript 会将其设为 "undefined"，这可能会带来一些意料之外的结果，尤其是在调试代码时。
在这里插入图片描述

误区 2：查找 NaN

如前文所述，indexOf() 不能正确查找到数组中的 NaN。对于需要查找 NaN 的场景，可以选择 findIndex() 和 Number.isNaN 的组合。
在这里插入图片描述

误区 3：fromIndex 的使用

很多开发者在使用 fromIndex 时会忽略其作用，这可能导致在字符串或数组中查找不到期望的结果。需要特别注意 fromIndex 的范围及其负数的情况。

在这里插入图片描述

💯 实际应用场景

在这里插入图片描述

场景 1：判断字符串是否包含子字符串

在这里插入图片描述

使用 indexOf() 可以轻松判断一个字符串中是否包含另一个子字符串。例如：

let sentence = 'The quick brown fox jumps over the lazy dog';
if (sentence.indexOf('fox') !== -1) {console.log('包含子字符串 "fox"');
}

场景 2：去除数组中的重复元素

在这里插入图片描述

可以使用 indexOf() 来实现数组去重：

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [];
numbers.forEach(num => {if (uniqueNumbers.indexOf(num) === -1) {uniqueNumbers.push(num);}
});
console.log(uniqueNumbers); // 输出：[1, 2, 3, 4, 5]

💯与 includes() 方法的比较

JavaScript 中还有一个相似的方法 includes()，它用于判断字符串或数组中是否包含某个元素。与 indexOf() 不同的是，includes() 只返回布尔值。

let fruits = ['apple', 'banana', 'mango'];
console.log(fruits.includes('banana')); // 输出：true
console.log(fruits.includes('grape'));  // 输出：false

相较于 indexOf()，includes() 更加简洁，适用于只需要判断是否存在的场景，而不需要知道具体索引。
在这里插入图片描述

💯小结

  • 在这里插入图片描述
    indexOf() 是 JavaScript 中一个非常实用的查找方法，它既可以用于字符串，也可以用于数组。在使用 indexOf() 时，需要特别注意默认参数的行为、严格相等的比较方式以及 fromIndex 的影响。掌握这些细节可以帮助开发者避免常见的陷阱，提高代码的健壮性和可维护性。

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/476091.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

HarmonyOS4+NEXT星河版入门与项目实战------Button组件

HarmonyOS4+NEXT星河版入门与项目实战------Button组件

文章目录 1、控件图解2、案例实现1、代码实现2、代码解释3、运行效果4、总结1、控件图解 这里我们用一张完整的图来汇整 Button 的用法格式、属性和事件，如下所示： 按钮默认类型就是胶囊类型。 2、案例实现 这里我们实现一个根据放大和缩小按钮来改变图片大小的功能。 功…
阅读更多...
WPF窗体基本知识-笔记-命名空间

WPF窗体基本知识-笔记-命名空间

窗体程序关闭方式 命名空间:可以理解命名空间的作用为引用下面的控件对象 给控件命名:一般都用x:Name,也可以用Name但是有的控件不支持 布局控件(容器)的类型 布局控件继承于Panel的控件,其中下面的border不是布局控件,panel是抽象类 在重叠的情况下,Zindex值越大的就在上面 Z…
阅读更多...
【Qt】QComboBox设置默认显示为空

【Qt】QComboBox设置默认显示为空

需求 使用QComboBox，遇到一个小需求是，想要设置未点击出下拉列表时，内容显示为空。并且不想在下拉列表中添加一个空条目。 实现 使用setPlaceholderText()接口。我们先来看下帮助文档： 这里说的是，placeholderText是…
阅读更多...
音频信号采集前端电路分析

音频信号采集前端电路分析

音频信号采集前端电路 一、实验要求 要求设计一个声音采集系统 信号幅度：0.1mVpp到1Vpp 信号频率：100Hz到16KHz 搭建一个带通滤波器，滤除高频和低频部分 ADC采用套件中的AD7920，转换率设定为96Ksps ；96*161536 …
阅读更多...
[开源]1.2K star！中后台方向的低代码可视化平台，超赞！

[开源]1.2K star！中后台方向的低代码可视化平台，超赞！

大家好，我是JavaCodexPro！ “时间就是金钱，效率就是生命”，快速搭建高质量中后台的低代码可视化搭建平台尤为重要！ 今天JavaCodexPro给大家分享一款超赞的低代码可视化搭建平台 - Marsview ，旨在简化开发…
阅读更多...
Leetcode 完全二叉树的节点个数

Leetcode 完全二叉树的节点个数

不讲武德的解法 java 实现 class Solution {public int countNodes(TreeNode root) {if(root null) return 0;return countNodes(root.left) countNodes(root.right) 1;} }根据完全二叉树和满二叉树的性质做 class Solution {public int countNodes(TreeNode root) {if (r…
阅读更多...
基于CVE安全公告号，全面修复麒麟ARM系统OpenSSH漏洞

基于CVE安全公告号，全面修复麒麟ARM系统OpenSSH漏洞

前言：负责的其中一个从0开始搭建的某生产项目上线前需要做青藤安全扫描，过了后才允许上线，该项目从操作系统、中间件、数据库、容器等全国产信创化，公司公告为CVE安全公告号，而修复漏洞的责任归我，需要根据…
阅读更多...
【每日 C/C++ 问题】

【每日 C/C++ 问题】

一、什么是 C 中的初始化列表？它的作用是什么？ 作用：c提供了初始化列表语法，用来初始化属性 语法：构造函数（）：属性1（值1），属性2（值…
阅读更多...
【前端知识】Javascript前端框架Vue入门

【前端知识】Javascript前端框架Vue入门

前端框架VUE入门 概述基础语法介绍组件特性组件注册Props 属性声明事件组件 v-model(双向绑定)插槽Slots内容与出口 组件生命周期样式文件使用1. 直接在<style>标签中写CSS2. 引入外部CSS文件3. 使用CSS预处理器4. 在main.js中全局引入CSS文件5. 使用CSS Modules6. 使用P…
阅读更多...
【代码pycharm】动手学深度学习v2-04 数据操作 + 数据预处理

【代码pycharm】动手学深度学习v2-04 数据操作 + 数据预处理

数据操作 数据预处理 1.数据操作运行结果 2.数据预处理实现运行结果 第四课链接 1.数据操作 import torch # 张量的创建 x1 torch.arange(12) print(1.有12个元素的张量&#xff1a;\n,x1) print(2.张量的形状&#xff1a;\n,x1.shape) print(3.张量中元素的总数&#xff1…
阅读更多...
《Python浪漫的烟花表白特效》

《Python浪漫的烟花表白特效》

一、背景介绍 烟花象征着浪漫与激情&#xff0c;将它与表白结合在一起&#xff0c;会创造出别具一格的惊喜效果。使用Python的turtle模块&#xff0c;我们可以轻松绘制出动态的烟花特效&#xff0c;再配合文字表白&#xff0c;打造一段专属的浪漫体验。 接下来&#xff0c;让…
阅读更多...
CSS中Flex布局应用实践总结

CSS中Flex布局应用实践总结

① 两端对齐 比如 要求ul下的li每行四个&#xff0c;中间间隔但是需要两段对齐&#xff0c;如下图所示&#xff1a; 这是除了基本的flex布局外&#xff0c;还需要用到:nth-of-type伪类来控制每行第一个与第四个的padding。 .hl_list{width: 100%;display: flex;align-items…
阅读更多...
STM32与CS创世SD NAND（贴片SD卡）结合完成FATFS文件系统移植与测试是一个涉及硬件与软件综合应用的复杂过程

STM32与CS创世SD NAND（贴片SD卡）结合完成FATFS文件系统移植与测试是一个涉及硬件与软件综合应用的复杂过程

一、前言 在STM32项目开发中&#xff0c;经常会用到存储芯片存储数据。 比如&#xff1a;关机时保存机器运行过程中的状态数据&#xff0c;上电再从存储芯片里读取数据恢复&#xff1b;在存储芯片里也会存放很多资源文件。比如&#xff0c;开机音乐&#xff0c;界面上的菜单图…
阅读更多...
Matlab实现海鸥优化算法优化随机森林算法模型 （SOA-RF）（附源码）

Matlab实现海鸥优化算法优化随机森林算法模型 （SOA-RF）（附源码）

目录 1.内容介绍 2.部分代码 3.实验结果 4.内容获取 1内容介绍 海鸥优化算法&#xff08;Seagull Optimization Algorithm, SOA&#xff09;是一种基于海鸥群体行为的新型元启发式优化算法。SOA通过模拟海鸥在寻找食物时的飞行模式和集体行动来探索解空间&#xff0c;寻找最优…
阅读更多...
C# Postman或者PostApi调试前端webapi接口发送带有request/body/head信息

C# Postman或者PostApi调试前端webapi接口发送带有request/body/head信息

知识&#xff1a; 前端接口&#xff0c;表单形式提交。 req.ContentType "application/x-www-form-urlencoded"; x-www-form-urlencoded 是一种常见的 MIME 类型&#xff0c;用于将键值对编码为 HTTP 请求体中的 URL 编码格式。在 Web API 中&#xff0c;x-www-for…
阅读更多...
npm上传自己封装的插件（vue+vite）

npm上传自己封装的插件（vue+vite）

一、npm账号及发包删包等命令 若没有账号&#xff0c;可在npm官网&#xff1a;https://www.npmjs.com/login 进行注册。 在当前项目根目录下打开终端命令窗口&#xff0c;常见命令如下&#xff1a; 1、登录命令&#xff1a;npm login&#xff08;不用每次都重新登录&#xff0…
阅读更多...
案例精选 | 某知名教育集团基于安全运营平台的全域威胁溯源实践

案例精选 | 某知名教育集团基于安全运营平台的全域威胁溯源实践

某知名教育集团成立于1999年&#xff0c;总部位于北京海淀中关村。集团专注于K-12基础教育&#xff0c;构建了从幼儿园到高中的全面教育体系&#xff0c;涵盖学校管理、教学科研、师资培训、信息化服务等多个方面。集团在全国范围内设有15所小学、12所初中、9所高中、6个国际部…
阅读更多...
鸿蒙多线程开发——线程间数据通信对象01

鸿蒙多线程开发——线程间数据通信对象01

1、线程间通信 线程间通信指的是并发多线程间存在的数据交换行为。由于ArkTS语言兼容TS/JS&#xff0c;其运行时的实现与其它所有的JS引擎一样&#xff0c;都是基于Actor内存隔离的并发模型提供并发能力。 对于不同的数据对象&#xff0c;在ArkTS线程间通信的行为是有差异的&…
阅读更多...
徒手从零搭建一套ELK日志平台

徒手从零搭建一套ELK日志平台

徒手从零搭建一套ELK日志平台 日志分析的概述日志分析的作用主要收集工具集中式日志系统主要特点采集日志分类ELK概述初级版ELK终极版ELK高级版ELKELK收集日志的两种形式 搭建ELK平台Logstash工作原理Logstash核心概念环境准备安装部署docker添加镜像加速器安装部署Elasticsear…
阅读更多...
React基础知识一

React基础知识一

写的东西太多了&#xff0c;照成csdn文档编辑器都开始卡顿了&#xff0c;所以分篇写。 1.安装React 需要安装下面三个包。 react:react核心包 react-dom:渲染需要用到的核心包 babel:将jsx语法转换成React代码的工具。&#xff08;没使用jsx可以不装&#xff09;1.1 在html中…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023