2015年十大熱點javascript筆試題你都會么？
來自： http://developer.51cto.com/art/201503/469678.htm
1、考察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 2
第一次輸出10應該沒有問題。我們知道取對象屬于除了點操作符還可以用中括號，所以第二次執行時相當于arguments調用方法，this指向arguments，而這里傳了兩個參數，故輸出arguments長度為2。
2、var和函數的提前聲明
function fn(a) {
console.log(a);
var a = 2;
function a() {}
console.log(a);
}
fn(1); 輸出：function a() {} 2
我們知道var和function是會提前聲明的，而且function是優先于var聲明的(如果同時存在的話)，所以提前聲明后輸出的a是個function，然后代碼往下執行a進行重新賦值了，故第二次輸出是2。
3、局部變量和全局變量
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內)。
4、變量隱式聲明
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
前面我說過function和var會提前聲明，而其實{...}內的變量也會提前聲明。于是代碼還沒執行前，a變量已經被聲明，于是 'a' in window 返回true，a被賦值。
5、給基本類型數據添加屬性，不報錯，但取值時是undefined
var a = 10; a.pro = 10; console.log(a.pro + a); var s = 'hello'; s.pro = 'world'; console.log(s.pro + s);
答案：NaN undefinedhello
給基本類型數據加屬性不報錯，但是引用的話返回undefined，10+undefined返回NaN，而undefined和string相加時轉變成了字符串。
6、函數聲明優于變量聲明
console.log(typeof fn);
function fn() {};
var fn; 答案：function
因為函數聲明優于變量聲明。我們知道在代碼逐行執行前，函數聲明和變量聲明會提前進行，而函數聲明又會優于變量聲明，這里的優于可以理解為晚于變量聲明后，如果函數名和變量名相同，函數聲明就能覆蓋變量聲明。所以以上代碼將函數聲明和變量聲明調換順序還是一樣結果。
7、判斷一個字符串中出現次數最多的字符，并統計次數
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); 8、經典閉包
<!-- 實現一段腳本，使得點擊對應鏈接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> 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(); // 輸出 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了。
10、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