JavaScript中的inludes和indexOf方法
- 1.数组中的includes和indexOf方法比较
- - 1.1 函数返回值的不同
  - 1.2 函数第二个参数——开始查找的位置
  - 1.3 includes 和 indexOf 方法的区别
- 2 .字符串和数组中的 indexOf | includes 方法比较
- 3. 小结
- 参考

JavaScript中的inludes和indexOf方法

主要用途：用于判断字符串或者数组中是否存在对应的元素

1.数组中的includes和indexOf方法比较

1.1 函数返回值的不同

includes方法返回的是Boolean类型的值。元素存在返回true，不存在返回false。
indexOf方法返回的是Number类型的值。元素存在则返回第一次出现的索引值，不存在则返回-1。
所以当作为if的判断条件时（如下代码示例），
- 对于includes方法的返回值result1，使用if(result1){...}进行判断元素是否存在；
- 对于indexOf方法的返回值result2，使用if(result2 !== -1){...}或者if(result2 >= 0){...}判断元素是否存在。
代码示例:

let arr1 = [1,2,3,4]
let result1 = arr1.includes(2)
let result2 = arr1.indexOf(2)
console.log(result1) //true Boolean类型
console.log(result2) //1 Number类型

1.2 函数第二个参数——开始查找的位置

indexOf和includes都可以添加第二个参数，表示开始查找的位置：
- 当为正数时如indexOf(2,2)表示从索引值为2的元素开始从左往右查找是否有元素2
- 为负数时如indexOf(2,-2)表示从从后往前的第2个数字开始从左往右查找是否有元素2（注意查找顺序都是从左往右），如数组[1,2,3,4,5,6].indexOf(2,-2)表示从5的位置从左往右查找是否有2。
- includes方法的第二个参数也是一样的。
代码示例：

let arr1 = [1,2,3,4]
console.log(arr1.indexOf(2,2)) //-1
console.log(arr1.includes(2,2)) //false
console.log(arr1.indexOf(3,-2))//2
console.log(arr1.includes(3,-2))//true

1.3 includes 和 indexOf 方法的区别

includes能匹配到NaN，但是indexOf不行;
includes能识别到稀疏数组中的undefined，但是indexOf不可以.
代码示例：

console.log([NaN,1,2,3].includes(NaN))//true
console.log([NaN,1,2,3].indexOf(NaN))//-1
//定义一个稀疏数组arr，只给索引值为3的元素赋值1，则其他为undefined
let arr = []
arr[3] = 1
console.log(arr) //[empty × 3, 1]
console.log(arr.includes(undefined)) //true
console.log(arr.indexOf(undefined))  //-1

2 .字符串和数组中的 indexOf | includes 方法比较

区别：
- 字符串中的indexOf和includes方法会对匹配的元素进行数据类型转换；
- 数组中的indexOf和includes方法是进行严格匹配===，即当元素的数据类型不相同时，无法匹配到对应的元素。
代码示例：

//数组的情况：严格匹配
console.log(['1','2','3','4'].includes(2))//false
console.log(['1','2','3','4'].indexOf(2))//-1
//字符串的情况：会做类型转换
console.log('12345'.includes(2))//true
console.log('12345'.indexOf(2))//1

3. 小结

以上便是JavaScript中的inludes和indexOf方法的一些内容，有任何不足欢迎在评论区补充。

参考

参考视频教程【JS每日一题：JS中的includes和indexOf方法，到底有什么区别？】

JavaScript中的 inludes 和 indexOf 方法 | 判断字符串或数组中是否存在对应的元素| 相同点与不同点 | 代码详解相关推荐

indexOf方法是否可以查找数组中的对象
indexOf是否可以查找数组中的对象 const arr = [{age:'1',name:'2'}, {age:'3', name:'4'}] arr.indexOf({age:'1',name: ...
python中列表和元组的相同点和不同点_详解Python语言中元组和列表的区别
本篇介绍Python中的元组数据类型,文中会讨论元组与列表的区别,元组的声明.赋值及其相关运算.通过本篇的学习,可以达成如下目标. ● 掌握元组和列表的区别 ● 掌握元组的声明和赋值 ● 掌握适用于元 ...
【转载】C#中List集合使用Exists方法判断是否存在符合条件的元素对象
在C#的List集合操作中,有时候需要根据条件判断List集合中是否存在符合条件的元素对象,此时就可以使用List集合的扩展方法Exists方法来实现,Exists方法的签名为bool Exists( ...
【转载】C#中List集合使用Contains方法判断是否包含某个对象
在C#的List集合中,如果要查找List集合是否包含某一个值或者对象,如果不使用List集合类的扩展方法的话一般会使用for循环或者foreach遍历来查找,其实List集合类中的扩展方法Conta ...
python 子串是否在字符串中_python七种方法判断字符串是否包含子串
1. 使用 in 和 not in in 和 not in 在 Python 中是很常用的关键字,我们将它们归类为成员运算符. 使用这两个成员运算符,可以很让我们很直观清晰的判断一个对象是否在另一个 ...
利用indexOf方法去删除重复数组
利用indexOf方法去删除重复数组原理:indexof在数组中去遍历如果有我们需要的元素就会返回元素所在索引号,若没有就会返回-1:注意在索引时要求调用的参数与数组中的参数应该数据类型的一致,要求 ...
判断是否在数组中，若在输入其下标，否则输入-1
编写程序,在程序中初始化一个数据,有10个元素,同时赋好值,从键盘输入一个数x,判断是否在数组中,若在输入其下标,否则输入-1 方法① public static void main(String[] ...
判断一个int数组中的元素是否存在重复
package com.hbut.test2; import java.util.ArrayList; import java.util.HashSet; import java.util.List; ...
【转载】 C#使用string.IsNullOrWhiteSpace方法判断字符串是否为非空字符
在C#编程过程中,很多时候需要判断传入过来的字符串是否为Null或者空字符或者空白字符,此时就可以使用到string.IsNullOrWhiteSpace方法来判断,如果字符串为null或者空字符Em ...

JavaScript中的 inludes 和 indexOf 方法 | 判断字符串或数组中是否存在对应的元素| 相同点与不同点 | 代码详解

目录

JavaScript中的inludes和indexOf方法

1.数组中的includes和indexOf方法比较

1.1 函数返回值的不同

1.2 函数第二个参数——开始查找的位置

1.3 includes 和 indexOf 方法的区别

2 .字符串和数组中的 indexOf | includes 方法比较

3. 小结

参考

JavaScript中的 inludes 和 indexOf 方法 | 判断字符串或数组中是否存在对应的元素| 相同点与不同点 | 代码详解相关推荐

最新文章

热门文章