這10道javascript筆試題你都會麼

時間 2019-11-29

原文原文鏈接

一、考察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

四、變量隱式聲明

if('a' in window) {
  var a = 10;
}

alert(a);

　　答案：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 undefinedhello ui

　　給基本類型數據加屬性不報錯，可是引用的話返回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.length === 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