简单谈谈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中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 Javascript
对node.js中render和send的用法详解
May 14 Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
详解elementUI中input框无法输入的问题
Apr 27 Javascript
JS实现放大镜效果
Sep 21 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获取文件扩展名的方法实例总结
2017/06/10 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
浅谈JavaScript中面向对象技术的模拟
2006/09/25 Javascript
通过DOM脚本去设置样式信息
2010/09/19 Javascript
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
JS实现多选框的操作
2020/06/24 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
详解Python中for循环的使用
2015/04/14 Python
python3实现基于用户的协同过滤
2018/05/31 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
在pycharm中实现删除bookmark
2020/02/14 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
英国豪华真皮和布艺沙发销售网站:Darlings of Chelsea
2018/01/05 全球购物
软件测试面试题
2014/01/05 面试题
服装电子商务创业计划书
2014/01/30 职场文书
公司开业庆典策划方案
2014/06/04 职场文书
忠诚教育心得体会
2014/09/03 职场文书
纪录片信仰观后感
2015/06/08 职场文书
大学入学感言
2015/08/01 职场文书
幼儿园迎新生欢迎词
2015/09/30 职场文书
《去年的树》教学反思
2016/02/18 职场文书
2019年工作总结范文
2019/05/21 职场文书
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技