简单谈谈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 相关文章推荐
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
浅谈node.js中async异步编程
Oct 22 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
微信小程序保存图片到相册权限设置
Apr 09 Javascript
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
【js设计模式】SOLID五大设计原则
Mar 24 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与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
php处理json时中文问题的解决方法
2011/04/12 PHP
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
IE与firefox之jquery用法区别
2008/10/03 Javascript
JavaScript 注册事件代码
2011/01/27 Javascript
jquery 关于event.target使用的几点说明介绍
2013/04/26 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
jQuery实现跨域
2015/02/03 Javascript
javascript 兼容各个浏览器的事件
2015/02/04 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
2020/03/26 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
微信小程序实现侧边分类栏
2019/10/21 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
Python中的类学习笔记
2014/09/23 Python
python3中os.path模块下常用的用法总结【推荐】
2018/09/16 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
python定位xpath 节点位置的方法
2019/08/27 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
python属于解释语言吗
2020/06/11 Python
python实现最短路径的实例方法
2020/07/19 Python
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
数控技术专科生自我评价
2014/01/08 职场文书
海洋科学专业求职信
2014/08/10 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
投诉书范文
2015/07/02 职场文书
保姆聘用合同
2015/09/21 职场文书
导游词之无锡梅园
2019/11/28 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书