The indexOf method in JavaScript arrays is explained

Recently the project encountered a small problem code I will simplify into a small example to show you.

The last thing you need to do is to look at it with care, and children with a solid foundation can jump directly to the array type.

Speaking of indexOf everyone is not unfamiliar, to determine whether the string contains substrings when particularly commonly used (regular unskilled students of the tool).

Use of the String type

As an example, let’s review the familiar use of strings.

let str = 'orange';

str.indexOf('o');  //0
str.indexOf('n');  //3
str.indexOf('c');  //-1

Here 0 and 3 are the positions of o and n in the string, respectively. The starting subscript is 0. And -1 means no match.

Someone once asked me why -1 is not null or undefined, ask the person who made the rules! I have no idea.

You see nothing bright here, don’t worry, then come to an example.

let numStr = '2016';

numStr.indexOf('2');  //0
numStr.indexOf(2);  //0

See a small point here is that indexOf does a simple type conversion, converting the number to the string ‘2’ and then executing it.

Use of the Number type

You may wonder if there is an indexOf method for the number type because it will do an implicit conversion! Let me tell you clearly that there is not, for example.

let num = 2016;

num.indexOf(2);  //Uncaught TypeError: num.indexOf is not a function

Do you have to use the indexOf method on the number type? Then convert it to a string, and continue with the example.

// The first one
num = '2016';
num.indexOf(2);  //0

// The second one
num.toString().indexOf(2);  //0

// The third one
('' + num).indexOf(2);  //0

The first way is simple and straightforward, and it is not infeasible for known shorter numbers. But what about when the num variable is variable for different data?

The second way to write the most commonly used, but compared to the third way to write a little longer. Ha ha, in fact, both can.

Code clean people like the third.

Use of the Array type

Let’s get in the spirit, here comes the big boss.

We are all familiar with the array method, but we ignore that the array has indexOf this method (my personal feeling).

What problems have we encountered, and where are the points of attention?

let arr = ['orange', '2016', '2016'];

arr.indexOf('orange');  //0
arr.indexOf('o');  //-1

arr.indexOf('2016');  //1
arr.indexOf(2016);  //-1

The examples are not broken down so finely here, and four use cases are sufficient to illustrate the problem.

  • arr.indexOf(‘orange’) outputs 0 because ‘orange’ is the 0th element of the array that matches and returns the subscript.
  • arr.indexOf(‘o’) outputs -1 because this method does not perform the indexOf match again on each element.
  • arr.indexOf(‘2016′) outputs 1 because this method matches from the beginning until it returns the table below the first array element when it matches, instead of returning the subscripts of all matches.
  • arr.indexOf(2016) output -1 Note: No implicit type conversion is done here.

Since the pit has been found we might as well get to the bottom of it. Go to the MDN website to see what’s going on. If you are interested in this topic, you can jump directly to Array.prototype.indexOf()

For those who just want to know, here is the official description.

indexOf() compares searchElement to elements of the Array using strict equality (the same method used by the === or triple-equals operator).

At a glance, it is clear that strict equivalence (===) is used here. Pay more attention when you make similar judgments. Do not make the mistake of thinking that numbers will be converted to strings, and by the same token strings will not be converted to numbers.

Summary

The second parameter of indexOf() is not explained here, so I believe we all know the role of the second parameter, if you don’t know, you can see here String.prototype.indexOf(), and then look at the second parameter in combination with the link to the array above.

Leave a Reply