js常見面試題

1. javascript的typeof返回哪些數據類型.

答案：string,boolean,number,undefined,function,object

2. 例舉3種強制類型轉換和2種隱式類型轉換?

答案：強制（parseInt,parseFloat,number）
隱式（== ===）

3. split() join() 的區別

答案：前者是將字元串切割成數組的形式，後者是將數組轉換成字元串

4. 數組方法pop() push() unshift() shift()

答案：push()尾部添加 pop()尾部刪除
unshift()頭部添加 shift()頭部刪除

5. IE和標準下有哪些相容性的寫法

答案：

var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target

6. ajax請求的時候get 和post方式的區別

答案：
一個在url後面 ，一個放在虛擬載體裡面
get有大小限制(只能提交少量參數)
安全問題
應用不同 ，請求數據和提交數據

7. call和apply的區別

答案：
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

8. ajax請求時，如何解析json數據

答案：使用JSON.parse

9. 事件委托是什麼

答案: 利用事件冒泡的原理，讓自己的所觸發的事件，讓他的父元素代替執行！

10. 閉包是什麼，有什麼特性，對頁面有什麼影響

答案：閉包就是能夠讀取其他函數內部變數的函數,使得函數不被GC回收，如果過多使用閉包，容易導致記憶體泄露

11. 如何阻止事件冒泡

答案：ie:阻止冒泡ev.cancelBubble = true;非IE ev.stopPropagation();

12. 如何阻止預設事件

答案：(1)return false；(2) ev.preventDefault();

13. 添加 刪除 替換 插入到某個接點的方法

答案：

1）創建新節點
createElement() //創建一個具體的元素
createTextNode() //創建一個文本節點

2）添加、移除、替換、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替換
insertBefore() //插入

3）查找
getElementsByTagName() //通過標簽名稱
getElementsByName() //通過元素的Name屬性的值
getElementById() //通過元素Id，唯一性

14. 解釋jsonp的原理，以及為什麼不是真正的ajax

答案：動態創建script標簽，回調函數
Ajax是頁面無刷新請求數據操作

15. document load 和document ready的區別

答案：document.onload 是在結構和樣式,外部js以及圖片載入完才執行js
document.ready是dom樹創建完成就執行的方法，原生種沒有這個方法，jquery中有 $().ready(function)

16. ”==”和“===”的不同

答案：前者會自動轉換類型,再判斷是否相等
後者不會自動類型轉換，直接去比較

17. 函數聲明與函數表達式的區別？

在Javscript中，解析器在向執行環境中載入數據時，對函數聲明和函數表達式並非是一視同仁的，解析器會率先讀取函數聲明，並使其在執行任何代碼之前可用（可以訪問），至於函數表達式，則必須等到解析器執行到它所在的代碼行，才會真正被解析執行。

18. 對作用域上下文和this的理解，看下列代碼：

var User = {
 count: 1,
 getCount: function() {
  return this.count;
 }
};
console.log(User.getCount()); // what?
var func = User.getCount;
console.log(func()); // what?
問兩處console輸出什麼？為什麼？
答案:是1和undefined。
　　func是在window的上下文中被執行的，所以不會訪問到count屬性。

19. 看下麵代碼，給出輸出結果。

for(var i = 1; i <= 3; i++){  //建議使用let 可正常輸出i的值
  setTimeout(function(){
      console.log(i);   
  },0); 
};
答案：4 4 4。
原因：Javascript事件處理器線上程空閑之前不會運行。

20. 當一個DOM節點被點擊時候，我們希望能夠執行一個函數，應該怎麼做?

box.onlick= function(){}
box.addEventListener("click",function(){},false);
<button onclick="xxx()"></button>

21. Javascript的事件流模型都有什麼?

“事件冒泡”：事件開始由最具體的元素接受，然後逐級向上傳播

“事件捕捉”：事件由最不具體的節點先接收，然後逐級向下，一直到最具體的

“DOM事件流”：三個階段：事件捕捉，目標階段，事件冒泡

22. 看下列代碼,輸出什麼?解釋原因。

var a = null;
alert(typeof a);
答案：object
解釋：null是一個只有一個值的數據類型，這個值就是null。表示一個空指針對象，所以用typeof檢測會返回”object”。

23. 判斷字元串以字母開頭，後面可以是數字，下劃線，字母，長度為6-30

var reg=/^[a-zA-Z]\w{5,29}$/;

24. 回答以下代碼，alert的值分別是多少？

<script>
     var a = 100;  
     function test(){  
        alert(a);  
     a = 10;  //去掉了var 就變成定義了全局變數了
        alert(a);  
}  
test();
alert(a);
</script>
正確答案是： 100， 10， 10

25. javaScript的2種變數範圍有什麼不同？

全局變數：當前頁面內有效

局部變數：函數方法內有效

26. null和undefined的區別？

null是一個表示"無"的對象，轉為數值時為0；undefined是一個表示"無"的原始值，轉為數值時為NaN。

當聲明的變數還未被初始化時，變數的預設值為undefined。 null用來表示尚未存在的對象

undefined表示"缺少值"，就是此處應該有一個值，但是還沒有定義。典型用法是：

（1）變數被聲明瞭，但沒有賦值時，就等於undefined。

（2）調用函數時，應該提供的參數沒有提供，該參數等於undefined。

（3）對象沒有賦值的屬性，該屬性的值為undefined。

（4）函數沒有返回值時，預設返回undefined。

null表示"沒有對象"，即該處不應該有值。典型用法是：

（1） 作為函數的參數，表示該函數的參數不是對象。

（2） 作為對象原型鏈的終點。

27. new操作符具體幹了什麼呢?

1、創建一個空對象，並且 this 變數引用該對象，同時還繼承了該函數的原型。

2、屬性和方法被加入到 this 引用的對象中。

3、新創建的對象由 this 所引用，並且最後隱式的返回 this 。

28. js延遲載入的方式有哪些？

defer和async、動態創建DOM方式（創建script，插入到DOM中，載入完畢後callBack）、按需非同步載入js

29. Flash、Ajax各自的優缺點，在使用中如何取捨？

Flash ajax對比

(1)Flash適合處理多媒體、矢量圖形、訪問機器；對CSS、處理文本上不足，不容易被搜索。

(2)ajax對CSS、文本支持很好，支持搜索；多媒體、矢量圖形、機器訪問不足。

共同點：與伺服器的無刷新傳遞消息、用戶離線和線上狀態、操作DOM

30. 寫一個獲取非行間樣式的函數

function getStyle(obj,attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr];
}else{
getComputedStyle(obi,false)[attr] 
}

}

31. 希望獲取到頁面中所有的checkbox怎麼做？(不使用第三方框架)

var inputs = document.getElementsByTagName("input");//獲取所有的input標簽對象
var checkboxArray = [];//初始化空數組，用來存放checkbox對象。
for(var i=0;i<inputs.length;i++){
  var obj = inputs[i];
  if(obj.type=='checkbox'){
     checkboxArray.push(obj);
  }
}

32. 寫一個function，清除字元串前後的空格。（相容所有瀏覽器）

String.prototype.trim= function(){

return this.replace(/^\s+/,"").replace(/\s+$/,"");

}

33. javascript語言特性中，有很多方面和我們接觸的其他編程語言不太一樣,請舉例

javascript語言實現繼承機制的核心就是 1 (原型)，而不是Java語言那樣的類式繼承。Javascript解析引擎在讀取一個Object的屬性的值時，會沿著 2 (原型鏈)向上尋找，如果最終沒有找到，則該屬性值為 3 undefined；如果最終找到該屬性的值，則返回結果。與這個過程不同的是，當javascript解析引擎執行“給一個Object的某個屬性賦值”的時候，如果當前Object存在該屬性，則改寫該屬性的值，如果當前的Object本身並不存在該屬性，則賦值該屬性的值。

34. Cookie在客戶機上是如何存儲的

Cookies就是伺服器暫存放在你的電腦里的文本文件，好讓伺服器用來辨認你的電腦。當你在瀏覽網站的時候，Web伺服器會先送一小小資料放在你的電腦上，Cookies 會幫你在網站上所打的文字或是一些選擇都記錄下來。當下次你再訪問同一個網站，Web伺服器會先看看有沒有它上次留下的Cookies資料，有的話，就會依據Cookie里的內容來判斷使用者，送出特定的網頁內容給你。

35. 如何獲取javascript三個數中的最大值和最小值？

Math.max(a,b,c);//最大值

Math.min(a,b,c)//最小值

36. javascript是面向對象的，怎麼體現javascript的繼承關係？

使用prototype原型來實現。

37. .form中的input可以設置為readonly和disable，請問2者有什麼區別？

readonly不可編輯，但可以選擇和複製；值可以傳遞到後臺
disabled不能編輯，不能複製，不能選擇；值不可以傳遞到後臺

38. 列舉javaScript的3種主要數據類型，2種複合數據類型和2種特殊數據類型。

主要數據類型：string, boolean, number

複合數據類型：function, object

特殊類型：undefined，null

39. 程式中捕獲異常的方法？

try{
 
}catch(e){
 
}finally{
 
}

40. Ajax原理

(1)創建對象

var xhr = new XMLHttpRequest();

(2)打開請求

xhr.open('GET', 'example.txt', true);

(3)發送請求

xhr.send(); 發送請求到伺服器

(4)接收響應

xhr.onreadystatechange =function(){}

(1)當readystate值從一個值變為另一個值時，都會觸發readystatechange事件。

(2)當readystate==4時，表示已經接收到全部響應數據。

(3)當status ==200時，表示伺服器成功返回頁面和數據。

(4)如果(2)和(3)內容同時滿足，則可以通過xhr.responseText，獲得伺服器返回的內容。

41. 解釋什麼是Json:

(1)JSON 是一種輕量級的數據交換格式。

(2)JSON 獨立於語言和平臺，JSON 解析器和 JSON 庫支持許多不同的編程語言。

(3)JSON的語法表示三種類型值，簡單值(字元串，數值，布爾值，null),數組，對象

42. js中的3種彈出式消息提醒（警告視窗，確認視窗，信息輸入視窗）的命令式什麼？

alert
confirm
prompt

43. 以下代碼執行結果

var uname = 'jack'
function change() {
    alert(uname) // ?
    var uname = 'lily'
    alert(uname)  //?
}
change()
分別alert出 undefined，lily，（變數聲明提前問題）

44. 瀏覽器的滾動距離：

可視區域距離頁面頂部的距離

scrollTop=document.documentElement.scrollTop||document.body.scrollTop

45. 可視區的大小：

(1)innerXXX（不相容ie）

window.innerHeight 可視區高度，包含滾動條寬度

window.innerWidth 可視區寬度，包含滾動條寬度

(2)document.documentElement.clientXXX(相容ie)

document.documentElement.clientWidth可視區寬度，不包含滾動條寬度

document.documentElement.clientHeight可視區高度，不包含滾動條寬度

46. 節點的種類有幾種，分別是什麼？

(1)元素節點：nodeType ===1;

(2)文本節點：nodeType ===3;

(3)屬性節點：nodeType ===2;

47. innerHTML和outerHTML的區別

innerHTML(元素內包含的內容）

outerHTML(自己以及元素內的內容）

48. offsetWidth offsetHeight和clientWidth clientHeight的區別

(1)offsetWidth （content寬度+padding寬度+border寬度）

(2)offsetHeight（content高度+padding高度+border高度）

(3)clientWidth（content寬度+padding寬度）

(4)clientHeight（content高度+padding高度）

49. 閉包的好處

(1)希望一個變數長期駐扎在記憶體當中(不被垃圾回收機制回收)

(2)避免全局變數的污染

(3)私有成員的存在

(4)安全性提高

50. 冒泡排序演算法

冒泡排序
var array = [5, 4, 3, 2, 1];
var temp = 0;
for (var i = 0; i <array.length; i++){
for (var j = 0; j <array.length - i; j++){
if (array[j] > array[j + 1]){
temp = array[j + 1];
array[j + 1] = array[j];
array[j] = temp;
 }
}

51、js 實現一個函數對javascript中json 對象進行克隆

var oldObject ="sdf";
   var newObject = JSON.parse(JSON.stringify(oldObject));
   console.log(newObject);
或者
    var a = 'dddd';
    function cp(a){return JSON.parse(JSON.stringify(a))}
    console.log(cp(a));

52、js 實現 ajax 請求或者submit請求時 鎖屏功能以及開鎖功能（請求時界面Loading以及元素不能點擊，請求完成即消除Loading）

function(url, fn) {
var obj = new XMLHttpRequest(); // XMLHttpRequest對象用於在後臺與伺服器交換數據
obj.open('GET', url, true);
obj.onreadystatechange = function() {
if(obj.readyState == 4 && obj.status == 200||obj.status == 304) {

               loading.style.display = "none"

            } else {

               alert("不能點擊,哈哈哈!");

            }

   };

obj.send(null);
}

53、js 實現一個函數 獲得url參數的值

function getQueryString(name) { 
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
  var r = window.location.search.substr(1).match(reg); 
  if (r != null) return unescape(r[2]); return null; 
} 

54、請用js計算1-10000中出現的0 的次數

new Array(10000).fill('').map((_, index) => index + 1).filter(item => /0/.test(item)).reduce((count, item) => { return count + (String(item).match(/0/g) || []).length}, 0)

55、寫一個function，清除字元串前後的空格。（相容所有瀏覽器）

function trim(str) {
    if (str & typeof str === "string") {
        return str.replace(/(^s*)|(s*)$/g,""); //去除前後空白符
    }
}

56、降維數組

var arr=[[1,2],[3,4]];
function Jw(obj){
     return Array.prototype.concat.apply([],obj);
}
Jw(arr);

57、將url的查詢參數解析成字典對象

···
function getQueryObject(url) {
url = url == null ? window.location.href : url;
var search = url.substring(url.lastIndexOf("?") + 1);
var obj = {};
var reg = /([^?&=]+)=([?&=]*)/g;
search.replace(reg, function (rs, 2) {
var name = decodeURIComponent(2);
val = String(val);
obj[name] = val;
return rs;
});
return obj;
}
···

58、判斷一個字元串中出現次數最多的字元，統計這個次數

···
var str = 'asdfssaaasasasasaa';
var json = {};

for (var i = 0; i < str.length; i++) {
if(!json[str.charAt(i)]){
json[str.charAt(i)] = 1;
}else{
json[str.charAt(i)]++;
}
};
var iMax = 0;
var iIndex = '';
for(var i in json){
if(json[i]>iMax){
iMax = json[i];
iIndex = i;
}
}
alert('出現次數最多的是:'+iIndex+'出現'+iMax+'次');
···

59、編寫一個方法 求一個字元串的位元組長度;

···
//假設一個中文占兩個位元組
var str = '22兩是';

alert(getStrlen(str))

function getStrlen(str){
var json = {len:0};
var re = /[\u4e00-\u9fa5]/;
for (var i = 0; i < str.length; i++) {
if(re.test(str.charAt(i))){
json['len']++;
}
};
return json['len']+str.length;
}
···

60、編寫一個方法 去掉一個數組的重覆元素

···
var arr = [1,2,3,1,43,12,12,1];
var json = {};
var arr2 = [];
for (var i = 0; i < arr.length; i++) {
if(!json[arr[i]]){
json[arr[i]] = true;
}else{
json[arr[i]] = false;
}

    if(json[arr[i]]){
            arr2.push(arr[i]);
    }

};

for (var i = 0; i < arr.length; i++) {
if(!aa(arr[i], arr2)){
arr2.push(arr[i])
}
};
function aa(obj, arr){
for (var i = 0; i < arr.length; i++) {
if(arr[i] == obj) return true;
else return false;
};
}
alert(arr2)
···

61、寫出3個使用this的典型應用

事件： 如onclick this->發生事件的對象
構造函數 this->new 出來的object
call/apply 改變this

62、如何深度克隆

···
var arr = [1,2,43];
var json = {a:6,b:4,c:[1,2,3]};
var str = 'sdfsdf';

var json2 = clone(json);

alert(json['c'])
function clone(obj){
var oNew = new obj.constructor(obj.valueOf());
if(obj.constructor == Object){
for(var i in obj){
oNew[i] = obj[i];
if(typeof(oNew[i]) == 'object'){
clone(oNew[i]);
}
}
}
return oNew;
}
···

63、JavaScript中如何檢測一個變數是一個String類型？請寫出函數實現

···
typeof(obj) == 'string'
obj.constructor == String;
···

64、網頁中實現一個計算當年還剩多少時間的倒數計時程式，要求網頁上實時動態顯示“××年還剩××天××時××分××秒”

···
var oDate = new Date();
var oYear = oDate.getFullYear();

var oNewDate = new Date();
oNewDate.setFullYear(oYear, 11, 31, 23, 59, 59);
var iTime = oNewDate.getTime()-oDate.getTime();

var iS = iTime/1000;
var iM = oNewDate.getMonth()-oDate.getMonth();
var iDate =iS
···

65、請解釋一下什麼是語義化的HTML。

內容使用特定標簽，通過標簽就能大概瞭解整體頁面的佈局分佈

66、為什麼利用多個功能變數名稱來存儲網站資源會更有效？

確保用戶在不同地區能用最快的速度打開網站，其中某個功能變數名稱崩潰用戶也能通過其他鬱悶訪問網站

67、請說出三種減低頁面載入時間的方法

1、壓縮css、js文件
2、合併js、css文件，減少http請求
3、外部js、css文件放在最底下
4、減少dom操作，儘可能用變數替代不必要的dom操作

68、什麼是FOUC？你如何來避免FOUC？

由於css引入使用了@import 或者存在多個style標簽以及css文件在頁面底部引入使得css文件載入在html之後導致頁面閃爍、花屏
用link載入css文件，放在head標簽裡面

69、文檔類型的作用是什麼？你知道多少種文檔類型？

影響瀏覽器對html代碼的編譯渲染
html2.0
xHtml
html5

70、瀏覽器標準模式和怪異模式之間的區別是什麼？

盒模型解釋不同

71、閉包

子函數能被外部調用到，則該作用連上的所有變數都會被保存下來。

72、請解釋什麼是Javascript的模塊模式，並舉出實用實例。

js模塊化mvc（數據層、表現層、控制層）
seajs
命名空間

73、你如何組織自己的代碼？是使用模塊模式，還是使用經典繼承的方法？

對內：模塊模式
對外：繼承

74、你如何優化自己的代碼？

代碼重用
避免全局變數（命名空間，封閉空間，模塊化mvc..）
拆分函數避免函數過於臃腫
註釋

75、你能解釋一下JavaScript中的繼承是如何工作的嗎？

子構造函數中執行父構造函數，並用call\apply改變this
克隆父構造函數原型上的方法

76、請儘可能詳盡的解釋AJAX的工作原理。

創建ajax對象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）
判斷數據傳輸方式(GET/POST)
打開鏈接 open()
發送 send()
當ajax對象完成第四步（onreadystatechange）數據接收完成，判斷http響應狀態（status）200-300之間或者304（緩存）執行回調函數

77、最簡單的一道題

···
var a = 2, b = 3;
var c = a+++b; // c = 5
···

78、var和function的預解析問題,以及變數和function的先後順序的問題

···
// 以下代碼執行輸出結果是什麼
function b () {
console.log(a);
var a = 10;
function a() {};
a = 100;
console.log(a);
}
b();

function c () {
    console.log(a);
    function a() {};
    var a = 10;
    a = 100;
    console.log(a);
}
c();

(function d (num) {
    console.log(num);
    var num = 10;
}(100))

(function e (num) {
    console.log(num);
    var num = 10;
    function num () {};
}(100))

(function f (num) {
    function num () {};
    console.log(num);
    var num =10
    console.log(num);
}(100))

//仍然是預解析(在與解析過程中還要考慮一下當前變數的作用於)
function m () {
    console.log(a1); // underfined
    console.log(a2); // underfined
    console.log(b1); // underfined
    console.log(b2); // underfined
    if(false) {
        function b1 (){};
        var a1 = 10;
    }
    if(true) {
        function b2 (){};
        var a2 = 10;
    }
    console.log(a1); // underfined
    console.log(a2); // 10
    console.log(b1); // underfined
    console.log(b2); // function
}
m();

function n() {
    if(2>1) {
        arr = 10;
        brr = 10;
        let arr;
        var brr;
        console.log(arr);
        console.log(brr);
    }
}
n(); // ReferenceError

···

79、dom事件委托什麼原理，有什麼優缺點

事件委托原理:事件冒泡機制

優點

1.可以大量節省記憶體占用，減少事件註冊。比如ul上代理所有li的click事件就很不錯。
2.可以實現當新增子對象時，無需再對其進行事件綁定，對於動態內容部分尤為合適

缺點

事件代理的常用應用應該僅限於上述需求，如果把所有事件都用事件代理，可能會出現事件誤判。即本不該被觸發的事件被綁定上了事件。

80、http的cache機制，以及200狀態下怎麼實現 from cache（表示接觸最多的就是304的from cache）（用於優化，沒有接觸過，需要理解）

含義

定義：瀏覽器緩存（Browser Caching）是為了加速瀏覽，瀏覽器在用戶磁碟上對最近請求過的文檔進行存儲，當訪問者再次請求這個頁面時，瀏覽器就可以從本地磁碟顯示文檔，這樣就可以加速頁面的閱覽。

作用

cache的作用：
1、減少延遲，讓你的網站更快，提高用戶體驗。
2、避免網路擁塞，減少請求量，減少輸出帶寬。

實現手段

Cache-Control中的max-age是實現內容cache的主要手段，共有3種常用策略：max-age和Last-Modified（If-Modified-Since）的組合、僅max-age、max-age和ETag的組合。

對於強制緩存，伺服器通知瀏覽器一個緩存時間，在緩存時間內，下次請求，直接用緩存，不在時間內，執行比較緩存策略。
對於比較緩存，將緩存信息中的Etag和Last-Modified通過請求發送給伺服器，由伺服器校驗，返回304狀態碼時，瀏覽器直接使用緩存。

81、一個原型鏈繼承的問題

    // 有一個構造函數A，寫一個函數B，繼承A
    function A (num) {
        this.titileName = num;
    }
    A.prototype = {
        fn1: function () {},
        fn2: function () {}
    }

這個問題的關註點是B繼承的A的靜態屬性，同時B的原型鏈中不存在A實例的titleName屬性

82、什麼是虛擬dom

React為啥這麼大？因為它實現了一個虛擬DOM（Virtual DOM）。虛擬DOM是乾什麼的？這就要從瀏覽器本身講起

如我們所知，在瀏覽器渲染網頁的過程中，載入到HTML文檔後，會將文檔解析並構建DOM樹，然後將其與解析CSS生成的CSSOM樹一起結合產生愛的結晶——RenderObject樹，然後將RenderObject樹渲染成頁面（當然中間可能會有一些優化，比如RenderLayer樹）。這些過程都存在與渲染引擎之中，渲染引擎在瀏覽器中是於JavaScript引擎（JavaScriptCore也好V8也好）分離開的，但為了方便JS操作DOM結構，渲染引擎會暴露一些介面供JavaScript調用。由於這兩塊相互分離，通信是需要付出代價的，因此JavaScript調用DOM提供的介面性能不咋地。各種性能優化的最佳實踐也都在儘可能的減少DOM操作次數。

而虛擬DOM幹了什麼？它直接用JavaScript實現了DOM樹（大致上）。組件的HTML結構並不會直接生成DOM，而是映射生成虛擬的JavaScript DOM結構，React又通過在這個虛擬DOM上實現了一個 diff 演算法找出最小變更，再把這些變更寫入實際的DOM中。這個虛擬DOM以JS結構的形式存在，計算性能會比較好，而且由於減少了實際DOM操作次數，性能會有較大提升

83、js基礎數據類型和引用類型分別是什麼？這個前提條件下寫一個getType，返回相應的類型

1.基本數據類型（自身不可拆分的）：Undefined、Null、Boolean、Number、String
2.引用數據類型（對象）：Object （Array，Date，RegExp，Function）
ES6基本數據類型多了個symbol 據說這道題刷了百分之二十的人 感謝Abbyshen提出

function gettype(nm){
    return Object.prototype.toString.call(nm);
}

84、 dom選擇器優先順序是什麼，以及權重值計算（一道老問題了）

1.行內樣式 1000
2.id 0100
3.類選擇器、偽類選擇器、屬性選擇器[type="text"] 0010
4.標簽選擇器、偽元素選擇器(::first-line) 0001
5.通配符*、子選擇器、相鄰選擇器 0000

85、vue雙向數據綁定的原理是什麼

首先傳輸對象的雙向數據綁定 Object.defineProperty(target, key, decription),在decription中設置get和set屬性（此時應註意description中get和set不能與描述屬性共存）
數組的實現與對象不同。
同時運用觀察者模式實現wather，用戶數據和view視圖的更新

86、 react和vue比較來說有什麼區別

1 component層面，web component和virtual dom
2 數據綁定（vue雙向，react的單向）等好多
3 計算屬性 vue 有，提供方便；而 react 不行
4 vue 可以 watch 一個數據項；而 react 不行
5 vue 由於提供的 direct 特別是預置的 directive 因為場景場景開發更容易；react 沒有
6 生命周期函數名太長 directive

87、git使用過程中，如果你在開發著業務，突然另一個分支有一個bug要改，你怎麼辦

git stash       //將本次修改存到暫存區（緊急切換分支時）
git stash pop   //將所有暫存區的內容取出來

88、 網頁佈局有哪幾種，有什麼區別

靜態、自適應、流式、響應式四種網頁佈局
靜態佈局：意思就是不管瀏覽器尺寸具體是多少，網頁佈局就按照當時寫代碼的佈局來佈置；
自適應佈局：就是說你看到的頁面，裡面元素的位置會變化而大小不會變化；
流式佈局：你看到的頁面，元素的大小會變化而位置不會變化——這就導致如果屏幕太大或者太小都會導致元素無法正常顯示。
自適應佈局：每個屏幕解析度下麵會有一個佈局樣式，同時位置會變而且大小也會變。

89、執行下麵代碼

var a = {};
var b = {key: 'b'};
var c = {key: 'c'};
var d = [3,5,6];
a[b] = 123;
a[c] = 345;
a[d] = 333;
console.log(a[b]);  // 345
console.log(a[c]);  // 345
console.log(a[d]);  // 333

90、

    var R = (function() {
        var u = {a:1,b:2};
        var r = {
            fn: function(k) {
                return u[k];
            }
        }
        return r;
    }());
    R.fn('a');  // 1

上述代碼中如何獲取匿名函數中的u

91、不適用迴圈語句（包括map、forEach方法）實現一個100長度的數組，索引值和值相同的數組[0,1,2,3,4,5........99]

var arr = new Array(100);
//方法1
[...arr.keys()];
//方法二
Array.from(arr.keys());

//方法三
Array.from({length: 100});

// 方法四 藉助string
var arr1 = new Array(101);
var str = arr1.join('1,');
str = str.replace(/(1\,)/g, function ($0, $1, index) {
    var start = '' + Math.ceil(index/2);
    if(index < str.length - 2) {
        start += ','
    }
    return start;
});
return str.split(',');

// 方法五（函數式，參考網路）
function reduce(arr, val) {
    if(Object.prototype.toString.apply(val)){
        return;
    }
    if(val >= 100) {
        return arr;
    }
    arr.push(val);
    return reduce(arr, val+1);
}
var res = reduce([], 0)

92、下麵語句執行結果輸出

var a = function (val, index) {
    console.log(index);
    return {
        fn: function (name) {
            return a(name, val);
        }
    }
}

var b = a(0); // underfined
b.fn(1); // 0
b.fn(2); // 0
b.fn(3); // 0

93、科普

1. dom節點的根節點是不是body
   回答： 不是，dom節點的根節點是html(包含head和body，head中分為meta、title等。body又分為一組)

2）dom元素都會有offsetParent嗎
回答： offsetParent屬性返回一個對象的引用，這個對象是距離調用offsetParent的元素最近的（在包含層次中最靠近的），並且是已進行過CSS定位的容器元素。 如果這個容器元素未進行CSS定位, 則offsetParent屬性的取值為根元素(在標準相容模式下為html元素；在怪異呈現模式下為body元素)的引用。 當容器元素的style.display 被設置為 "none"時（譯註：IE和Opera除外），offsetParent屬性 返回 null。

3. [1,3,5]轉譯成字元串是什麼
   回答： '1,3,5'
   調用toString方法，生成該字元串

4）li標簽的祖級元素可以為li，父級元素也可以為例
回答： 錯誤

94、 jsonp原理，jquery是怎麼實現的，這樣實現有什麼好處和壞處

原理

在同源策略下;在某個伺服器下的頁面是無法獲取到該伺服器以外的數據的;Jquery中ajax 的核心是通過 XmlHttpRequest獲取非本頁內容，而jsonp的核心則是動態添加 <script>標簽來調用伺服器提供的 js腳本
當我們正常地請求一個JSON數據的時候，服務端返回的是一串 JSON類型的數據，而我們使用 JSONP模式來請求數據的時候服務端返回的是一段可執行的 JavaScript代碼。因為jsonp 跨域的原理就是用的動態載入 script的src ，所以我們只能把參數通過 url的方式傳遞, 所以jsonp的 type類型只能是get ！

$.ajax({
    url: 'http://192.168.1.114/yii/demos/test.php', //不同的域
    type: 'GET', // jsonp模式只有GET 是合法的
    data: {
        'action': 'aaron'
    },
    dataType: 'jsonp', // 數據類型
    jsonp: 'backfunc', // 指定回調函數名，與伺服器端接收的一致，並回傳回來
})
其實jquery 內部會轉化成
http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron
然後動態載入
<script type="text/javascript"src="http://192.168.1.114/yii/demos/test.php?backfunc=>
然後後端就會執行backfunc(傳遞參數 )，把數據通過實參的形式發送出去。

在jquery 源碼中， jsonp的實現方式是動態添加<script>標簽來調用伺服器提供的 js腳本。jquery 會在window對象中載入一個全局的函數，當 <script>代碼插入時函數執行，執行完畢後就 <script>會被移除。同時jquery還對非跨域的請求進行了優化，如果這個請求是在同一個功能變數名稱下那麼他就會像正常的 Ajax請求一樣工作。

95、 http協議屬於七層協議中的哪一層，下一層是什麼

七層結構：物理層、數據鏈路層、網路層、傳輸層、會話層、表示層、應用層
tcp屬於傳輸層；http屬於應用層。
表現層

96、 js垃圾回收機制知道哪些，v8引擎使用的哪一種

js的兩種回收機制

1 標記清除（mark and sweep）
2 引用計數（reference counting）

javascript與V8引擎

垃圾回收機制的好處和壞處

好處：大幅簡化程式的記憶體管理代碼，減輕程式猿負擔，並且減少因為長時間運轉而帶來的記憶體泄露問題。

壞處：自動回收意味著程式猿無法掌控記憶體。ECMAScript中沒有暴露垃圾回收的藉口，我們無法強迫其進行垃圾回收，更加無法干預記憶體管理。

V8 自動垃圾回收演算法
https://segmentfault.com/a/11...

97、 作用域什麼時候生成的？

頁面載入-->創建window全局對象，並生成全局作用域-->然後生成執行上下文，預解析變數(變數提升)，生成全局變數對象；
$scope

98、 websocket長連接原理是什麼

含義

Websocket是一個持久化的協議，相對於HTTP這種非持久的協議來說。

原理

類似長輪循長連接 ; 發送一次請求 ; 源源不斷的得到信息

28. http緩存知道哪些

http://blog.csdn.net/yzf91321...

99、 講一下事件迴圈機制

執行上下文(Execution context)
函數調用棧(call stack)
隊列數據結構(queue)
Promise

https://zhuanlan.zhihu.com/p/...

100、 理解web安全嗎？都有哪幾種，介紹以及如何預防

1.XSS，也就是跨站腳本註入

攻擊方法：
1\. 手動攻擊:
編寫註入腳本，比如”/><script>alert(document.cookie());</script><!--等，
手動測試目標網站上有的input, textarea等所有可能輸入文本信息的區域
2\. 自動攻擊
利用工具掃描目標網站所有的網頁並自動測試寫好的註入腳本，比如：Burpsuite等
防禦方法：
1\. 將cookie等敏感信息設置為httponly，禁止Javascript通過document.cookie獲得
2\. 對所有的輸入做嚴格的校驗尤其是在伺服器端，過濾掉任何不合法的輸入，比如手機號必須是數字，通常可以採用正則表達式
3\. 凈化和過濾掉不必要的html標簽，比如：<iframe>, alt,<script> 等
4\. 凈化和過濾掉不必要的Javascript的事件標簽，比如：onclick, onfocus等
5\. 轉義單引號，雙引號，尖括弧等特殊字元，可以採用htmlencode編碼 或者過濾掉這些特殊字元
6\. 設置瀏覽器的安全設置來防範典型的XSS註入

2.SQL註入

攻擊方法：
編寫惡意字元串，比如‘ or  1=1--等，
手動測試目標網站上所有涉及資料庫操作的地方
防禦方法：
1\. 禁止目標網站利用動態拼接字元串的方式訪問資料庫
2\. 減少不必要的資料庫拋出的錯誤信息
3\. 對資料庫的操作賦予嚴格的許可權控制
4\. 凈化和過濾掉不必要的SQL保留字，比如：where, or, exec 等
5\. 轉義單引號，上引號，尖括弧等特殊字元，可以採用htmlencode編碼 或者過濾掉這些特殊字元

3.CSRF，也就是跨站請求偽造

就是攻擊者冒用用戶的名義，向目標站點發送請求
防範方法：
1\. 在客戶端進行cookie的hashing，併在服務端進行hash認證
2\. 提交請求是需要填寫驗證碼
3\. 使用One-Time Tokens為不同的表單創建不同的偽隨機值  

101、 sessionStorage和localstorage能跨域拿到嗎？比如我在www.baidu.com設置的值能在m.baidu.com能拿到嗎？為什麼

localStorage會跟cookie一樣受到跨域的限制，會被document.domain影響

102、 localstorage不能手動刪除的時候，什麼時候過期

除非被清除，否則永久保存 clear()可清楚
sessionStorage 僅在當前會話下有效，關閉頁面或瀏覽器後被清除

103、cookie可以設置什麼域？可以設置.com嗎

可以通過設置domin來實現

104、登錄狀態的保存你認為可以保存在sessionstorage或者localstorage或者cookie或者你知道的哪種方式，存在了哪裡？？為什麼保存在那裡

105、 flux -> redux -> mobx 變化的本質是什麼

存儲結構 將對象加工可觀察 函數式 vs 面向對象
https://zhuanlan.zhihu.com/p/...

106、 按需載入路由怎麼載入對應的chunk文件的？換句話說瀏覽器怎麼知道什麼時候載入這個chunk，以及webpack是怎麼識別那個多個經過hash過的chunk文件

107、get和post有什麼區別？get可以通過body傳遞數據嗎

把數據放到 body 裡面，必須用 POST 方式取，這是 HTTP 協議限制的。

108、右邊寬度固定，左邊自適應

第一種：

<style>
body{
    display: flex;
}
.left{
    background-color: rebeccapurple;
    height: 200px;
    flex: 1;
}
.right{
    background-color: red;
    height: 200px;
    width: 100px;
}
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

第二種

<style>
    div {
        height: 200px;
    }
    .left {
        float: right;
        width: 200px;
        background-color: rebeccapurple;
    }
    .right {
        margin-right: 200px;
        background-color: red;
    }
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

109、水平垂直居中

第一種

#container{
    position:relative;
}

#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

第二種

#container{
    position:relative;
}

#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-50px 0 0 -50px;
}

第三種

#container{
    position:relative;
}

#center{
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

第四種 flex

#container{
    display:flex;
    justify-content:center;
    align-items: center;
}

109、.四種定位的區別

static 是預設值
relative 相對定位 相對於自身原有位置進行偏移，仍處於標準文檔流中
absolute 絕對定位 相對於最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素為參考標準。如果無已定位祖先元素, 以body元素為偏移參照基準, 完全脫離了標準文檔流。
fixed 固定定位的元素會相對於視窗來定位,這意味著即便頁面滾動，它還是會停留在相同的位置。一個固定定位元素不會保留它原本在頁面應有的空隙。

110、封裝一個函數，參數是定時器的時間，.then執行回調函數。