简单谈谈JS数组中的indexOf方法


Posted in Javascript onOctober 13, 2016

前言

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

String 类型的使用

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

let str = 'orange';

str.indexOf('o'); //0
str.indexOf('n'); //3
str.indexOf('c'); //-1

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

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

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

let numStr = '2016';

numStr.indexOf('2'); //0
numStr.indexOf(2); //0

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

Number 类型的使用

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

let num = 2016;

num.indexOf(2); //Uncaught TypeError: num.indexOf is not a function

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

//二逼青年的写法
num = '2016';
num.indexOf(2); //0

//普通青年的写法
num.toString().indexOf(2); //0

//文艺青年的写法
('' + num).indexOf(2); //0

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

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

Array 类型的使用

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

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

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

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。

     indexOf() compares searchElement to elements of the Array using strict equality (the same method used by the === or triple-equals operator).

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

总结

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

Javascript 相关文章推荐
基于javascript滚动图片具体实现
Nov 18 Javascript
深入浅析同源策略和跨域访问
Nov 26 Javascript
JavaScript中的Array 对象(数组对象)
Jun 02 Javascript
关于网页中的无缝滚动的js代码
Jun 09 Javascript
jQuery实现的简单拖拽功能示例
Sep 13 Javascript
实现easyui的datagrid导出为excel的示例代码
Nov 10 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
Jun 08 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 Javascript
使用jquery如何获取时间
Oct 13 #Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 #Javascript
微信js-sdk分享功能接口常用逻辑封装示例
Oct 13 #Javascript
js给table赋值的实例代码
Oct 13 #Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 #Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 #Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 #Javascript
You might like
《PHP编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
php+js实现异步图片上传实例分享
2014/06/02 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
PHP超全局数组(Superglobals)介绍
2015/07/01 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
JS实现碰撞检测效果
2020/03/12 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
护士自我鉴定范文
2013/10/06 职场文书
教师岗位职责
2013/11/17 职场文书
建筑工程技术应届生求职信
2013/11/17 职场文书
一名老师的自我评价
2014/02/07 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
爱护公物主题班会
2015/08/17 职场文书
MySQL root密码的重置方法
2021/04/21 MySQL
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技