JavaScript 数组中的 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).
一目了然,这里用的是严格等于(===)。大家做类似判断的时候多留意。不要误认为数字会转成字符串,同理字符串也不会转换成数字。

总结

小知识点积累,不作为深入讨论的话题,因此这里没有解释 indexOf() 的第二个参数,相信大家都知道第二个参数的作用,不知道的可以看这里String.prototype.indexOf(),然后结合上面数组的链接也看一下第二个参数。

时间: 2024-09-09 22:10:17

JavaScript 数组中的 indexOf 方法的相关文章

JavaScript数组中的indexOf方法

最近项目遇到一个小问题代码我会简化成小例子展示给大家. 用心看到最后会有收获哈,基础扎实的童鞋可以直接跳到数组类型使用. 说到 indexOf 大家并不陌生,判断字符串是否包涵子字符串时特别常用(正则不熟练同学的利器). String 类型的使用 温习一下大家熟知的字符串用法,举个例子 let str = 'orange';    str.indexOf('o');  //0  str.indexOf('n');  //3  str.indexOf('c');  //-1   这里 0 和 3

给Javascript数组添加一个indexOf方法

Javascript的字符串有个indexOf的方法,能够返回字符在指定的字符串中的位置,非常有用,本文介绍了如何给Javascript数组也添加一个类似的方法. <script type="text/javascript">//<![CDATA[[].indexOf || (Array.prototype.indexOf = function(v){for(var i = this.length; i-- && this[i] !== v;);ret

简单谈谈JS数组中的indexOf方法_javascript技巧

前言 相信说到 indexOf 大家并不陌生,判断字符串是否包涵子字符串时特别常用,正则不熟练同学的利器.这篇文章就最近遇到的一个问题,用实例再说说说indexOf方法.本文是小知识点积累,不作为深入讨论的话题,因此这里没有解释indexOf()的第二个参数,相信大家都知道第二个参数的作用. String 类型的使用 温习一下大家熟知的字符串用法,举个 let str = 'orange'; str.indexOf('o'); //0 str.indexOf('n'); //3 str.inde

JavaScript数组中sort方法

这也是一般情况下建议的方式,因为不知道不同的 js 引擎在不传递排序函数的时候,会按照什么方案进行排序. 例如:  代码如下 复制代码 var colors = ['red', 'green', 'blue', 'yellow', 'white']; console.log(colors.sort());    // ["blue", "green", "red", "white", "yellow"] c

Javascript数组中push方法用法分析_javascript技巧

本文实例讲述了Javascript数组中push方法用法.分享给大家供大家参考,具体如下: 看下面代码: var o = { 1:'a' ,2:'b' ,length:2 ,push:Array.prototype.push }; o.push('c'); Q:o现在内部的值是什么样子? 我的第一反应是排斥,为什么要研究不合理情况下[解释引擎]的行为?但是这种推论有时候又很吸引人,于是我回来的时候仔细思考了下,发现其实很简单. 对于push这个方法,我条件反射地想到的就是栈,[数据结构的经典栈]

Java中增强for循环在一维数组和二维数组中的使用方法_java

一维数组: int[] a={1,2,3}; for(int i:a) { System.out.print(i+" "); } 输出:1 2 3 二维数组: import java.util.Scanner; public class tet { public static void main(String[] args) { //int[][] b={{1,2,3},{4,5,6}};行 int[][] a=new int[5][];//必须明确行数 for(int i=0;i&l

javascript数组克隆简单实现方法_javascript技巧

本文实例讲述了javascript数组克隆简单实现方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>新建网页 1</title> </head> <body> <script language=javascri

jQuery 判断是否包含在数组中Array[]的方法_jquery

jQuery 判断是否包含在数组中Array[]的方法 var Menustr="1,2,3,4,5,6,7,8,9,10,11,12,"; var Menarrstr=Menustr.split(","); if ($.inArray($(this).attr("id"), Menarrstr)) { //... } 以上这篇jQuery 判断是否包含在数组中Array[]的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多

PHP array_key_exists检查键名或索引是否存在于数组中的实现方法_php实例

array_key_exists() PHP array_key_exists() 函数用于检查给定的键名或索引是否存在于数组中,如果存在则返回 TRUE ,否则返回 FALSE . 语法: bool array_key_exists( mixed key, array search )参数 key 是给定的键名或索引,可以是任何能作为数组索引的值. array_key_exists() 函数也可用于对象. 例子: <?php $arr_a = array('id' => 1, 'name'