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

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
3
4
5

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
2
3
4
5

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
1
2
3
4
5
6
7
8

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
1
2
3
4
5
6

3. 小结

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

参考

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