In the interview of Tencent and Baidu, there is such an interview question, which is affectionately called the net red interview question, this interview question is. [‘1’, ‘2’, ‘3’].map(parseInt) [‘1’, ‘2’, ‘3’].fliter(parseInt) The interviewer may be asking you not only to tell the result, but also to know why it happened.

Key grammar

1, the parseInt

2, parseFloat

Let’s first look at the syntax and use of parseInt and parseFloat so we can explain them later in real-world examples.

Second, the Map

1, [‘1’, ‘2’, ‘3’].map(parseInt)

['1'.'2'.'3'].map(parseInt)
// [1, NaN, NaN]
Copy the code

In fact, when map is used, the second parameter index radix value of map callback becomes parseeInt radix value. [‘1’, ‘2’, ‘3’].map(parseInt) during traversal. It actually went through the following process.

parseInt('1', 0);
parseInt('2', 1);
parseInt('3', 2);
Copy the code
  • ParseInt (‘1’, 0) : the radix value is 0, the judgment string is found to be between 1 and 9, and the result is 1 by decimal conversion.
  • ParseInt (‘2’, 1) : Radix’s value is 1, and parseInt() will return NaN if the parameter is less than 2 or greater than 36.
  • ParseInt (‘3’, 2): Radix has a value of 2, which means that the string will be parsed to the number of bytes, that is, containing only the values 0 and 1. The specification for parseInt states that it only attempts to parse the left side of the first character. The first character of this string is “3”, which is not a significant number in the base base 2. So the substring will be parsed to null. If the substring parses to empty, the function returns NaN.

2, [‘1’, ‘2’, ‘3’].map(parseFloat)

['1'.'2'.'3'].map(parseFloat)
// [1, 2, 3]
Copy the code

ParseFloat is relatively simple compared to parseInt. You don’t need to worry about the second argument, you just need to see if the first argument converts to a number properly.

parseFloat('1');  // 1
parseFloat('2');  // 2
parseFloat('3'); / / 3Copy the code

A quick tidbit: How do I quickly convert an array of strings into an array of numbers

['1'.'2'.'3'].map(parseFloat)
['1'.'2'.'3'].map(Number)
Copy the code

Third, the filter

1, [‘1’, ‘2’, ‘3’].filter(parseInt)

['1'.'2'.'3'].filter(parseInt)
// ["1"]
Copy the code

Filter calls the callback function once for each element in the array and creates a new array with all the elements that make callback return true or its equivalent.

parseInt('1', 0);
parseInt('2', 1);
parseInt('3', 2);
Copy the code
  • ParseInt (‘1’, 0) : The radix value is 0, the judgment string is found between 1 and 9, and the result is 1, so the result of callback is equivalent to true, and the element ‘1’ is returned.
  • ParseInt (‘2’, 1) : The radix value is 1, if this parameter is less than 2 or greater than 36, then parseInt() will return NaN, and the result is not equivalent to true, no return.
  • ParseInt (‘3’, 2): Radix has a value of 2, which means that the string will be parsed to the number of bytes, that is, containing only the values 0 and 1. The specification for parseInt states that it only attempts to parse the left side of the first character. The first character of this string is “3”, which is not a significant number in the base base 2. So the substring will be parsed to null. If the substring parses to empty, the function returns NaN.

2, [‘1’, ‘2’, ‘3’].filter(parseFloat)

['1'.'2'.'3'].filter(parseFloat)
// ["1"."2"."3"]
Copy the code

With parseFloat, every entry in the result after the traversal is the result equivalent to true, so all are returned.

Fourth, to reflect on

When using parseInt or parseFloat instead of callback, you only need to understand how parseInt and parseFloat work. In this case, the results can be output quickly. You can also use the above explanation to answer the interviewer. This kind of interview questions are not difficult.