2015年十大热点javascript笔试题你都会么？

时间 2020-01-10

标签 2015年十大热点 javascript 笔试都会栏目 JavaScript 繁體版

原文原文链接

一、考察this

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

输出：10 2javascript

第一次输出10应该没有问题。咱们知道取对象属于除了点操做符还能够用中括号，因此第二次执行时至关于arguments调用方法，this指向arguments，而这里传了两个参数，故输出arguments长度为2。php

二、var和函数的提早声明

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

输出：function a() {} 2html

咱们知道var和function是会提早声明的，并且function是优先于var声明的(若是同时存在的话)，因此提早声明后输出的a是个function，而后代码往下执行a进行从新赋值了，故第二次输出是2。java

三、局部变量和全局变量

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);

输出：10 报错 30闭包

这是个我犯了好久的错误，很长一段时间我都觉得{...}内的新声明的变量是局部变量，后来我才发现function内的新声明的变量才是局部变量，而没有用var声明的变量在哪里都是全局变量。再次提醒切记只有function(){}内新声明的才能是局部变量，while{...}、 if{...}、for(..) 以内的都是全局变量(除非自己包含在function内)。app

四、变量隐式声明

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);

答案：10dom

前面我说过function和var会提早声明，而其实{...}内的变量也会提早声明。因而代码还没执行前，a变量已经被声明，因而 'a' in window 返回true，a被赋值。函数

五、给基本类型数据添加属性，不报错，但取值时是undefined

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

答案：NaN undefinedhelloui

给基本类型数据加属性不报错，可是引用的话返回undefined，10+undefined返回NaN，而undefined和string相加时转变成了字符串。this

六、函数声明优于变量声明

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

答案：function

由于函数声明优于变量声明。咱们知道在代码逐行执行前，函数声明和变量声明会提早进行，而函数声明又会优于变量声明，这里的优于能够理解为晚于变量声明后，若是函数名和变量名相同，函数声明就能覆盖变量声明。因此以上代码将函数声明和变量声明调换顺序仍是同样结果。

七、判断一个字符串中出现次数最多的字符，并统计次数

hash table方式：

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);

正则方式：

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);

八、经典闭包

<!-- 实现一段脚本，使得点击对应连接alert出相应的编号 --> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<body> 
  <a href='#'> 第一个连接 </a> </br> 
  <a href='#'> 第二个连接 </a> </br> 
  <a href='#'> 第三个连接 </a> </br> 
  <a href='#'> 第四个连接 </a> </br> 
</body>

dom污染法：

<!-- 实现一段脚本，使得点击对应连接alert出相应的编号 --> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<body> 
  <a href='#'> 第一个连接 </a> </br> 
  <a href='#'> 第二个连接 </a> </br> 
  <a href='#'> 第三个连接 </a> </br> 
  <a href='#'> 第四个连接 </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>

闭包：

<!-- 实现一段脚本，使得点击对应连接alert出相应的编号 --> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<body> 
  <a href='#'> 第一个连接 </a> </br> 
  <a href='#'> 第二个连接 </a> </br> 
  <a href='#'> 第三个连接 </a> </br> 
  <a href='#'> 第四个连接 </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>

九、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();  // 输出 division element 
//click添加的div元素division element会输出underfined，为何？

答案：division element undefined

第一次输出很好理解，第二次的话仔细看，this其实已经指向了this.m_Element，由于是this.m_Element调用的 addEventListener函数，因此内部的this全指向它了。能够试着加上一行代码this.m_Element.m_Text = 'hello world'，就会alert出hello world了。

十、split

请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象，如： 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