Do you have all the top ten hot javascript pen questions in 2015?

Do you have all the top ten hot javascript pen questions in 2015?

1. Evaluate the knowledge of this 

 
 

  
  
var length = 10; 
  
  
function fn() { 
  
  
  console.log(this.length); 
  
  
} 
  
  
 
  
  
var obj = { 
  
  
  length: 5, 
  
  
  method: function(fn) { 
  
  
    fn(); 
  
  
    arguments[0](); 
  
  
  } 
  
  
}; 
  
  
 
  
  
obj.method(fn, 1); 
 
 

Output: 10 2

Output 10 for the first time should be OK. We know that the object is not only a vertex operator but can also be enclosed in brackets. Therefore, the second execution is equivalent to calling the arguments method. this points to arguments, and two parameters are passed here, therefore, the length of the output arguments is 2.

2. Early declaration of var and functions

 
 

  
  
function fn(a) { 
  
  
  console.log(a);  
  
  
  var a = 2; 
  
  
  function a() {} 
  
  
  console.log(a);  
  
  
} 
  
  
 
  
  
fn(1); 
 
 

Output: function a () {} 2

We know that var and function are declared in advance, and function is declared in priority over var (if both exist). Therefore, the output of a is a function after declaration in advance, then the code executes a to re-assign the value, so the second output is 2.

3. Local and global variables

 
 

  
  
var f = true; 
  
  
if (f === true) { 
  
  
  var a = 10; 
  
  
} 
  
  
 
  
  
function fn() { 
  
  
  var b = 20; 
  
  
  c = 30; 
  
  
} 
  
  
 
  
  
fn(); 
  
  
console.log(a); 
  
  
console.log(b); 
  
  
console.log(c); 
 
 

Output: 10 error 30

This is a mistake I made for a long time. For a long time, I thought {...} the newly declared variable in the function is a local variable. Later, I found that the newly declared variable in the function is a local variable, instead of where the variable declared by var is a global variable. Again, remember that only the newly declared function () {} can be a local variable, while {...}, if {...}, (..) all are global variables (unless they are included in the function ).

4. Implicit variable Declaration

 
 

  
  
var f = true; 
  
  
if (f === true) { 
  
  
  var a = 10; 
  
  
} 
  
  
 
  
  
function fn() { 
  
  
  var b = 20; 
  
  
  c = 30; 
  
  
} 
  
  
 
  
  
fn(); 
  
  
console.log(a); 
  
  
console.log(b); 
  
  
console.log(c); 
 
 

Answer: 10

As I mentioned earlier, function and var will be declared in advance, while variables in {...} will also be declared in advance. So before the code is executed, the variable has been declared, so 'A' in window returns true, and a is assigned a value.

5. Add attributes to basic data. No error is reported, but the value is undefined.

 
 

  
  
var a = 10; 
  
  
a.pro = 10; 
  
  
console.log(a.pro + a); 
  
  
 
  
  
var s = 'hello'; 
  
  
s.pro = 'world'; 
  
  
console.log(s.pro + s); 
 
 

Answer: NaN undefinedhello

No error is returned when attributes are added to the basic data type, but undefined, 10 + undefined, and NaN are returned if the referenced data type is used. When undefined and string are added, they are converted to strings.

6. function declaration is better than variable Declaration

 
 

  
  
console.log(typeof fn); 
  
  
function fn() {}; 
  
  
var fn; 
 
 

Answer: function

Because function declaration is better than variable declaration. We know that before the code is executed line by line, the function declaration and variable declaration will be carried out in advance, and the function declaration will be better than the variable declaration. Here, the better here can be understood as after the variable declaration, if the function name and variable name are the same, the function declaration can overwrite the variable declaration. So the above Code will declare the function and the variable declaration change order is the same result.

7. Identify the most frequently occurring characters in a string and count the number of times

Hash table mode: 

 
 

  
  
var s = 'aaabbbcccaaabbbaaa'; 
  
  
var obj = {}; 
  
  
var maxn = -1; 
  
  
var letter; 
  
  
for(var i = 0; i < s.length; i++) { 
  
  
  if(obj[s[i]]) { 
  
  
    obj[s[i]]++; 
  
  
    if(obj[s[i]] > maxn) { 
  
  
      maxn = obj[s[i]]; 
  
  
      letter = s[i]; 
  
  
    } 
  
  
  } else { 
  
  
    obj[s[i]] = 1; 
  
  
    if(obj[s[i]] > maxn) { 
  
  
      maxn = obj[s[i]]; 
  
  
      letter = s[i]; 
  
  
    } 
  
  
  } 
  
  
} 
  
  
 
  
  
alert(letter + ': ' + maxn); 
 
 

Regular Expression mode: 

 
 

  
  
var s = 'aaabbbcccaaabbbaaabbbbbbbbbb'; 
  
  
var a = s.split(''); 
  
  
a.sort(); 
  
  
s = a.join(''); 
  
  
var pattern = /(\w)\1*/g; 
  
  
var ans = s.match(pattern); 
  
  
ans.sort(function(a, b) { 
  
  
  return a.length < b.length; 
  
  
});; 
  
  
console.log(ans[0][0] + ': ' + ans[0].length); 
 
 

8. Classic Closure

 
 

  
  
<! -- Implement a script so that the corresponding link alert is clicked to generate the corresponding number -->
  
  
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
  
  
<Body>
  
  
<A href = '#'> first link </a> </br>
  
  
<A href = '#'> second link </a> </br>
  
  
<A href = '#'> third link </a> </br>
  
  
<A href = '#'> fourth link </a> </br>
  
  
</Body>
 
 

Dom pollution method:

 
 

  
  
<! -- Implement a script so that the corresponding link alert is clicked to generate the corresponding number -->
  
  
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
  
  
<Body>
  
  
<A href = '#'> first link </a> </br>
  
  
<A href = '#'> second link </a> </br>
  
  
<A href = '#'> third link </a> </br>
  
  
<A href = '#'> fourth link </a> </br>
  
  
<Script type = "text/javascript">
  
  
Var lis = document. links;
  
  
For (var I = 0, length = lis. length; I <length; I ++ ){
  
  
Lis [I]. index = I;
  
  
Lis [I]. onclick = function (){
  
  
Alert (this. index );
  
  
};
  
  
}
  
  
</Script>
  
  
</Body>
 
 

Closure:

 
 

  
  
<! -- Implement a script so that the corresponding link alert is clicked to generate the corresponding number -->
  
  
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
  
  
<Body>
  
  
<A href = '#'> first link </a> </br>
  
  
<A href = '#'> second link </a> </br>
  
  
<A href = '#'> third link </a> </br>
  
  
<A href = '#'> fourth link </a> </br>
  
  
<Script type = "text/javascript">
  
  
Var lis = document. links;
  
  
For (var I = 0, length = lis. length; I <length; I ++ ){
  
  
(Function (I ){
  
  
Lis [I]. onclick = function (){
  
  
Alert (I + 1 );
  
  
};
  
  
}) (I );
  
  
}
  
  
</Script>
  
  
</Body>
 
 

9. this

 
 

  
  
Function JSClass (){
  
  
This. m_Text = 'division element ';
  
  
This. m_Element = document. createElement ('div ');
  
  
This. m_Element.innerHTML = this. m_Text;
  
  
This. m_Element.addEventListener ('click', this. func );
  
  
// This. m_Element.onclick = this. func;
  
  
}
  
  
 
  
  
JSClass. prototype. Render = function (){
  
  
Document. body. appendChild (this. m_Element );
  
  
}
  
  
 
  
  
JSClass. prototype. func = function (){
  
  
Alert (this. m_Text );
  
  
};
  
  
 
  
  
Var jc = new JSClass ();
  
  
Jc. Render (); // add div
  
  
Jc. func (); // output division element
  
  
// Click the added div element division element to output underfined. Why?
 
 

Answer: division element undefined

The first output is easy to understand. The second time, I will take a closer look. this actually points to this. m_Element. Because this is the addEventListener function called by this. m_Element, all the internal this points to it. You can try to add a line of code this. m_Element.m_Text = 'Hello world' and alert will output hello world.

10. split

Please write a JavaScript function parseQueryString, which is used to parse the URL parameter into an object, such as: var url = "http://witmax.cn/index.php? Key0 = 0 & key1 = 1 & key2 = 2 ″

 
 

  
  
function parseQueryString(url) { 
  
  
  var obj = {}; 
  
  
  var a = url.split('?'); 
  
  
  if(a === 1) return obj; 
  
  
  var b = a[1].split('&'); 
  
  
  for(var i = 0, length = b.length; i < length; i++) { 
  
  
    var c = b[i].split('='); 
  
  
    obj[c[0]] = c[1]; 
  
  
  } 
  
  
  return obj; 
  
  
} 
  
  
var url = 'http://witmax.cn/index.php?key0=0&key1=1&key2=2'; 
  
  
var obj = parseQueryString(url); 
  
  
console.log(obj.key0, obj.key1, obj.key2);  // 0 1 2