JS Classic Problem Analysis

This list of some interesting JS topic (from the name of the 44), I believe there are a lot of these topics on the blog, the purpose of this blog is to consolidate some knowledge points, and readers hope to progress together.

1. Map function Execution Process

["1", "2", "3"].map (parseint)

Answer: [1, Nan, Nan] parsing: Map (function callback (current, index, array)), map fallback provides three parameters, current value, index of the current value, AR Ray.parseint (value, radix), parseint provides two parameters, and value indicates that the string,radix that needs to be converted represents the original binary unit of string, from 2 to 36. So the implementation of this problem is this: Array.map (parseint (current), Radix (index)); The return will automatically be assigned the parameter current = value, index = radix; The real execution Process Array.map (parseint (1, 0)) = parseint (1, 0), and 0 by default represents decimal. parseint (2, 1), No 1 binary, so return Nan,parseint (3,2), 2 binary only 0, 1, so also return Nan 2. [typeof null, null instanceof object] Answer: [Object, False] parse: typeof returns a String representing the type, typeof null = = Object.instanceof used to test an object Whether there is a constructor in its prototype chain. prototypeproperty, it is obvious that NULL does not have a constructor, so the return is False 3. Operator Precedence

var val = ' Smtg ';

console.log(‘Value is ‘ + (val === ‘smtg‘) ? ‘Something‘ : ‘Nothing‘)

答案：Something 解析：+ 运算符优先级高于 > ，所以没有括号的情况下， 会先执行字符串连接操作。 所以等价于 ‘Value is true‘? ‘Something‘ : ‘Nothing‘ 如果搞不清运算符优先级的时候，可以加上括号4. Sparse Arrays and Array.filter

var ary = [0,1,2];ary[] = ten; Ary.filter (functionreturn x = = = undefined;});

Answer: []

Parsing: This side of the ary is a sparse array, index from 3 to 9 is not defined, so the value of ary[3~9] is undefined (can be viewed in the Chrome tool via Ary[index]), So at first glance the answer to this question should be to return an array of 7 undefined.

But the return is [], because of the role of the filter function.

if(!Array.prototype.filter) {Array.prototype.filter=function(func, thisarg) {' Use strict '; if( ! ((typeofFunc = = = ' Function ' | |typeofFunc = = = ' function ') && This) )        Throw NewTypeError (); varLen = This. length >>> 0, Res=NewArray (len),//preallocate Arrayt = This, c = 0, i =-1; if(Thisarg = = =undefined) {       while(++i!==Len) {        //checks to see if the key is set        //look here, look at this .        if(Iinch  This){          if(func (T[i], I, T)) {Res[c++] =T[i]; }        }      }    }    Else{       while(++i!==Len) {        //checks to see if the key is set        if(Iinch  This){          if(Func.call (Thisarg, t[i], I, T)) {Res[c++] =T[i]; } }}} res.length= C;//shrink down array to proper size    returnRes; };}

You can see the code below the red text, the filter function will first determine whether the current index is set in the array, that is, whether there is a ary[index] = value of the process, otherwise the index will be skipped.

So for sparse arrays, undefined index is skipped, causing the answer to this question to be []. If there is ary[index] = undefined, then the result is a return array of undefined.

Array.filter

5. The difference between string (' a ') and new string (' a ')

What are the output results of the following two code snippets?

functionShowCase (value) {Switch(value) { CaseA: Console.log (' Case A ');  Break;  CaseB: Console.log (' Case B ');  Break;  CaseUndefined:console.log (' Undefined ');  Break; default: Console.log (' Do not know! '); }}showcase (NewString (' A '));

functionShowCase2 (value) {Switch(value) { CaseA: Console.log (' Case A ');  Break;  CaseB: Console.log (' Case B ');  Break;  CaseUndefined:console.log (' Undefined ');  Break; default: Console.log (' Do not know! '); }}showcase2 (String (' A '));

Answer: ' Do not know! '; ' Case A '

Parsing: Why are the outputs of the two snippets inconsistent?

Two reasons: 1.switch compared with the same character "= = =", so does not do type conversion, that is, "10" will not equal 10;

2. The new string () is different from the type returned by string, which returns an object, which returns a string, so the result returned is false when doing a congruent comparison.

So if you need to use switch to compare strings, you need to be aware of the type of arguments passed in.

6. Do you really know "= ="?

What is the output of the following two code snippets?

var a = [0]; if ([0]) {  trueElse  {  console.log ("wut");}

[]==

Answer: false, False

Parsing: If you simply convert [0] to a Boolean type, the result is true, so the IF judgment statement results in true.

Read a lot of other blogs, have said "= =" will do type conversion, compare its value, I think this answer still cannot explain the result of the above code in detail.

After reviewing more information, we found some rules of "= =":

1, if the two value types are the same, do = = = comparison, the comparison rule ibid.
2. If two value types are different, they may be equal. Type conversions are then compared according to the following rules:
A, if one is null and one is undefined, then [equal].
B, if one is a string, one is a numeric value, the string is converted to a numeric value and then compared.
C, if any value is true, convert it to 1 and then compare it to 0 if either value is false.
D, if one is an object and the other is a numeric or string, convert the object to the value of the underlying type and then compare it. The object is converted to the underlying type, using its ToString or ValueOf method. JS Core built-in class, will try to valueof before ToString, the exception is that date,date is using the ToString conversion. Non-JS core of the object, so that (more trouble, I do not understand)
E, any other combinations (array arrays, and so on) are not equal.

So in fact, "= =" of the conversion rules, and not as simple as the imagination, thus [0] = = True, should adopt the rule C, and [] = = [] should be used is the rule E.

Finally, I enclose a result graph of "= =" comparison.

7. Arguments of methods

function sideffecting (ary) {  ary[0] = ary[2];} function Bar (a,b,c) {  =  sideffecting (arguments);   return A + B + C;} Bar (1,1,1)

function sideffecting (ary) {  ary[0] = ary[2];} function Bar (a,b,c=3) {  =  sideffecting (arguments);   return A + B + C;} Bar (1,1,1)

Answer: 21, 12

Parsing: The answer to the first code snippet, I believe, is easy to draw. The problem is the second piece of code, and at first glance the result should be the same as the first code snippet, but why not?

In fact, this side of the result is caused by arguments this object (arguments is not an array ), if the function parameter has a default value, then arguments this object will not track changes in parameter values, and only record the value passed over.

So the second code snippet, the result of arguments is (1,1,1), the sideeffecting function gets the result is ary[0] =1, ary[2] = 1; So go back to A+b+c = 1+1+10 = = "12. More details can be found on the links below.

Arguments

8. Interesting comparators come again. [1 < 2 < 3, 3 < 2 < 1]

Answer: TRUE, True

Parse: 1<2<3 equivalent to 1<2=> true; True<3 = 1<3=> true;

3<2=> false; False<1 = 0<1=> true.

9. Variable Promotion

(function() {  var x = y = 1;}) (); Console.log (y); Console.log (x) ;

Answer: 1, error

Parsing: This topic involves the range of variable promotion, as well as the assignment syntax.

var x=y=1 is equivalent to Var x=1; Y=1; The y here will be promoted to the global domain, so the answer is the above.

var x=1,y=1 is equivalent to Var x=1; var y=1, in this case, X, y are local variables and will not be promoted.

Summarize the first few words, and then encounter interesting topics, will continue to update.

JS Classic Problem Analysis