The includes and indexOf methods in JavaScript | Judging whether there is a corresponding element in a string or an array | Similarities and differences | Detailed code explanation

includes and indexOf methods in JavaScript

• Main purpose: used to determine whether there is a corresponding element in a string or an array

1. Comparison of includes and indexOf methods in the array

1.1 Differences in function return values

• includesThe method returns Booleana value of the type. Returns true if the element exists and false if it does not exist.
• indexOfThe method returns Numbera value of the type. Returns the index value of the first occurrence if the element exists, or returns if it does not exist -1.
• So when used ifas a judgment condition (the following code example),
  • For includesthe return value of the method result1, use if(result1){...}to determine whether the element exists;
  • For indexOfthe return value of the method result2, use if(result2 !== -1){...}or if(result2 >= 0){...}to determine whether the element exists.
• Code example:

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 The second parameter of the function - the position to start searching

• indexOfand includesboth can add a second parameter, which indicates the position to start searching:
  • When it is a positive number, it indexOf(2,2)means starting from 2the element whose index value is to find whether there is an element from left to right2
  • If it is a negative number, it means to search for elements from left to right from the first number indexOf(2,-2)from the back to the front (note that the search order is from left to right), such as an array means to find whether there is 2 from left to right at the position of 5.22[1,2,3,4,5,6].indexOf(2,-2)
  • includesThe same goes for the second parameter of the method.
• Code example:

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 The difference between includes and indexOf methods

• includescan be matched NaN, but indexOfnot;
• includesCan recognize sparse arrays undefined, but indexOfnot.
• Code example:

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. Comparison of indexOf | includes method in string and array

• the difference:
  • The indexOf and includes methods in the string will perform data type conversion on the matched elements;
  • The indexOf and includes methods in the array are for strict matching ===, that is, when the data types of the elements are not the same, the corresponding elements cannot be matched.
• Code example:

//数组的情况：严格匹配
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. Summary

The above is some content of the includes and indexOf methods in JavaScript. If there are any deficiencies, please add them in the comment area.

reference

Refer to the video tutorial [JS Daily Question: What is the difference between the includes and indexOf methods in JS? 】