js 面試1

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操做符具體幹了什麼呢?

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

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

三、新建立的對象由 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; } } 

5一、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)); 

5二、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);
}

5三、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; } 

5四、請用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) 

5五、寫一個function，清除字符串先後的空格。（兼容全部瀏覽器）

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

5六、降維數組

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

5七、將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;
}
···

5八、判斷一個字符串中出現次數最多的字符，統計這個次數

···
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+'次');
···

5九、編寫一個方法 求一個字符串的字節長度;

···
//假設一箇中文佔兩個字節
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)
···

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

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

6二、如何深度克隆

···
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;
}
···

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

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

6四、網頁中實現一個計算當年還剩多少時間的倒數計時程序，要求網頁上實時動態顯示「××年還剩××天××時××分××秒」

···
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
···

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

內容使用特定標籤，經過標籤就能大概瞭解總體頁面的佈局分佈

6六、爲何利用多個域名來存儲網站資源會更有效？

確保用戶在不一樣地區能用最快的速度打開網站，其中某個域名崩潰用戶也能經過其餘鬱悶訪問網站

6七、請說出三種減低頁面加載時間的方法

一、壓縮css、js文件
二、合併js、css文件，減小http請求
三、外部js、css文件放在最底下
四、減小dom操做，儘量用變量替代沒必要要的dom操做

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

因爲css引入使用了@import 或者存在多個style標籤以及css文件在頁面底部引入使得css文件加載在html以後致使頁面閃爍、花屏
用link加載css文件，放在head標籤裏面

6九、文檔類型的做用是什麼？你知道多少種文檔類型？

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

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

盒模型解釋不一樣

7一、閉包

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

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

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

7三、你如何組織本身的代碼？是使用模塊模式，仍是使用經典繼承的方法？

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

7四、你如何優化本身的代碼？

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

7五、你能解釋一下JavaScript中的繼承是如何工做的嗎？

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

7六、請儘量詳盡的解釋AJAX的工做原理。

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

7七、最簡單的一道題

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

7八、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 

···

7九、dom事件委託什麼原理，有什麼優缺點

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

優勢

1.能夠大量節省內存佔用，減小事件註冊。好比ul上代理全部li的click事件就很不錯。
2.能夠實現當新增子對象時，無需再對其進行事件綁定，對於動態內容部分尤其合適

缺點

事件代理的經常使用應用應該僅限於上述需求，若是把全部事件都用事件代理，可能會出現事件誤判。即本不應被觸發的事件被綁定上了事件。

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

含義

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

做用

cache的做用：
一、減小延遲，讓你的網站更快，提升用戶體驗。
二、避免網絡擁塞，減小請求量，減小輸出帶寬。

實現手段

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

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

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

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

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

8二、什麼是虛擬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操做次數，性能會有較大提高

8三、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); } 

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

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

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

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

8六、 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

8七、git使用過程當中，若是你在開發着業務，忽然另外一個分支有一個bug要改，你怎麼辦

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

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

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

8九、執行下面代碼

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

9一、不適用循環語句（包括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) 

9二、下面語句執行結果輸出

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 

9三、科普

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，父級元素也能夠爲例
回答： 錯誤

9四、 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請求同樣工做。

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

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

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

js的兩種回收機制

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

javascript與V8引擎

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

好處：大幅簡化程序的內存管理代碼，減輕程序猿負擔，而且減小由於長時間運轉而帶來的內存泄露問題。

壞處：自動回收意味着程序猿沒法掌控內存。ECMAScript中沒有暴露垃圾回收的藉口，咱們沒法強迫其進行垃圾回收，更加沒法干預內存管理。

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

9七、 做用域何時生成的？

頁面加載-->建立window全局對象，並生成全局做用域-->而後生成執行上下文，預解析變量(變量提高)，生成全局變量對象；
$scope

9八、 websocket長鏈接原理是什麼

含義

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

原理

相似長輪循長鏈接 ; 發送一次請求 ; 源源不斷的獲得信息

28. http緩存知道哪些

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

9九、 講一下事件循環機制

執行上下文(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爲不一樣的表單建立不一樣的僞隨機值 

10一、 sessionStorage和localstorage能跨域拿到嗎？好比我在www.baidu.com設置的值能在m.baidu.com能拿到嗎？爲何

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

10二、 localstorage不能手動刪除的時候，何時過時

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

10三、cookie能夠設置什麼域？能夠設置.com嗎

能夠經過設置domin來實現

10四、登陸狀態的保存你認爲能夠保存在sessionstorage或者localstorage或者cookie或者你知道的哪一種方式，存在了哪裏？？爲何保存在那裏

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

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

10六、 按需加載路由怎麼加載對應的chunk文件的？換句話說瀏覽器怎麼知道何時加載這個chunk，以及webpack是怎麼識別那個多個通過hash過的chunk文件

10七、get和post有什麼區別？get能夠經過body傳遞數據嗎

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

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

第一種：

<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> 

10九、水平垂直居中

第一種

#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; } 

10九、.四種定位的區別

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

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

function sleep (time) { return new Promise((resolve) => setTimeout(resolve, time)); } 

1十一、一行代碼實現數組去重？

[...new Set([1,2,3,1,'a',1,'a'])] 

1十二、使用addEventListener點擊li彈出內容，而且動態添加li以後有效

<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> var ulNode = document.getElementById("ul"); ulNode.addEventListener('click', function (e) { if (e.target && e.target.nodeName.toUpperCase() == "LI") { alert(e.target.innerHTML); } }, false); 

11三、怎麼判斷兩個對象相等

JSON.stringify(obj)==JSON.stringify(obj);//true 

11四、Vue router 除了 router-link 怎麼實現跳轉?

router.go(1)
router.push('/') 

11五、Vue router 跳轉和 location.href 有什麼區別？

router 是 hash 改變
location.href 是頁面跳轉，刷新頁面

11六、重排和重繪

部分渲染樹（或者整個渲染樹）須要從新分析而且節點尺寸須要從新計算。這被稱爲重排。注意這裏至少會有一次重排-初始化頁面佈局。
因爲節點的幾何屬性發生改變或者因爲樣式發生改變，例如改變元素背景色時，屏幕上的部份內容須要更新。這樣的更新被稱爲重繪。

11七、什麼狀況會觸發重排和重繪

添加、刪除、更新 DOM 節點
經過 display: none 隱藏一個 DOM 節點-觸發重排和重繪
經過 visibility: hidden 隱藏一個 DOM 節點-只觸發重繪，由於沒有幾何變化
移動或者給頁面中的 DOM 節點添加動畫
添加一個樣式表，調整樣式屬性
用戶行爲，例如調整窗口大小，改變字號，或者滾動。

11八、js bind 實現機制？手寫一個 bind 方法？

function bind(fn, context){ return function (){ return fn.apply(context, arguments); } } // 柯理化函數思想 感謝pursuitTom的提出 Function.prototype.bind = function (context) { var args = Array.prototype.slice.call(arguments, 1); var _this = this; return function () { var thisArgs = [].slice.call(arguments); return _this.apply(context, args.concat(thisArgs)) }; } // ES6寫法 感謝waterc的提出 Function.prototype.bind = function(context, ...res) { let self = this return function(...arg) { return self.apply(context, [...res,...arg]) } } 

11九、多個函數

var a = (function(){return '1';}, function(){return 1;})(); console.log(typeof a); //number 

120、proto、prototype、Object.getPrototypeOf()

__proto__是指內部原型，和Object.getPrototypeOf()結果等價 function f(){} f.__proto__ === Object.getPrototypeOf(f); //true f.prototype === Object.getPrototypeOf(f); //false 

12一、瀏覽記錄先後跳轉（還沒有試驗）

<a href="javascript:history.go(-1)">backward</a> <a href="javascript:history.go(1)">forward</a> 

12二、setTimeout 和 setInterval 細談

常問的點，前者是在必定時間事後將函數添加至執行隊列，執行時間=延遲時間+以前函數代碼執行時間+執行函數時間。
後者是無論前一次是否執行完畢，每隔必定時間重複執行，用於精準執行互相沒有影響的重複操做。
若是須要控制先後執行順序，最好使用setTimeout模擬setInterval

var time = 400, times = 0, max = 10; function func(){ times++; if(times < max){ //code here setTimeout(func, time); } else { console.log("finished"); } } setTimeout(func, time); 

12三、判斷多圖片加載完畢

注：用jQueryObject.ready()只能判斷dom結構加載完畢
好像描述的不是很清楚，這裏寫一下代碼。
方法1：

var counter = 0; var queryInterval = 30; //ms var pics = document.getElementsByClassName("pics"); function singleQuery(i){ if(pics[i].complete){ counter++; console.log(i + " is loaded"); } else { setTimeout(singleQuery, queryInterval, i); } } function allQuery(callback){ if(counter < pics.length){ console.log("current number of loaded pics: " + counter); setTimeout(allQuery, queryInterval, callback); } else { console.log("All pics are loaded."); callback(); } } for(var i = 0; i < pics.length; i++){ setTimeout(singleQuery, queryInterval, i); } setTimeout(allQuery, queryInterval, callback); 

主要也是採用setTimeout模擬輪詢，判斷方式是img標籤dom的complete屬性（布爾值），缺點是定時器太多。

方法2：

var counter = 0, queryInterval = 50; var pics = document.getElementsByClassName("pics"); for(var i = 0; i < pics.length; i++){ pics[i].onload = function(){ counter++; console.log(this.id + " is loaded"); } } function queryPictures(callback){ if(counter < pics.length){ console.log("current number of loaded pics: " + counter); setTimeout(queryPictures, queryInterval, callback); } else { console.log("All pics are loaded"); callback(); } } setTimeout(queryPictures, queryInterval, callback); 

利用onload綁定圖片加載成功後的回調，經過計數器判斷是否加載完畢。

12四、CSS margin重疊問題

塊元素在垂直方向上的margin是很奇怪的，會有重疊現象。
若是display都是block，有三種狀況：
外間距均爲正數，豎直方向上會選擇最大的外邊距做爲間隔
一正一負，間距 = 正 - |負|
兩個負，間距 = 0 - 絕對值最大的那個
設置display: inline-block的盒子不會有margin重疊，position: absolute的也不會出現。

12五、CSS選擇器優先級 && CSS選擇器效率

ID > 類 > 標籤 > 相鄰 > 子選擇器 > 後代選擇器 > * > 屬性 > 僞類

object.propertyIsEnumerable(xxx)

判斷對象中是否有xxx屬性，而且能經過for in枚舉，如Array對象的length是不可枚舉的

12六、判斷數組

function isArray(arr){ return Object.prototype.toString.call(arr) === '[Object Array]'; } 

12七、git fetch && git pull

git pull自動完成了fetch最新遠程版本，而且和本地進行merge
git fetch得到遠程分支，要繼續手動merge合併

12八、WebSocket

HTML5帶來的新協議，經過相似HTTP的請求創建鏈接。主要目的是能夠獲取服務端的推送。
原來的方式多是使用long poll（即不中斷鏈接一直等待數據），或者是ajax輪詢的方式（每隔一段時間發送請求，創建鏈接，詢問是否有新的數據）。這兩種方式的缺點在於long poll的阻塞，以及ajax輪詢的冗餘鏈接。
WebSocket的設計思想有點相似於回調，在發送請求升級服務端的協議並收到確認信息後，服務端一有新的信息/數據就會主動推送給客戶端，至於要一次HTTP握手即可以創建持久鏈接

12九、跨域相關

只要協議、域名、端口有不一樣，則視爲不一樣的域。（域名和域名對應的IP也是跨域）

1.CORS: Cross-Origin Resource Sharing

基於服務器支持的跨域，服務器設置Access-Control-Allow-Origin響應頭，瀏覽器可容許跨域

2.設置domain

能從子域設到主域，如a.b.c.com—>b.c.com—>c.com
具體狀況：在頁面中用iframe打開了另外一個頁面（前提：兩個頁面主域是相同的）
利用frameElement.contentWindow.document.domain設置frame子頁面的主域，document.domain設置主頁面的主域，以後就能互相獲取dom中的數據。
缺點是隻能用於不一樣子域間的交互。

3.例如擁有src屬性的img標籤，每次改變src屬性，都會發起http請求。

var img = new Image(); img.onload = function(){ //code here }; img.onerror = function(){ //code here }; img.src="http://server.com/data?query=3"; 

缺點是隻能使用GET請求，不能獲取數據，通常用於提交統計信息什麼的。
script、link、iframe只有在添加到DOM中才會發起請求

4.HTML5 postMessage

支持IE8+和主流瀏覽器，寫法也簡單..

//source: http://test.org:4000 //get the window object of target origin var win = window.open("http://target.com"); //or this, when a frame is used var win = document.getElementById("targetId").contentWindow; win.postMessage("data here", "http://target.com/rest"); //target: http://target.com/tiny function handleMessage(event){ if(event.orgin!="http://test.org:4000") return; var data = event.data; //code here //event.source is window.opener event.source.postMessage("response data here", event.origin); } window.addEventListener("message", handleMessage, false); 

5.window.name

即便在頁面打開多層iframe後，每一個iframe中window.name 屬性值都是相同的，以此用做數據傳輸的工具。
但因爲跨域的限制，是沒法獲取另外一個frame中的window.name數據，因此要使用一個同域的代理(proxy.html)：

6. jsonp

目前主流跨域方法
調用其餘域的腳本獲取數據，前提是另外一個域能知道回調函數名，這個能夠經過請求發送給目標域。
直接寫jQuery封的jsonp

$.getJSON("http://target.com/data?callback=callbackFunctionName", function(data){}); 

$.getJSON會把獲取的responseText轉爲json，若是url中有callback參數，數據會以script標籤形式獲取。

130、閉包相關

什麼是閉包

閉包是指有權訪問另外一個函數做用域中變量的函數

怎麼建立閉包

在函數內部嵌套使用函數

function fn() { for (var i = 0; i < 2; i++) { (function () { var variate = i; setTimeout(function () { console.log("setTimeout執行後:"+variate); }, 1000); })();//閉包,當即執行函數,匿名函數 } console.log(i);//2 console.log(variate);//variate is not defined } fn(); 

爲何用閉包

• 由於在閉包內部保持了對外部活動對象的訪問,但外部的變量卻沒法直接訪問內部,避免了全局污染;
• 能夠當作私有成員,彌補了因js語法帶來的面向對象編程的不足;
• 能夠長久的在內存中保存一個本身想要保存的變量.

閉包的缺點

• 可能致使內存佔用過多,由於閉包攜帶了自身的函數做用域
• 閉包只能取得外部包含函數中得最後一個值

詳見https://segmentfault.com/a/11...

13一、a:active 移動端實現

有時候一些按鈕的簡單點擊交互能夠經過css僞類來實現；必須點擊了更改顏色；鬆開恢復；IOS手機會出現僞類無效的狀況；iOS系統的移動設備中，須要在按鈕元素或body/html上綁定一個touchstart事件才能激活:active狀態。

document.body.addEventListener('touchstart', function () { //...空函數便可}); 

13二、ios滑動卡頓

-webkit-overflow-scrolling:touch 可能會在IOS系統低的狀況出現滾動條；嘗試溢出解決

13三、forEach和map的區別

相同點

• 都是循環遍歷數組中的每一項
• forEach和map方法裏每次執行匿名函數都支持3個參數，參數分別是item（當前每一項）、index（索引值）、arr（原數組）
• 匿名函數中的this都是指向window
• 只能遍歷數組
• 都有兼容問題

不一樣點

• map速度比foreach快
• map會返回一個新數組，不對原數組產生影響,foreach不會產生新數組，
• map由於返回數組因此能夠鏈式操做，foreach不能

13四、淺拷貝和深拷貝

jQuery.extend第一個參數能夠是布爾值，用來設置是否深度拷貝的

jQuery.extend(true, { a : { a : "a" } }, { a : { b : "b" } } ); jQuery.extend( { a : { a : "a" } }, { a : { b : "b" } } ); 

最簡單的深拷貝

aa = JSON.parse( JSON.stringify(a) ) 

淺複製--->就是將一個對象的內存地址的「」編號「」複製給另外一個對象。深複製--->實現原理，先新建一個空對象，內存中新開闢一塊地址，把被複制對象的全部可枚舉的(注意可枚舉的對象)屬性方法一一複製過來，注意要用遞歸來複制子對象裏面的全部屬性和方法，直到子子.....屬性爲基本數據類型。總結，深複製理解兩點，1,新開闢內存地址，2,遞歸來刨根複製。

13五、外邊距合併

外邊距合併指的是，當兩個垂直外邊距相遇時，它們將造成一個外邊距。
合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

13六、js加載位置區別優缺點

html文件是自上而下的執行方式，但引入的css和javascript的順序有所不一樣，css引入執行加載時，程序仍然往下執行，而執行到<script>腳本是則中斷線程，待該script腳本執行結束以後程序才繼續往下執行。
因此，大部分網上討論是將script腳本放在<body>以後，那樣dom的生成就不會由於長時間執行script腳本而延遲阻塞，加快了頁面的加載速度。

但又不能將全部的script放在body以後，由於有一些頁面的效果的實現，是須要預先動態的加載一些js腳本。因此這些腳本應該放在<body>以前。

其次，不能將須要訪問dom元素的js放在body以前，由於此時尚未開始生成dom，因此在body以前的訪問dom元素的js會出錯，或者無效

script放置位置的原則「頁面效果實現類的js應該放在body以前，動做，交互，事件驅動，須要訪問dom屬性的js均可以放在body以後