目录
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方法的一些内容,有任何不足欢迎在评论区补充。