Js is an amazing language with so many possibilities that it’s no wonder people are embracing typescript. Compared to Java, c++ and other languages, js grammar slightly looser, the type of function parameters can have a variety of possibilities, so when I see the following problem on the Internet, the heart could not help MMP, we can not point formal, less to this kind of demons and ghosts

['1'.'7'.'11'].map(parseInt) -> [1, NaN, 3]Copy the code

You, too, were a little confused when you first saw the result. Why does the output have NaN? Why does rounding ’11’ give you 3?

If you’re the big guy and you’ve seen everything through, you can just go down and give it a thumbs up, otherwise we’ll find out why.

Key map functions

We want to convert the string numbers in the array to integers, so we use the map function to apply to each item of the array. The parseInt function is used, so the expected result should be [1,7,11]. However, the human calculation is not as good as the browser calculation. The final answer from the browser’s JavaScript engine is [1, NaN, 3]. We can see from the result that 1 is converted normally, and the next two numbers are not expected.

First guess: is there a problem with the passed parseInt?

So now we’re going to replace parseInt and multiply each number by two

['1'.'7'.'11'].map(function(x){
	returnx * 2; // Result -> [2, 14, 22]});Copy the code

It turns out that it’s normal, x is for every value that we get from the array, and we multiply it by 2, no problem. But the question is, can there be other parameters besides x, can there be other parameters that you can use. So let’s try:

['1'.'7'.'11'].map(function(x, i, j, k){
	console.log(x +' ' + i + ' ' + j + ' ' + k);
});
Copy the code

I ran it on Chrome’s console and found unexpected results

That is, the map accepts a function that takes three arguments: the first is the current value of the array, the second is the index of the current value, and the third number is the array that is currently passed in.

When we pass parseInt, the map function packages three parameters (the current element of the array, the current element’s index, and the current array passed in) to parseInt. So now we’re going to focus on the parseInt function. As you can see from the MDN documentation, the parseInt(String, radix) function takes two arguments, the first is the string to be converted and the second is the base. So the result is clear, and I’ve graphed the process to make it easier to understand, as follows:

First, parseInt takes two arguments, so the third argument is ignored. The first time parseInt(‘1’, 0) prints 1, because 0 converts to false, and false causes it to execute the default base 10, that is, parseInt converts to decimal by default; On the second execution, parseInt(‘7′, 1) cannot be converted because there is no such thing as base 1, and outputs NaN; The third time parseInt(’11’, 2) is executed, the answer is 3, because the binary of 3 is 11, which is very clever.

So the final output is [1, NaN, 3]. Don’t blame the browser, blame yourself, haha.

conclusion

As the saying goes, man will conquer nature. In the world of programmers, we all think that man will conquer machine (browser). However, the fact is usually different from what we expect. You can know that each function has multiple specified parameters, some are required, some are optional, of course, I don’t think it is necessary to memorize each function corresponding parameters, when necessary, use the Internet on the line.

(after)