前言

这两天在家中帮朋友做项目,项目中使用了数组的indexOf 方法,找到了一篇文章,感觉非常不错,顺便整理下以防链接丢失。

相信说到 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).

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

总结

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

  • String:indexOf 会将’0’做类型转换,转换为0。
  • Number:没有indexOf 方法。需要将数字类型转换为字符串。方法有三种。直接字符串、字符串toString、字符串拼接。
  • Array:数组同样有indexOf 方法,只不过做类型判断时,使用的严格相等(strict equality),也就是 === 。

原文地址:https://segmentfault.com/a/1190000017001710

JS数组中的indexOf方法的更多相关文章

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

    前言 相信说到 indexOf 大家并不陌生,判断字符串是否包涵子字符串时特别常用,正则不熟练同学的利器.这篇文章就最近遇到的一个问题,用实例再说说说indexOf方法.本文是小知识点积累,不作为深入 ...

  2. js数组中的reverse()方法

    reverse方法是将数组中的元素的顺序进行反转,在原数组上操作,然后返回原数组.由于本人是学习js的新人,对reverse函数进行了几个小实验,以下实验均在Chrome浏览器上运行 实验一:reve ...

  3. JS数组中Array.of()方法的使用

    Array.of()方法的使用: Array.of()方法用于将一组数值转换为数组,举例: const a = Array.of(2,4,6,8); console.log(a); // [2,4,6 ...

  4. JavaScript 数组中的 indexOf 方法

    let arr = ['orange', '2016', '2016']; arr.indexOf('orange'); //0 arr.indexOf('o'); //-1 arr.indexOf( ...

  5. C# 数组中的 indexOf 方法

    var array=['REG','2018','2018']; array.indexOf(‘REG’) // 0 array.indexOf(‘R’) // -1 array.indexOf(’2 ...

  6. js数组去重五种方法

    今天来聊一聊JS数组去重的一些方法,包括一些网上看到的和自己总结的,总共5种方法(ES5). 第一种:遍历数组法 这种方法最简单最直观,也最容易理解,代码如下: var arr = [2, 8, 5, ...

  7. js 数组常用的一些方法

    数组可以说是js经常会遇到的数据结构,以下我们对数组进行详细的学习! 一.数组的创建 var mycars = new Array(): || new Array(3);  || new Array( ...

  8. Js数组的常用的方法概述

    学习JS的同学们,也曾对数组进行学习掌握,所以我也把数组中常用的方法列举下来,相互学习 不多废话,直接上正文 .                 快乐的分割线... 一.对象继承的方法 数组是一种特殊 ...

  9. PHP删除数组中空值的方法介绍

    这篇文章主要介绍了PHP删除数组中空值的方法介绍,需要的朋友可以参考下 说来惭愧,以前在去掉数组的空值是都是强写foreach或者while的,利用这两个语法结构来删除数组中的空元素,简单代码如下: ...

随机推荐

  1. PHP面向对象(一)

    1 面向对象介绍 1.1 介绍 ​ 面向对象是一个编思想. 编程思想有面向过程和面向对象. ​ 面向过程: 编程思路集中的是过程上 ​ 面向对象: 编程思路集中在参与的对象 1.2 好处 多人合作方便 ...

  2. Java基础学习总结(65)——Java中的String,StringBuilder和StringBuffer比较

    字符串,就是一系列字符的集合. Java里面提供了String,StringBuffer和StringBuilder三个类来封装字符串,其中StringBuilder类是到jdk 1.5才新增的.字符 ...

  3. js js键盘各键对应的代码 ---转

    0x1 鼠标左键\r 0x2 鼠标右键\r 0x3 CANCEL 键\r 0x4 鼠标中键\r 0x8 BACKSPACE 键\r 0x9 TAB 键\r 0xC CLEAR 键\r 0xD ENTE ...

  4. C# string bytes互转

    string str = "spike"; byte[] bytes = System.Text.Encoding.Default.GetBytes(str); foreach ( ...

  5. linux下jenkins安装

    在安装jenkins之前.首先确认jdk和tomcat,maven已经配置好 详细配置方法,请看的我博客. jdk:jdk的安装与配置 tomcat:tomcat的安装与配置 maven:maven的 ...

  6. STM32F030, 使用嘀嗒定时器Systick实现LED闪烁

    本文主要解决两个问题 1 STM32的IO口要反转,怎么实现? 2 嘀嗒定时器systick的配置 解答1: 单片机的口,反转非常easy.sbit led = P1 ^6;  led = ~led; ...

  7. HDU 2181 DFS

    Problem Description 一个规则的实心十二面体,它的 20个顶点标出世界著名的20个城市,你从一个城市出发经过每一个城市刚好一次后回到出发的城市.   Input 前20行的第i行有3 ...

  8. Android recovery UI实现分析

    Android recovery模式为何物? 关于这个问题, baidu上已经有无数的答案.不理解的朋友先补习一下. 从纯技术角度来讲, recovery和android本质上是两个独立的rootfs ...

  9. 防止 Chrome 屏蔽 非官方 扩展程序 教程(二)

    说明 前面介绍过一篇通过开发人员模式载入扩展程序的方法,尽管能够正常使用,可是每次又一次打开 Chrome 都会弹出询问窗体,比較麻烦.这里介绍第二种防止屏蔽的方法.与前一种方法相比,尽管应用的步骤多 ...

  10. c语言数组小谈

    #include <stdio.h> #include <stdlib.h> #define N 5 int main() { double score[5]; int i; ...