JS的100道經典面試題(一)只看這四篇就夠了,收藏起來之後偷偷看

年輕人你不講武德,耗子尾汁~~~
在這裏插入圖片描述
javascript

總結就是爲了造成本身的js知識網,提高本身,加油!html

開始幹

一、介紹js的基本數據類型  
答: Undefined、Null、Boolean、Number、String
前端

二、js有哪些內置對象? 
答:數據封裝類對象:Object、Array、Boolean、Number 和 String
  其餘對象:Function、Arguments、Math、Date、RegExp、Error
  
三、this對象的理解 
答:this老是指向函數的直接調用者(而非間接調用者);
  若是有new關鍵字,this指向new出來的那個對象;
  在事件中,this指向觸發這個事件的對象,特殊的是,IE中的attachEvent中的this老是指向全局對象Window。
  能夠看看我前面的文章 this在不一樣狀況下的指向
  
四、eval是作什麼的? 
答:它的功能是把對應的字符串解析成JS代碼並運行;
  應該避免使用eval,不安全,很是耗性能(2次,一次解析成js語句,一次執行)。
  由JSON字符串轉換爲JSON對象的時候能夠用eval,var obj =eval(’(’+ str +’)’)。












html5

五、DOM怎樣添加、移除、移動、複製、建立和查找節點
答:// 建立新節點
  createDocumentFragment() //建立一個DOM片斷
  createElement() //建立一個具體的元素
  createTextNode() //建立一個文本節點
  // 添加、移除、替換、插入
  appendChild()
  removeChild()
  replaceChild()
  insertBefore() //在已有的子節點前插入一個新的子節點
  // 查找
  getElementsByTagName() //經過標籤名稱
  getElementsByName() //經過元素的Name屬性的值(IE容錯能力較強,會獲得一個數組,其中包括id等於name值的)
  getElementById() //經過元素Id,惟一性












java

六、null和undefined的區別?
答:null是一個表示"無"的對象,轉爲數值時爲0;undefined是一個表示"無"的原始值,轉爲數值時爲NaN。
  undefined
  (1)變量被聲明瞭,但沒有賦值時,就等於undefined。
  (2) 調用函數時,應該提供的參數沒有提供,該參數等於undefined。
  (3)對象沒有賦值的屬性,該屬性的值爲undefined。
  (4)函數沒有返回值時,默認返回undefined。
  null
  (1) 做爲函數的參數,表示該函數的參數不是對象。
  (2) 做爲對象原型鏈的終點。
  
七、new操做符具體幹了什麼呢?
答:
  (1)建立一個空對象,而且 this 變量引用該對象,同時還繼承了該函數的原型。
  (2)屬性和方法被加入到 this 引用的對象中。
  (3)新建立的對象由 this 所引用,而且最後隱式的返回 this 。














web

八、JSON 的瞭解?
答:
  JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小。
  格式:採用鍵值對,例如:{「age」:「12」, 「name」:「back」}


chrome

九、call() 和 apply() 的區別和做用?
答:
  apply()函數有兩個參數:第一個參數是上下文,第二個參數是參數組成的數組。若是上下文是null,則使用全局對象代替。
  如:function.apply(this,[1,2,3]);
  call()的第一個參數是上下文,後續是實例傳入的參數序列。
  如:function.call(this,1,2,3);




編程

十、如何獲取UA?
答:
  function whatBrowser() {
  document.Browser.Name.value=navigator.appName;
  document.Browser.Version.value=navigator.appVersion;
  document.Browser.Code.value=navigator.appCodeName;
  document.Browser.Agent.value=navigator.userAgent;
  }
  
十一、哪些常見操做會形成內存泄漏?
答:
  內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。
  垃圾回收器按期掃描對象,並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0(沒有其餘對象引用過該對象),或對該對象的唯一引用是循環的,那麼該對象的內存便可回收。
  setTimeout 的第一個參數使用字符串而非函數的話,會引起內存泄漏。
  閉包、控制檯日誌、循環(在兩個對象彼此引用且彼此保留時,就會產生一個循環)。
  
十二、線程與進程的區別
答:
  一個程序至少有一個進程,一個進程至少有一個線程。
  線程的劃分尺度小於進程,使得多線程程序的併發性高。
  另外,進程在執行過程當中擁有獨立的內存單元,而多個線程共享內存,從而極大地提升了程序的運行效率。
  線程在執行過程當中與進程仍是有區別的。每一個獨立的線程有一個程序運行的入口、順序執行序列和程序的出口。可是線程不可以獨立執行,必須依存在應用程序中,由應用程序提供多個線程執行控制。
  從邏輯角度來看,多線程的意義在於一個應用程序中,有多個執行部分能夠同時執行。但操做系統並無將多個線程看作多個獨立的應用,來實現進程的調度和管理以及資源分配。這就是進程和線程的重要區別。





















json

1三、如何解決跨域問題
JSONP:
原理是:動態插入script標籤,經過script標籤引入一個js文件,這個js文件載入成功後會執行咱們在url參數中指定的函數,而且會把咱們須要的json數據做爲參數傳入。
因爲同源策略的限制,XmlHttpRequest只容許請求當前源(域名、協議、端口)的資源,爲了實現跨域請求,能夠經過script標籤實現跨域請求,而後在服務端輸出JSON數據並執行回調函數,從而解決了跨域的數據請求。
優勢是兼容性好,簡單易用,支持瀏覽器與服務器雙向通訊。缺點是隻支持GET請求。
JSONP:json+padding(內填充),顧名思義,就是把JSON填充到一個盒子裏




設計模式

<script>
    function createJs(sUrl){ 
        var oScript = document.createElement('script');
        oScript.type = 'text/javascript';
        oScript.src = sUrl;
        document.getElementsByTagName('head')[0].appendChild(oScript);
    }
    createJs('jsonp.js');

    box({ 
       'name': 'test'
    });

    function box(json){ 
        alert(json.name);
    }
</script>

1四、javascript垃圾回收方法

  • 標記清除(mark and sweep)
    這是JavaScript最多見的垃圾回收方式,當變量進入執行環境的時候,好比函數中聲明一個變量,垃圾回收器將其標記爲「進入環境」,當變量離開環境的時候(函數執行結束)將其標記爲「離開環境」。
    垃圾回收器會在運行的時候給存儲在內存中的全部變量加上標記,而後去掉環境中的變量以及被環境中變量所引用的變量(閉包),在這些完成以後仍存在標記的就是要刪除的變量了

  • 引用計數(reference counting)
    在低版本IE中常常會出現內存泄露,不少時候就是由於其採用引用計數方式進行垃圾回收。引用計數的策略是跟蹤記錄每一個值被使用的次數,當聲明瞭一個變量並將一個引用類型賦值給該變量的時候這個值的引用次數就加1,若是該變量的值變成了另一個,則這個值得引用次數減1,當這個值的引用次數變爲0的時候,說明沒有變量在使用,這個值無法被訪問了,所以能夠將其佔用的空間回收,這樣垃圾回收器會在運行的時候清理掉引用次數爲0的值佔用的空間。
    在IE中雖然JavaScript對象經過標記清除的方式進行垃圾回收,但BOM與DOM對象倒是經過引用計數回收垃圾的,也就是說只要涉及BOM及DOM就會出現循環引用問題。

1五、快速 排序的思想並實現一個快排?
「快速排序」的思想很簡單,整個排序過程只須要三步:
  (1)在數據集之中,找一個基準點
  (2)創建兩個數組,分別存儲左邊和右邊的數組
  (3)利用遞歸進行下次比較



<script type="text/javascript">
        function quickSort(arr){ 
            if(arr.length<=1){ 
                return arr;//若是數組只有一個數,就直接返回;
            }
            var num = Math.floor(arr.length/2);//找到中間數的索引值,若是是浮點數,則向下取整
            var numValue = arr.splice(num,1);//找到中間數的值
            var left = [];
            var right = [];
            for(var i=0;i<arr.length;i++){ 
                if(arr[i]<numValue){ 
                    left.push(arr[i]);//基準點的左邊的數傳到左邊數組
                }
                else{ 
                   right.push(arr[i]);//基準點的右邊的數傳到右邊數組
                }
            }

            return quickSort(left).concat([numValue],quickSort(right));//遞歸不斷重複比較
        }

        alert(quickSort([32,45,37,16,2,87]));//彈出「2,16,32,37,45,87」
    </script>

1六、ES6的瞭解
新增模板字符串(爲JavaScript提供了簡單的字符串插值功能)、箭頭函數(操做符左邊爲輸入的參數,而右邊則是進行的操做以及返回的值Inputs=>outputs。)、for-of(用來遍歷數據—例如數組中的值。)arguments對象可被不定參數和默認參數完美代替。ES6將promise對象歸入規範,提供了原生的Promise對象。增長了let和const命令,用來聲明變量。增長了塊級做用域。let命令實際上就增長了塊級做用域。ES6規定,var命令和function命令聲明的全局變量,屬於全局對象的屬性;let命令、const命令、class命令聲明的全局變量,不屬於全局對象的屬性。。還有就是引入module模塊的概念。

1七、用過哪些設計模式?
(1)工廠模式:
主要好處就是能夠消除對象間的耦合,經過使用工程方法而不是new關鍵字。將全部實例化的代碼集中在一個位置防止代碼重複。
(2)工廠模式解決了重複實例化的問題 ,但還有一個問題,那就是識別問題,由於根本沒法 搞清楚他們究竟是哪一個對象的實例。


function createObject(name,age,profession){ //集中實例化的函數var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.profession = profession;
    obj.move = function () { 
        return this.name + ' at ' + this.age + ' engaged in ' + this.profession;
    };
    return obj;
}
var test1 = createObject('trigkit4',22,'programmer');//第一個實例var test2 = createObject('mike',25,'engineer');//第二個實例

(3)構造函數模式
使用構造函數的方法 ,即解決了重複實例化的問題 ,又解決了對象識別的問題,該模式與工廠模式的不一樣之處在於:
構造函數方法沒有顯示的建立對象 (new Object());
直接將屬性和方法賦值給 this 對象;
沒有 renturn 語句。
(4)原型鏈模式
(5)構造和原型鏈的組合模式





1八、說說你對閉包的理解
使用閉包主要是爲了設計私有的方法和變量。閉包的優勢是能夠避免全局變量的污染缺點是閉包會常駐內存,會增大內存使用量,使用不當很容易形成內存泄露。在js中,函數即閉包,只有函數纔會產生做用域的概念
閉包有三個特性
(1)函數嵌套函數
(2)函數內部能夠引用外部的參數和變量
(3)參數和變量不會被垃圾回收機制回收




1九、請你談談Cookie的弊端
cookie雖然在持久保存客戶端數據提供了方便,分擔了服務器存儲的負擔,但仍是有不少侷限性的。
第一:每一個特定的域名下最多生成20個cookie
(1)IE6或更低版本最多20個cookie
(2)IE7和以後的版本最後能夠有50個cookie。
(3)Firefox最多50個cookie
(4)chrome和Safari沒有作硬性限制
IE和Opera 會清理近期最少使用的cookie,Firefox會隨機清理cookie。
cookie的最大大約爲4096字節,爲了兼容性,通常不能超過4095字節。
IE 提供了一種存儲能夠持久化用戶數據,叫作userdata,從IE5.0就開始支持。每一個數據最多128K,每一個域名下最多1M。這個持久化數據放在緩存中,若是緩存沒有清理,那麼會一直存在。
優勢:極高的擴展性和可用性
經過良好的編程,控制保存在cookie中的session對象的大小。
經過加密和安全傳輸技術(SSL),減小cookie被破解的可能性。
只在cookie中存放不敏感數據,即便被盜也不會有重大損失。
控制cookie的生命期,使之不會永遠有效。偷盜者極可能拿到一個過時的cookie。
缺點:
Cookie數量和長度的限制。每一個domain最多隻能有20條cookie,每一個cookie長度不能超過4KB,不然會被截掉.
安全性問題。若是cookie被人攔截了,那人就能夠取得全部的session信息。即便加密也與事無補,由於攔截者並不須要知道cookie的意義,他只要原樣轉發cookie就能夠達到目的了。
有些狀態不可能保存在客戶端。例如,爲了防止重複提交表單,咱們須要在服務器端保存一個計數器。若是咱們把這個計數器保存在客戶端,那麼它起不到任何做用。

















20、瀏覽器本地存儲
在較高版本的瀏覽器中,js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage來取代globalStorage。
html5中的Web Storage包括了兩種存儲方式:sessionStoragelocalStorage

sessionStorage用於本地存儲一個會話(session)中的數據,這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲,僅僅是會話級別的存儲。

localStorage用於持久化的本地存儲,除非主動刪除數據,不然數據是永遠不會過時的。

web storage和cookie的區別
Web Storage的概念和cookie類似,區別是它是爲了更大容量存儲設計的。Cookie的大小是受限的,而且每次你請求一個新的頁面的時候Cookie都會被髮送過去,這樣無形中浪費了帶寬,另外cookie還須要指定做用域,不能夠跨域調用。

除此以外,Web Storage擁有setItem,getItem,removeItem,clear等方法,不像cookie須要前端開發者本身封裝setCookie,getCookie。
可是cookie也是不能夠或缺的:cookie的做用是與服務器進行交互,做爲HTTP規範的一部分而存在 ,而Web Storage僅僅是爲了在本地「存儲」數據而生
瀏覽器的支持除了IE7及如下不支持外,其餘標準瀏覽器都徹底支持(ie及FF需在web服務器裏運行),值得一提的是IE老是辦好事,例如IE七、IE6中的userData其實就是javascript本地存儲的解決方案。經過簡單的代碼封裝能夠統一到全部的瀏覽器都支持web storage。
localStorage和sessionStorage都具備相同的操做方法,例如setItem、getItem和removeItem等


2一、cookie 和session 的區別:
(1)cookie數據存放在客戶的瀏覽器上,session數據放在服務器上。
(2)cookie不是很安全,別人能夠分析存放在本地的COOKIE並進行COOKIE欺騙考慮到安全應當使用session。
(3)session會在必定時間內保存在服務器上。當訪問增多,會比較佔用你服務器的性能
考慮到減輕服務器性能方面,應當使用COOKIE。
(4)單個cookie保存的數據不能超過4K,不少瀏覽器都限制一個站點最多保存20個cookie。
(5)因此我的建議:
將登錄信息等重要信息存放爲SESSION
其餘信息若是須要保留,能夠放在COOKIE中







2二、如何實現瀏覽器內多個標籤頁之間的通訊?
調用localstorge、cookies等本地存儲方式

2三、js延遲加載的方式有哪些?
defer和async、動態建立DOM方式(建立script,插入到DOM中,加載完畢後callBack)、按需異步載入js。

2四、列舉IE 與其餘瀏覽器不同的特性?
(1)IE支持currentStyle,FIrefox使用getComputStyle
(2)IE 使用innerText,Firefox使用textContent
(3)濾鏡方面:IE:filter:alpha(opacity= num);Firefox:-moz-opacity:num
(4)事件方面:IE:attachEvent:火狐是addEventListener
(5)鼠標位置:IE是event.clientX;火狐是event.pageX
(6)IE使用event.srcElement;Firefox使用event.target
(7)IE中消除list的原點僅需margin:0便可達到最終效果;FIrefox須要設置margin:0;padding:0以及list-style:none
(8)CSS圓角:ie7如下不支持圓角







2五、javascript對象的幾種建立方式
(1)工廠模式
(2)構造函數模式
(3)原型模式
(4)混合構造函數和原型模式
(5)動態原型模式
(6)寄生構造函數模式
(7)穩妥構造函數模式






後續還在陸續更新~~~

相關文章
相關標籤/搜索