web前端面試試題總結---javascript篇

JavaScript

• 介紹js的基本數據類型。

   Undefined、Null、Boolean、Number、String、
   ECMAScript 2015 新增:Symbol(創建后獨一無二且不可變的數據類型 )

• 介紹js有哪些內置對象？

  Object 是 JavaScript 中所有對象的父對象
  
  數據封裝類對象：Object、Array、Boolean、Number 和 String
  其他對象：Function、Arguments、Math、Date、RegExp、Error

  參考：http://www.ibm.com/developerworks/cn/web/wa-objectsinjs-v1b/index.html
  

• 說幾條寫JavaScript的基本規范？

  1.不要在同一行聲明多個變量。
  2.請使用 ===/!==來比較true/false或者數值
  3.使用對象字面量替代new Array這種形式
  4.不要使用全局函數。
  5.Switch語句必須帶有default分支
  6.函數不應該有時候有返回值，有時候沒有返回值。
  7.For循環必須使用大括號
  8.If語句必須使用大括號
  9.for-in循環中的變量 應該使用var關鍵字明確限定作用域，從而避免作用域污染。

• JavaScript原型，原型鏈 ? 有什么特點？

  每個對象都會在其內部初始化一個屬性，就是prototype(原型)，當我們訪問一個對象的屬性時，
  如果這個對象內部不存在這個屬性，那么他就會去prototype里找這個屬性，這個prototype又會有自己的prototype，
  於是就這樣一直找下去，也就是我們平時所說的原型鏈的概念。
  關系：instance.constructor.prototype = instance.__proto__
  
  特點：
  JavaScript對象是通過引用來傳遞的，我們創建的每個新對象實體中並沒有一份屬於自己的原型副本。當我們修改原型時，與之相關的對象也會繼承這一改變。
  
   當我們需要一個屬性的時，Javascript引擎會先看當前對象中是否有這個屬性， 如果沒有的話，
   就會查找他的Prototype對象是否有這個屬性，如此遞推下去，一直檢索到 Object 內建對象。
      function Func(){}
      Func.prototype.name = "Sean";
      Func.prototype.getInfo = function() {
        return this.name;
      }
      var person = new Func();//現在可以參考var person = Object.create(oldObject);
      console.log(person.getInfo());//它擁有了Func的屬性和方法
      //"Sean"
      console.log(Func.prototype);
      // Func { name="Sean", getInfo=function()}

• JavaScript有幾種類型的值？，你能畫一下他們的內存圖嗎？

  棧：原始數據類型（Undefined，Null，Boolean，Number、String） 
  堆：引用數據類型（對象、數組和函數）
  
  兩種類型的區別是：存儲位置不同；
  原始數據類型直接存儲在棧(stack)中的簡單數據段，占據空間小、大小固定，屬於被頻繁使用數據，所以放入棧中存儲；
  引用數據類型存儲在堆(heap)中的對象,占據空間大、大小不固定。如果存儲在棧中，將會影響程序運行的性能；引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當解釋器尋找引用值時，會首先檢索其在棧中的地址，取得地址后從堆中獲得實體

  

• 如何將字符串轉化為數字，例如'12.3b'?

  * parseFloat('12.3b');
  * 正則表達式，'12.3b'.match(/(\d)+(\.)?(\d)+/g)[0] * 1, 但是這個不太靠譜，提供一種思路而已。

• 如何將浮點數點左邊的數每三位添加一個逗號，如12000000.11轉化為『12,000,000.11』?

  function commafy(num){
      return num && num
          .toString()
          .replace(/(\d)(?=(\d{3})+\.)/g, function($1, $2){
              return $2 + ',';
          });
  }

• 如何實現數組的隨機排序？

• 方法一： 
  ```javascript 
  
  　　var arr = [1,2,3,4,5,6,7,8,9,10]; 
       function randSort1(arr){ 
          for(var i = 0,len = arr.length;i < len; i++ ){ 
              var rand = parseInt(Math.random()*len); 
              var temp = arr[rand]; 
              arr[rand] = arr[i]; 
              arr[i] = temp; 
          }
           return arr;
       }
       console.log(randSort1(arr));
  
  ```
  方法二：
  ```javascript
          var arr = [1,2,3,4,5,6,7,8,9,10];
          function randSort2(arr){
              var mixedArray = [];
              while(arr.length > 0){
                  var randomIndex = parseInt(Math.random()*arr.length);
                  mixedArray.push(arr[randomIndex]);
                  arr.splice(randomIndex, 1);
              }
              return mixedArray;
          }
          console.log(randSort2(arr));
  
  ```
  方法三：
  ```javascript
          var arr = [1,2,3,4,5,6,7,8,9,10];
          arr.sort(function(){
              return Math.random() - 0.5;
          })
          console.log(arr);
  ```                         

• Javascript如何實現繼承？

  1、構造繼承
  2、原型繼承
  3、實例繼承
  4、拷貝繼承
  
  原型prototype機制或apply和call方法去實現較簡單，建議使用構造函數與原型混合方式。
  ```javascript
          function Parent(){
              this.name = 'wang';
          }
  
          function Child(){
              this.age = 28;
          }
          Child.prototype = new Parent();//繼承了Parent，通過原型
  
          var demo = new Child();
          alert(demo.age);
          alert(demo.name);//得到被繼承的屬性
  
  ```

• JavaScript繼承的幾種實現方式？

  • 參考：構造函數的繼承，非構造函數的繼承；

• javascript創建對象的幾種方式？

  javascript創建對象簡單的說,無非就是使用內置對象或各種自定義對象，當然還可以用JSON；但寫法有很多種，也能混合使用。
  
  
  1、對象字面量的方式
  
      person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};
  
  2、用function來模擬無參的構造函數
  
      function Person(){}
      var person=new Person();//定義一個function，如果使用new"實例化",該function可以看作是一個Class
      person.name="Mark";
      person.age="25";
      person.work=function(){
      alert(person.name+" hello...");
      }
      person.work();
  
  3、用function來模擬參構造函數來實現（用this關鍵字定義構造的上下文屬性）
  
      function Pet(name,age,hobby){
         this.name=name;//this作用域：當前對象
         this.age=age;
         this.hobby=hobby;
         this.eat=function(){
            alert("我叫"+this.name+",我喜歡"+this.hobby+",是個程序員");
         }
      }
      var maidou =new Pet("麥兜",25,"coding");//實例化、創建對象
      maidou.eat();//調用eat方法
  
  4、用工廠方式來創建（內置對象）
  
       var wcDog =new Object();
       wcDog.name="旺財";
       wcDog.age=3;
       wcDog.work=function(){
         alert("我是"+wcDog.name+",汪汪汪......");
       }
       wcDog.work();
  
  5、用原型方式來創建
  
      function Dog(){
  
       }
       Dog.prototype.name="旺財";
       Dog.prototype.eat=function(){
       alert(this.name+"是個吃貨");
       }
       var wangcai =new Dog();
       wangcai.eat();
  
  5、用混合方式來創建
  
      function Car(name,price){
        this.name=name;
        this.price=price; 
      }
       Car.prototype.sell=function(){
         alert("我是"+this.name+"，我現在賣"+this.price+"萬元");
        }
      var camry =new Car("凱美瑞",27);
      camry.sell(); 

• Javascript作用鏈域?

  全局函數無法查看局部函數的內部細節，但局部函數可以查看其上層的函數細節，直至全局細節。
  當需要從局部函數查找某一屬性或方法時，如果當前作用域沒有找到，就會上溯到上層作用域查找，
  直至全局函數，這種組織形式就是作用域鏈。

• 談談This對象的理解。

• this總是指向函數的直接調用者（而非間接調用者）；
  
  如果有new關鍵字，this指向new出來的那個對象；
  
  在事件中，this指向觸發這個事件的對象，特殊的是，IE中的attachEvent中的this總是指向全局對象Window；

• eval是做什么的？

  它的功能是把對應的字符串解析成JS代碼並運行；
  
  應該避免使用eval，不安全，非常耗性能（2次，一次解析成js語句，一次執行）。
  
  由JSON字符串轉換為JSON對象的時候可以用eval，var obj =eval('('+ str +')');

• 什么是window對象? 什么是document對象?

  window對象是指瀏覽器打開的窗口。
  document對象是Documentd對象（HTML 文檔對象）的一個只讀引用，window對象的一個屬性。

• null，undefined 的區別？

  null        表示一個對象是“沒有值”的值，也就是值為“空”；
  undefined   表示一個變量聲明了沒有初始化(賦值)；
  
  undefined不是一個有效的JSON，而null是；
  undefined的類型(typeof)是undefined；
  null的類型(typeof)是object；
  
  Javascript將未賦值的變量默認值設為undefined；
  Javascript從來不會將變量設為null。它是用來讓程序員表明某個用var聲明的變量時沒有值的。
  
  typeof undefined
      //"undefined"
      undefined :是一個表示"無"的原始值或者說表示"缺少值"，就是此處應該有一個值，但是還沒有定義。當嘗試讀取時會返回 undefined； 
      例如變量被聲明了，但沒有賦值時，就等於undefined
  
  typeof null
      //"object"
      null : 是一個對象(空對象, 沒有任何屬性和方法)；
      例如作為函數的參數，表示該函數的參數不是對象；
  
  注意：
      在驗證null時，一定要使用　=== ，因為 == 無法分別 null 和　undefined
      null == undefined // true
      null === undefined // false
  
  再來一個例子：
  
      null
      Q：有張三這個人么？
      A：有！
      Q：張三有房子么？
      A：沒有！
  
      undefined
      Q：有張三這個人么？
      A：有！
      Q: 張三有多少歲？
      A: 不知道（沒有被告訴）

  參考閱讀：undefined與null的區別

• 寫一個通用的事件偵聽器函數。

    // event(事件)工具集，來源：github.com/markyun
      markyun.Event = {
          // 頁面加載完成后
          readyEvent : function(fn) {
              if (fn==null) {
                  fn=document;
              }
              var oldonload = window.onload;
              if (typeof window.onload != 'function') {
                  window.onload = fn;
              } else {
                  window.onload = function() {
                      oldonload();
                      fn();
                  };
              }
          },
          // 視能力分別使用dom0||dom2||IE方式 來綁定事件
          // 參數： 操作的元素,事件名稱 ,事件處理程序
          addEvent : function(element, type, handler) {
              if (element.addEventListener) {
                  //事件類型、需要執行的函數、是否捕捉
                  element.addEventListener(type, handler, false);
              } else if (element.attachEvent) {
                  element.attachEvent('on' + type, function() {
                      handler.call(element);
                  });
              } else {
                  element['on' + type] = handler;
              }
          },
          // 移除事件
          removeEvent : function(element, type, handler) {
              if (element.removeEventListener) {
                  element.removeEventListener(type, handler, false);
              } else if (element.datachEvent) {
                  element.detachEvent('on' + type, handler);
              } else {
                  element['on' + type] = null;
              }
          },
          // 阻止事件 (主要是事件冒泡，因為IE不支持事件捕獲)
          stopPropagation : function(ev) {
              if (ev.stopPropagation) {
                  ev.stopPropagation();
              } else {
                  ev.cancelBubble = true;
              }
          },
          // 取消事件的默認行為
          preventDefault : function(event) {
              if (event.preventDefault) {
                  event.preventDefault();
              } else {
                  event.returnValue = false;
              }
          },
          // 獲取事件目標
          getTarget : function(event) {
              return event.target || event.srcElement;
          },
          // 獲取event對象的引用，取到事件的所有信息，確保隨時能使用event；
          getEvent : function(e) {
              var ev = e || window.event;
              if (!ev) {
                  var c = this.getEvent.caller;
                  while (c) {
                      ev = c.arguments[0];
                      if (ev && Event == ev.constructor) {
                          break;
                      }
                      c = c.caller;
                  }
              }
              return ev;
          }
      };

• ["1", "2", "3"].map(parseInt) 答案是多少？

  parseInt() 函數能解析一個字符串，並返回一個整數，需要兩個參數 (val, radix)，
  其中 radix 表示要解析的數字的基數。【該值介於 2 ~ 36 之間，並且字符串中的數字不能大於radix才能正確返回數字結果值】;
  但此處 map 傳了 3 個 (element, index, array),我們重寫parseInt函數測試一下是否符合上面的規則。
  
  function parseInt(str, radix) {
      return str+'-'+radix;
  };
  var a=["1", "2", "3"];
  a.map(parseInt);  // ["1-0", "2-1", "3-2"] 不能大於radix
  
  因為二進制里面，沒有數字3,導致出現超范圍的radix賦值和不合法的進制解析，才會返回NaN
  所以["1", "2", "3"].map(parseInt) 答案也就是：[1, NaN, NaN]

  詳細解析：http://blog.csdn.net/justjavac/article/details/19473199
  

• 事件是？IE與火狐的事件機制有什么區別？ 如何阻止冒泡？

   1. 我們在網頁中的某個操作（有的操作對應多個事件）。例如：當我們點擊一個按鈕就會產生一個事件。是可以被 JavaScript 偵測到的行為。
   2. 事件處理機制：IE是事件冒泡、Firefox同時支持兩種事件模型，也就是：捕獲型事件和冒泡型事件；
   3. ev.stopPropagation();（舊ie的方法 ev.cancelBubble = true;）

• 什么是閉包（closure），為什么要用它？

  閉包是指有權訪問另一個函數作用域中變量的函數，創建閉包的最常見的方式就是在一個函數內創建另一個函數，通過另一個函數訪問這個函數的局部變量,利用閉包可以突破作用鏈域，將函數內部的變量和方法傳遞到外部。
  
  閉包的特性：
  
  1.函數內再嵌套函數
  2.內部函數可以引用外層的參數和變量
  3.參數和變量不會被垃圾回收機制回收
  
  //li節點的onclick事件都能正確的彈出當前被點擊的li索引
   <ul id="testUL">
      <li> index = 0</li>
      <li> index = 1</li>
      <li> index = 2</li>
      <li> index = 3</li>
  </ul>
  <script type="text/javascript">
      var nodes = document.getElementsByTagName("li");
      for(i = 0;i<nodes.length;i+= 1){
          nodes[i].onclick = (function(i){
                    return function() {
                       console.log(i);
                    } //不用閉包的話，值每次都是4
                  })(i);
      }
  </script>
  
  
  
  執行say667()后,say667()閉包內部變量會存在,而閉包內部函數的內部變量不會存在
  使得Javascript的垃圾回收機制GC不會收回say667()所占用的資源
  因為say667()的內部函數的執行需要依賴say667()中的變量
  這是對閉包作用的非常直白的描述
  
    function say667() {
      // Local variable that ends up within closure
      var num = 666;
      var sayAlert = function() {
          alert(num);
      }
      num++;
      return sayAlert;
  }
  
   var sayAlert = say667();
   sayAlert()//執行結果應該彈出的667

• javascript 代碼中的"use strict";是什么意思 ? 使用它區別是什么？

  use strict是一種ECMAscript 5 添加的（嚴格）運行模式,這種模式使得 Javascript 在更嚴格的條件下運行,
  
  使JS編碼更加規范化的模式,消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為。
  默認支持的糟糕特性都會被禁用，比如不能用with，也不能在意外的情況下給全局變量賦值;
  全局變量的顯示聲明,函數必須聲明在頂層，不允許在非函數代碼塊內聲明函數,arguments.callee也不允許使用；
  消除代碼運行的一些不安全之處，保證代碼運行的安全,限制函數中的arguments修改，嚴格模式下的eval函數的行為和非嚴格模式的也不相同;
  
  提高編譯器效率，增加運行速度；
  為未來新版本的Javascript標准化做鋪墊。

• 如何判斷一個對象是否屬於某個類？

   使用instanceof （待完善）
     if(a instanceof Person){
         alert('yes');
     }

• new操作符具體干了什么呢?

  1、創建一個空對象，並且 this 變量引用該對象，同時還繼承了該函數的原型。
  2、屬性和方法被加入到 this 引用的對象中。
  3、新創建的對象由 this 所引用，並且最后隱式的返回 this 。
  
  var obj  = {};
  obj.__proto__ = Base.prototype;
  Base.call(obj);

   

• 用原生JavaScript的實現過什么功能嗎？

• Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？

  hasOwnProperty
  
  javaScript中hasOwnProperty函數方法是返回一個布爾值，指出一個對象是否具有指定名稱的屬性。此方法無法檢查該對象的原型鏈中是否具有該屬性；該屬性必須是對象本身的一個成員。
  使用方法：
  object.hasOwnProperty(proName)
  其中參數object是必選項。一個對象的實例。
  proName是必選項。一個屬性名稱的字符串值。
  
  如果 object 具有指定名稱的屬性，那么JavaScript中hasOwnProperty函數方法返回 true，反之則返回 false。

• JSON 的了解？

  JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。
  它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 占用帶寬小
  如：{"age":"12", "name":"back"}
  
  JSON字符串轉換為JSON對象:
  var obj =eval('('+ str +')');
  var obj = str.parseJSON();
  var obj = JSON.parse(str);
  
  JSON對象轉換為JSON字符串：
  var last=obj.toJSONString();
  var last=JSON.stringify(obj);

• [].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)}) 能解釋一下這段代碼的意思嗎？

• js延遲加載的方式有哪些？

  defer和async、動態創建DOM方式（用得最多）、按需異步載入js

• Ajax 是什么? 如何創建一個Ajax？

  ajax的全稱：Asynchronous Javascript And XML。
  異步傳輸+js+xml。
  所謂異步，在這里簡單地解釋就是：向服務器發送請求的時候，我們不必等待結果，而是可以同時做其他的事情，等到有了結果它自己會根據設定進行后續操作，與此同時，頁面是不會發生整頁刷新的，提高了用戶體驗。
  
  (1)創建XMLHttpRequest對象,也就是創建一個異步調用對象
  
  (2)創建一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息
  
  (3)設置響應HTTP請求狀態變化的函數
  
  (4)發送HTTP請求
  
  (5)獲取異步調用返回的數據
  
  (6)使用JavaScript和DOM實現局部刷新

• Ajax 解決瀏覽器緩存問題？

  1、在ajax發送請求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。
  
  2、在ajax發送請求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。
  
  3、在URL后面加上一個隨機數： "fresh=" + Math.random();。
  
  4、在URL后面加上時間搓："nowtime=" + new Date().getTime();。
  
  5、如果是使用jQuery，直接這樣就可以了 $.ajaxSetup({cache:false})。這樣頁面的所有ajax都會執行這條語句就是不需要保存緩存記錄。

• 同步和異步的區別?

  同步的概念應該是來自於OS中關於同步的概念:不同進程為協同完成某項工作而在先后次序上調整(通過阻塞,喚醒等方式).同步強調的是順序性.誰先誰后.異步則不存在這種順序性.
  
  同步：瀏覽器訪問服務器請求，用戶看得到頁面刷新，重新發請求,等請求完，頁面刷新，新內容出現，用戶看到新內容,進行下一步操作。
  
  異步：瀏覽器訪問服務器請求，用戶正常操作，瀏覽器后端進行請求。等請求完，頁面不刷新，新內容也會出現，用戶看到新內容。
  
  （待完善）

• 如何解決跨域問題?

  jsonp、 iframe、window.name、window.postMessage、服務器上設置代理頁面

• 頁面編碼和被請求的資源編碼如果不一致如何處理？

• 模塊化開發怎么做？

  立即執行函數,不暴露私有成員
  
      var module1 = (function(){
      　　　　var _count = 0;
      　　　　var m1 = function(){
      　　　　　　//...
      　　　　};
      　　　　var m2 = function(){
      　　　　　　//...
      　　　　};
      　　　　return {
      　　　　　　m1 : m1,
      　　　　　　m2 : m2
      　　　　};
      　　})();
  （待完善）

• AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規范區別？

  AMD 規范在這里：https://github.com/amdjs/amdjs-api/wiki/AMD

  CMD 規范在這里：https://github.com/seajs/seajs/issues/242

   

  Asynchronous Module Definition，異步模塊定義，所有的模塊將被異步加載，模塊加載不影響后面語句運行。所有依賴某些模塊的語句均放置在回調函數中。
  
   區別：
  
      1. 對於依賴的模塊，AMD 是提前執行，CMD 是延遲執行。不過 RequireJS 從 2.0 開始，也改成可以延遲執行（根據寫法不同，處理方式不同）。CMD 推崇 as lazy as possible.
      2. CMD 推崇依賴就近，AMD 推崇依賴前置。看代碼：
  
  // CMD
  define(function(require, exports, module) {
      var a = require('./a')
      a.doSomething()
      // 此處略去 100 行
      var b = require('./b') // 依賴可以就近書寫
      b.doSomething()
      // ...
  })
  
  // AMD 默認推薦
  define(['./a', './b'], function(a, b) { // 依賴必須一開始就寫好
      a.doSomething()
      // 此處略去 100 行
      b.doSomething()
      // ...
  })

• requireJS的核心原理是什么？（如何動態加載的？如何避免多次加載的？如何 緩存的？）

  參考：http://annn.me/how-to-realize-cmd-loader/
  

• JS模塊加載器的輪子怎么造，也就是如何實現一個模塊加載器？

• 談一談你對ECMAScript6的了解？

• ECMAScript6 怎么寫class么，為什么會出現class這種東西?

• 異步加載JS的方式有哪些？

  (1) defer，只支持IE
  
  (2) async：
  
  (3) 創建script，插入到DOM中，加載完畢后callBack

• documen.write和 innerHTML的區別

  document.write只能重繪整個頁面
  
  innerHTML可以重繪頁面的一部分

• DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?

  （1）創建新節點
    createDocumentFragment()    //創建一個DOM片段
    createElement()   //創建一個具體的元素
    createTextNode()   //創建一個文本節點
  （2）添加、移除、替換、插入
    appendChild()
    removeChild()
    replaceChild()
    insertBefore() //在已有的子節點前插入一個新的子節點
  （3）查找
    getElementsByTagName()    //通過標簽名稱
    getElementsByName()    //通過元素的Name屬性的值(IE容錯能力較強，會得到一個數組，其中包括id等於name值的)
    getElementById()    //通過元素Id，唯一性

• .call() 和 .apply() 的區別？

   例子中用 add 來替換 sub，add.call(sub,3,1) == add(3,1) ，所以運行結果為：alert(4);
  
    注意：js 中的函數其實是對象，函數名是對 Function 對象的引用。
  
      function add(a,b)
      {
          alert(a+b);
      }
  
      function sub(a,b)
      {
          alert(a-b);
      }
  
      add.call(sub,3,1);

• 數組和對象有哪些原生方法，列舉一下？

• JS 怎么實現一個類。怎么實例化這個類

• JavaScript中的作用域與變量聲明提升？

• 如何編寫高性能的Javascript？

• 那些操作會造成內存泄漏？

• JQuery的源碼看過嗎？能不能簡單概況一下它的實現原理？

• jQuery.fn的init方法返回的this指的是什么對象？為什么要返回this？

• jquery中如何將數組轉化為json字符串，然后再轉化回來？

• jQuery 的屬性拷貝(extend)的實現原理是什么，如何實現深拷貝？

• jquery.extend 與 jquery.fn.extend的區別？

  * jquery.extend 為jquery類添加類方法，可以理解為添加靜態方法
  * jquery.fn.extend: 
      源碼中jquery.fn = jquery.prototype，所以對jquery.fn的擴展，就是為jquery類添加成員函數
  使用：
  jquery.extend擴展，需要通過jquery類來調用，而jquery.fn.extend擴展，所有jquery實例都可以直接調用。

• jQuery 的隊列是如何實現的？隊列可以用在哪些地方？

• 談一下Jquery中的bind(),live(),delegate(),on()的區別？

• JQuery一個對象可以同時綁定多個事件，這是如何實現的？

• 是否知道自定義事件。jQuery里的fire函數是什么意思，什么時候用？

• jQuery 是通過哪個方法和 Sizzle 選擇器結合的？（jQuery.fn.find()進入Sizzle）

• 針對 jQuery性能的優化方法？

• Jquery與jQuery UI 有啥區別？

  *jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件綁定等等。
  
  *jQuery UI則是在jQuery的基礎上，利用jQuery的擴展性，設計的插件。
   提供了一些常用的界面元素，諸如對話框、拖動行為、改變大小行為等等

• JQuery的源碼看過嗎？能不能簡單說一下它的實現原理？

• jquery 中如何將數組轉化為json字符串，然后再轉化回來？

• jQuery中沒有提供這個功能，所以你需要先編寫兩個jQuery的擴展：
  
      $.fn.stringifyArray = function(array) {
          return JSON.stringify(array)
      }
  
      $.fn.parseArray = function(array) {
          return JSON.parse(array)
      }
  
      然后調用：
      $("").stringifyArray(array)

• jQuery和Zepto的區別？各自的使用場景？

• 針對 jQuery 的優化方法？

  *基於Class的選擇性的性能相對於Id選擇器開銷很大，因為需遍歷所有DOM元素。
  
  *頻繁操作的DOM，先緩存起來再操作。用Jquery的鏈式調用更好。
   比如：var str=$("a").attr("href");
  
  *for (var i = size; i < arr.length; i++) {}
   for 循環每一次循環都查找了數組 (arr) 的.length 屬性，在開始循環的時候設置一個變量來存儲這個數字，可以讓循環跑得更快：
   for (var i = size, length = arr.length; i < length; i++) {}

• Zepto的點透問題如何解決？

• jQueryUI如何自定義組件?

• 需求：實現一個頁面操作不會整頁刷新的網站，並且能在瀏覽器前進、后退時正確響應。給出你的技術實現方案？

• 如何判斷當前腳本運行在瀏覽器還是node環境中？（阿里）

  this === window ? 'browser' : 'node';
  
  通過判斷Global對象是否為window，如果不為window，當前腳本沒有運行在瀏覽器中

• 移動端最小觸控區域是多大？

• jQuery 的 slideUp動畫 ，如果目標元素是被外部事件驅動, 當鼠標快速地連續觸發外部元素事件, 動畫會滯后的反復執行，該如何處理呢?

  jquery stop(): 如：$("#div").stop().animate({width:"100px"},100);

• 把 Script 標簽 放在頁面的最底部的body封閉之前 和封閉之后有什么區別？瀏覽器會如何解析它們？

• 移動端的點擊事件的有延遲，時間是多久，為什么會有？ 怎么解決這個延時？（click 有 300ms 延遲,為了實現safari的雙擊事件的設計，瀏覽器要知道你是不是要雙擊操作。）

• 知道各種JS框架(Angular, Backbone, Ember, React, Meteor, Knockout...)么? 能講出他們各自的優點和缺點么?

• Underscore 對哪些 JS 原生對象進行了擴展以及提供了哪些好用的函數方法？

• 解釋JavaScript中的作用域與變量聲明提升？

• 那些操作會造成內存泄漏？

  內存泄漏指任何對象在您不再擁有或需要它之后仍然存在。
  垃圾回收器定期掃描對象，並計算引用了每個對象的其他對象的數量。如果一個對象的引用數量為 0（沒有其他對象引用過該對象），或對該對象的惟一引用是循環的，那么該對象的內存即可回收。
  
  setTimeout 的第一個參數使用字符串而非函數的話，會引發內存泄漏。
  閉包、控制台日志、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

• JQuery一個對象可以同時綁定多個事件，這是如何實現的？

  * 多個事件同一個函數：
      $("div").on("click mouseover", function(){});
  * 多個事件不同函數
      $("div").on({
          click: function(){},
          mouseover: function(){}
      });

• Node.js的適用場景？

• (如果會用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?

• 解釋一下 Backbone 的 MVC 實現方式？

• 什么是“前端路由”?什么時候適合使用“前端路由”? “前端路由”有哪些優點和缺點?

• 知道什么是webkit么? 知道怎么用瀏覽器的各種工具來調試和debug代碼么?

  Chrome,Safari瀏覽器內核。

• 如何測試前端代碼么? 知道BDD, TDD, Unit Test么? 知道怎么測試你的前端工程么(mocha, sinon, jasmin, qUnit..)?

• 前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?

• 簡述一下 Handlebars 的基本用法？

• 簡述一下 Handlerbars 的對模板的基本處理流程， 如何編譯的？如何緩存的？

• 用js實現千位分隔符?(來源：前端農民工，提示：正則+replace)

  參考：http://www.tuicool.com/articles/ArQZfui

  function commafy(num) {
      return num && num
          .toString()
          .replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {
              return $1 + ",";
          });
  }
  console.log(commafy(1234567.90)); //1,234,567.90

• 檢測瀏覽器版本版本有哪些方式？

  功能檢測、userAgent特征檢測
  
  比如：navigator.userAgent
  //"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36
    (KHTML, like Gecko) Chrome/41.0.2272.101 Safari/537.36"

• What is a Polyfill?

  polyfill 是“在舊版瀏覽器上復制標准 API 的 JavaScript 補充”,可以動態地加載 JavaScript 代碼或庫，在不支持這些標准 API 的瀏覽器中模擬它們。
  例如，geolocation（地理位置）polyfill 可以在 navigator 對象上添加全局的 geolocation 對象，還能添加 getCurrentPosition 函數以及“坐標”回調對象，
  所有這些都是 W3C 地理位置 API 定義的對象和函數。因為 polyfill 模擬標准 API，所以能夠以一種面向所有瀏覽器未來的方式針對這些 API 進行開發，
  一旦對這些 API 的支持變成絕對大多數，則可以方便地去掉 polyfill，無需做任何額外工作。

• 做的項目中，有沒有用過或自己實現一些 polyfill 方案（兼容性處理方案）？

  比如： html5shiv、Geolocation、Placeholder 

• 我們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡。會執行幾次事件，會先執行冒泡還是捕獲？

• 使用JS實現獲取文件擴展名？

  function getFileExtension(filename) {
    return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2);
  }   
  
  String.lastIndexOf() 方法返回指定值（本例中的'.'）在調用該方法的字符串中最后出現的位置，如果沒找到則返回 -1。
  對於'filename'和'.hiddenfile'，lastIndexOf的返回值分別為0和-1無符號右移操作符(»>) 將-1轉換為4294967295，將-2轉換為4294967294，這個方法可以保證邊緣情況時文件名不變。
  String.prototype.slice() 從上面計算的索引處提取文件的擴展名。如果索引比文件名的長度大，結果為""。

   

目錄：

1、web前端面試試題總結---html篇

2、web前端面試試題總結---css篇

3、web前端面試試題總結---javascript篇

4、web前端面試試題總結---其他