Javascript中indexOf的用法和分析

Javascript中indexOf的用法和分析前言相信说到 indexOf 大家并不陌生 判断字符串是否包涵子字符串时特别常用 正则不熟练同学的利器 这篇文章就最近遇到的一个问题 用实例再说说说 indexOf 方法 本文是小知识点积累 不作为深入讨论的话题 因此这里没有解释 indexOf 的第二个参数 相信大家都知道第二个参数的作用 String 类型的使用温习一下大家熟知的字符串用法 举个 12345letstr orange nbsp

前言

相信说到 indexOf 大家并不陌生,判断字符串是否包涵子字符串时特别常用,正则不熟练同学的利器。这篇文章就最近遇到的一个问题,用实例再说说说indexOf方法。本文是小知识点积累,不作为深入讨论的话题,因此这里没有解释indexOf()的第二个参数,相信大家都知道第二个参数的作用。

String 类型的使用

温习一下大家熟知的字符串用法,举个

?
1
2
3
4
5
let str =
'orange'
;
 
str.indexOf(
'o'
);
//0
str.indexOf(
'n'
);
//3
str.indexOf(
'c'
);
//-1

这里 0 和 3 分别是 o 和 n 在字符串中出现的位置。起始下标是 0。而 -1 代表未匹配。

曾经有人问我为什么偏偏是 -1 不是 null 或者 undefined。你去问制定规则的人啊!一脸无奈。

大家看到这里感觉没什么亮点啊,别急接着再来一个例子

?
1
2
3
4
let numStr =
'2016'
;
 
numStr.indexOf(
'2'
);
//0
numStr.indexOf(2);
//0

看到这里有个小点就是 indexOf 会做简单的类型转换,把数字转换成字符串 ‘2’ 然后再执行。

Number 类型的使用

大家可能会想 number 类型有没有 indexOf 方法因为会做隐式转换嘛!明确告诉大家没有,上例子

?
1
2
3
let num = 2016;
 
num.indexOf(2);
//Uncaught TypeError: num.indexOf is not a function

非要对 number 类型使用 indexOf 方法嘞?那就转换成字符串咯,接着上例来写

?
1
2
3
4
5
6
7
8
9
//二逼青年的写法
num =
'2016'
;
num.indexOf(2);
//0
 
//普通青年的写法
num.toString().indexOf(2);
//0
 
//文艺青年的写法
(
''
+ num).indexOf(2);
//0

第一种写法简单直接,对于已知的较短的数字也不是不可行。但是 num 变量针对不同数据是变化的时候,怎么办呢?❌

第二种写法最为常用,但对比第三种写法长了一点。哈哈,其实都可以,代码洁癖的人喜欢第三种 ✅

Array 类型的使用

大家提起精神,大boss来了。

数组方法大家再熟悉不过了,却忽略了数组有 indexOf 这个方法(我个人感觉)。

干说不练瞎扯淡,遇到了什么问题,注意⚠️点又在哪里?

?
1
2
3
4
5
6
7
let arr = [
'orange'
,
'2016'
,
'2016'
];
 
arr.indexOf(
'orange'
);
//0
arr.indexOf(
'o'
);
//-1
 
arr.indexOf(
'2016'
);
//1
arr.indexOf(2016);
//-1

这里没把例子拆的那么细,四个用例足以说明问题。

    arr.indexOf(‘orange') 输出 0 因为 ‘orange’ 是数组的第 0 个元素,匹配到并返回下标。

    arr.indexOf(‘o') 输出 -1 因为此方法不会在每一个元素的基础上再次执行 indexOf 匹配。

    arr.indexOf(‘2016') 输出 1 因为此方法从头匹配直到匹配到时返回第一个数组元素的下表,而不是返回全部匹配的下标。

    arr.indexOf(2016) 输出 -1 注意:这里不会做隐式类型转换。

既然坑已经发现我们不妨刨根问底。去MDN官网一看究竟。对此话题感兴趣的朋友可以直接跳转到Array.prototype.indexOf()

只想了解的朋友下面给大家官方的 Description。

一目了然,这里用的是严格等于(===)。大家做类似判断的时候多留意。不要误认为数字会转成字符串,同理字符串也不会转换成数字。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

您可能感兴趣的文章:

  • javascript创建含数字字母的随机字符串方法总结
  • JavaScript的字符串方法汇总
  • JS常用字符串方法(推荐)
  • javascript数组去重方法分析
  • 详解JavaScript中数组的reduce方法
  • 分享JS数组求和与求最大值的方法
  • js接收并转化Java中的数组对象的方法
  • js删除Array数组中指定元素的两种方法
  • js删除数组元素、清空数组的简单方法(必看)
  • js数组与字符串常用方法总结


版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/232939.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • c++事件循环(win32消息机制)

    1.windows消息循环if(GetMessage(&msg,NULL,0,0)){TranslateMessage(&msg);//消息转化DispatchMessage(&msg);//消息派遣.把TranslateMessage转换的消息发送到窗口的消息处理函数,此函数在窗口注册时已经指定}执行过程:消息循环调用G…

    2022年4月13日
    243
  • phpstorm激活码2022 3月最新注册码

    phpstorm激活码2022 3月最新注册码,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月15日
    131
  • △>0_@ModelAttribute

    △>0_@ModelAttribute0uLL:unsignedlonglong类型的0~:“二进制按位否运算符”>>:右移运算符

    2022年9月20日
    3
  • 局域网vlan配置步骤_局域网vlan划分案例

    局域网vlan配置步骤_局域网vlan划分案例计算机网络技术的发展犹如戏剧舞台,你方唱罢我登台。从传统的以太网(10Mb/s)发展到快速以太网(100Mb/s)和千兆以太网(1000Mb/s)也不过几年的时间,其迅猛的势头实在令人吃惊。而现在中大型规模网络建设中,以千兆三层交换机为核心的所谓“千兆主干跑、百兆到桌面”的主流网络模型已不胜枚举。现在,网络业界对“三层交换”和VLAN这两词已经不感到陌生了。一、什么是三…

    2022年9月18日
    0
  • 使用matplotlib给女朋友画一个爱心吧,这份满满的爱意,一定要记得收下

    使用matplotlib给女朋友画一个爱心吧,这份满满的爱意,一定要记得收下

    2022年2月20日
    109
  • (Java实现) N皇后问题[通俗易懂]

    (Java实现) N皇后问题[通俗易懂]n皇后问题是一个以国际象棋为背景的问题:在n×n的国际象棋棋盘上放置n个皇后,使得任何一个皇后都无法直接吃掉其他的皇后,即任意两个皇后都不能处于同一条横行、纵行或斜线上。蛮力法思想:解决n皇后问题的思想本质上就是蛮力法,生成所有可能的摆放情况,并判断该情况是否满足要求,我们以树结构来表示解决问题的方法。以4*4的棋盘为例,第0层的根节点为空白的棋盘,第1层为只在棋盘的第一行摆放的四种…

    2022年9月30日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号