前端面試（較上一版本有更新）

時間 2019-11-11

標籤前端面試上一版本更新欄目快樂工作简体版

原文原文鏈接

1、HTML/CSSjavascript

一、什麼是盒子模型？php

一個空間由幾部分組成：邊框、內邊距、外邊距、內容。css

IE 盒子模型：包括 margin、border、padding、content， content 部分包含了 border 和 padinghtml

標準 W3C 盒子模型：包括 margin、border、padding、content；content 部分不包含其餘　前端

二、行內元素有哪些？塊級元素有哪些？空元素有哪些？vue

行內元素：a、b、span、img、input、strong、select、label、em、button、textareajava

塊級元素：div、ul、li、p、h1、h2、h3、h4、h5、h6jquery

空元素：input、img、br、hr、meta、linkwebpack

三、HTML5新特性，語義化ios

簡潔的DOCTYPE：<!DOCTYPE html>

簡單易記的編碼類型：<meta charset=」utf-8″ />

腳本和連接無需type：

語義化新增標籤：<article>、<section>、<aside>、<hgroup>、 <header>,<footer>、<nav>、<time>、<mark>、<figure> 和<figcaption>

4、什麼是優雅降級和漸進加強？

優雅降級：開始構建完整的項目，後期針對低版本瀏覽器進行兼容；

漸進加強：針對低版本瀏覽器構建頁面，保證最基本功能，而後針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的體驗。

5、 display屬性和 visibility屬性的區別？

Display：inlin-block像內聯元素同樣顯示,none不顯示不佔空間,block像塊級元素同樣顯示;

Visibility:hidden;僅僅是視覺上透明不顯示，空間位置佔據

6、CSS中link 和@import的區別是？

(1) link屬於HTML標籤，而@import是CSS提供的;

(2) 頁面被加載的時，link會同時被加載，而@import被引用的CSS會等到引用它的CSS文件被加載完再加載;

(3) import只在IE5以上才能識別，而link是HTML標籤，無兼容問題;

(4) link方式的樣式的權重高於@import的權重.

7、box-sizing屬性主要用來控制元素的盒模型的解析模式。默認值是content-box。

content-box：讓元素維持W3C的標準盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設置width/height屬性指的是content部分的寬/高

border-box：讓元素維持IE傳統盒模型（IE6如下版本和IE6~7的怪異模式）。設置width/height屬性指的是border + padding + content

八、CSS3新特性；

增長了新的選擇器：屬性選擇器（[attribute^=value]、[attribute$=value]、[attribute*=value]）

僞類選擇器：動做僞類、nth選擇器等；

Transition（過渡）,

Transform（動畫2D、3D）該屬性容許咱們對元素進行旋轉、縮放、移動或傾斜等操做

Animation（動畫）

漸變：linear-gradient(線性漸變)和radial-gradient(徑向漸變)

9、你作的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?
Ie(trident) 火狐（Gecko）谷歌（webkit） opear(Presto)

10、.前端頁面有哪三層構成，分別是什麼?做用是什麼?
結構層 Html 表示層 CSS 行爲層 js

11、寫出幾種IE6 BUG的解決方法
雙邊距BUG float引發的使用display
像素問題使用float引發的使用dislpay:inline -3px
超連接hover 點擊後失效使用正確的書寫順序 link visited hover active
Ie z-index問題給父級添加position:relative
Png 透明使用js代碼改
Min-height 最小高度！Important 解決’
select 在ie6下遮蓋使用iframe嵌套
爲何沒有辦法定義1px左右的寬度容器（IE6默認的行高形成的，使用over:hidden,zoom:0.08 line-height:1px）

12、css元素的垂直居中

<1>divParent{position:relative}

divChild{

width:400px;

height:400px;

position:absolute;

top:50%;

left:50%;

margin-left:-200px;

margin-top:-200px;

}

<2>divBox{

display:table-cell;

Vertical:middle;

Text-align:center;

}

<3>divParent{

Width:800px;

Height:800px;

Display:flex;

Justify-content:center;

Align-items:center;

}

<4>divParent{

Width:800px;

Height:800px;

Position:relative;

}

divChild{

Width:200px;

Height:200px;

Position:absolute;

Margin:auto;

Top:0;

Bottom:0;

Left:0;

Right:0;

}

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

第一種：

第二種：

14、關於清除浮動的四種方法

overflow:hidden;　.clear{clear:both;}；父級div定義 height

15、flex彈性佈局？（屢次）

Flex是Flexible Box的縮寫，意爲」彈性佈局」，用來爲盒狀模型提供最大的靈活性。

注：設爲 Flex 佈局之後，子元素的float、clear和vertical-align屬性將失效。

分爲容器和容器成員：容器的屬性（6個）

flex-direction：決定主軸方向（水平左（默認）、水平右、垂直上、垂直下）

flex-wrap：決定換行方式（不換行、第一行在上、第二行在上）

flex-flow

justify-content：項目在主軸上的對齊方式

align-items

align-content

14、rem佈局原理

原理是，先按定高寬設計出來頁面，而後轉換爲rem單位，配合js查詢屏幕大小來改變html的font-size，最終作出所謂的完美自適應。

2、javascript

1、js的基本類型有哪些？引用類型有哪些？null和undefined的區別。

基本類型就是Undefined、Null、Boolean、Number、String;

引用類型是object;

undefined表示變量聲明但未初始化時的值，

null表示準備用來保存對象，尚未真正保存對象的值。從邏輯角度看，null值表示一個空對象指針。
2、如何判斷一個變量是Array類型？如何判斷一個變量是Number類型？（都不止一種）

Object.prototype.toString

function isArrayFn (o) {
return Object.prototype.toString.call(o) .slice(8,-1)=== '[object Array]';
}
var arr = [1,2,3,1];
alert(isArrayFn(arr));// true

Array.isArray()

最佳：

3、DOM操做——怎樣添加、移除、移動、複製、建立和查找節點。

（1）建立新節點

createDocumentFragment() //建立一個DOM片斷

createElement() //建立一個具體的元素

createTextNode() //建立一個文本節點

（2）添加、移除、替換、插入

appendChild()

removeChild()

replaceChild()

insertBefore() //並無insertAfter()

（3）查找

getElementsByTagName() //經過標籤名稱

getElementsByName() //經過元素的Name屬性的值(IE容錯能力較強，

會獲得一個數組，其中包括id等於name值的)

getElementById() //經過元素Id，惟一性

4、建立ajax的過程

(1)建立`XMLHttpRequest`對象,也就是建立一個異步調用對象.

(2)建立一個新的`HTTP`請求,並指定該`HTTP`請求的方法、`URL`及驗證信息.

(3)設置響應`HTTP`請求狀態變化的函數.

(4)發送`HTTP`請求.

(5)獲取異步調用返回的數據.

(6)使用JavaScript和DOM實現局部刷新.

function loadShow(){

Var xmlHttp;

If(window.MXLHTTPRequest){

xmlHttp=new XMLHTTPRequest();

}else{

xmlHttp=new ActiveXObject(「Microsoft.XMLHTTP」)

};

xmlHttp.onreadystatechange=function(){

If(xmlHttp.readyState===4&&xmlHttp.status===200){

Document.getElementById(「ID」).innerHTML=xmlHttp.responseText

}

};

xmlHttp.open(‘GET’,’demo.php’,true);

xmlHttp.send()

}

$.ajax({

Url:」請求地址」，

dataType:」xml jsonp json text html script」,//數據類型

Anysnc:」true」,//是否異步

Data:{‘’:’’},

Type:」GET」,//請求格式

Beforesendfunction(){},

Success:function(){},

Completefunction(){},

Error:function(){}

})

5、ajax的缺點

（1）ajax不支持瀏覽器back按鈕。

（2）安全問題 AJAX暴露了與服務器交互的細節。

（3）對搜索引擎的支持比較弱。

（4）破壞了程序的異常機制。

（5）不容易調試。

6、GET和POST的區別，什麼時候使用POST？

GET：通常用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，通常在2000個字符

POST：通常用於修改服務器上的資源，對所發送的信息沒有限制。

GET方式須要使用Request.QueryString來取得變量的值，而POST方式經過Request.Form來獲取變量的值，也就是說Get是經過地址欄來傳值，而Post是經過提交表單來傳值。

然而，在如下狀況中，請使用 POST 請求：

沒法使用緩存文件（更新服務器上的文件或數據庫）

向服務器發送大量數據（POST 沒有數據量限制）

發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

7、HTTP狀態碼：

100 Continue 繼續，通常在發送post請求時，已發送了http header以後服務端將返回此信息，表示確認，以後發送具體參數信息

200 OK 正常返回信息

201 Created 請求成功而且服務器建立了新的資源

202 Accepted 服務器已接受請求，但還沒有處理

301 Moved Permanently 請求的網頁已永久移動到新位置。

302 Found 臨時性重定向。

303 See Other 臨時性重定向，且老是使用 GET 請求新的 URI。

304 Not Modified 自從上次請求後，請求的網頁未修改過。

400 Bad Request 服務器沒法理解請求的格式，客戶端不該當嘗試再次使用相同的內容發起請求。

401 Unauthorized 請求未受權。

403 Forbidden 禁止訪問。

404 Not Found 找不到如何與 URI 相匹配的資源。

500 Internal Server Error 最多見的服務器端錯誤。

503 Service Unavailable 服務器端暫時沒法處理請求（多是過載或維護）。

8、javascript繼承的優缺點：

（1）原型鏈繼承：字面量重寫原型會中斷關係，子類型沒法給超類型傳參

（2）借用構造函數繼承：能夠傳參，但沒有原型，沒法複用

（3）組合繼承（原型鏈和構造函數）

原型鏈繼承：（利用原型讓一個引用類型繼承另一個引用類型的屬性和方法）

function SuperType() {

this.property = true;

}

SuperType.prototype.getSuperValue = function() {

return this.property;

}

function subType() {

this.property = false;

}

//繼承了SuperType

SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function (){

return this.property;

}

var instance = new SubType();

console.log(instance.getSuperValue());//true

借用構造函數：（在子類型構造函數的內部調用超類構造函數，經過使用call()和apply()方法能夠在新建立的對象上執行構造函數）

function SuperType() {

this.colors = ["red","blue","green"];

}

function SubType() {

SuperType.call(this);//繼承了SuperType

}

var instance1 = new SubType();

instance1.colors.push("black");

console.log(instance1.colors);//"red","blue","green","black"

var instance2 = new SubType();

console.log(instance2.colors);//"red","blue","green"

組合繼承：（將原型鏈和借用構造函數的技術組合在一塊，從而發揮二者之長的一種繼承模式）

function SuperType(name) {

this.name = name;

this.colors = ["red","blue","green"];

}

SuperType.prototype.sayName = function() {

console.log(this.name);

}

function SubType(name, age) {

SuperType.call(this,name);//繼承屬性

this.age = age;

}

//繼承方法

SubType.prototype = new SuperType();

Subtype.prototype.constructor = Subtype;

Subtype.prototype.sayAge = function() {

console.log(this.age);

}

var instance1 = new SubType("EvanChen",18);

instance1.colors.push("black");

consol.log(instance1.colors);//"red","blue","green","black"

instance1.sayName();//"EvanChen"

instance1.sayAge();//18

var instance2 = new SubType("EvanChen666",20);

console.log(instance2.colors);//"red","blue","green"

instance2.sayName();//"EvanChen666"

instance2.sayAge();//20

原型式繼承：（藉助原型能夠基於已有的對象建立新對象，同時還沒必要須所以建立自定義的類型）

var person = {

name:"EvanChen",

friends:["Shelby","Court","Van"];

};

var anotherPerson = object(person);

anotherPerson.name = "Greg";

anotherPerson.friends.push("Rob");

var yetAnotherPerson = object(person);

yetAnotherPerson.name = "Linda";

yetAnotherPerson.friends.push("Barbie");

console.log(person.friends);//"Shelby","Court","Van","Rob","Barbie"

寄生式繼承：（建立一個僅用於封裝繼承過程的函數，該函數在內部以某種方式來加強對象，最後再像真正是它作了全部工做同樣返回對象）

function createAnother(original) {

var clone = object(original);

clone.sayHi = function () {

alert("hi");

};

return clone;

}

var person = {

name:"EvanChen",

friends:["Shelby","Court","Van"];

};

var anotherPerson = createAnother(person);

anotherPerson.sayHi();///"hi"

寄生組合式繼承（經過借用函數來繼承屬性，經過原型鏈的混成形式來繼承方法）

function SuperType(name){

this.name = name;

this.colors = ["red","blue","green"];

}

SuperType.prototype.sayName = function (){

alert(this.name);

};

function SubType(name,age){

SuperType.call(this,name);

this.age = age;

}

inheritProperty(SubType,SuperType);

SubType.prototype.sayAge = function() {

alert(this.age);

}

9、簡述一次完整的HTTP請求是怎樣一個過程？

（1）域名解析：解析域名爲對應的ip地址（首先瀏覽器自身DNS緩存，沒有則會針對系統DNS緩存，再沒有則嘗試讀取hosts文件）

（2）發起tcp3次握手（得到ip地址後，瀏覽器會以一個隨機端口向服務器的web程序發起tcp請求連接）

（3）創建tcp鏈接後發起http請求

（4）服務器端響應HTTp請求，瀏覽器獲得html代碼

（5）瀏覽器解析HTML代碼，渲染呈現給用戶

10、把接收的json數據轉換成json字符

obj.toJSONString(); //將JSON對象轉化爲JSON字符

JSON.stringify(obj); //將JSON對象轉化爲JSON字符

11、建立對象的多種方式

第一種：用Object構造函數

　　var a = new Object();

　　var b = new Object();

第二種：對象字面量的方式

　　var a = {};

　　a.name = 'li';

a.age = 21;

12、new 一個對象具體作了什麼

var obj = {};

obj.__proto__ = Base.prototype;

Base.call(obj);

第一行，咱們建立了一個空對象obj
第二行，咱們將這個空對象的__proto__成員指向了Base函數對象prototype成員對象
第三行，咱們將Base函數對象的this指針替換成obj，而後再調用Base函數，因而咱們就給obj對象賦值了一個id成員變量，這個成員變量的值是」base」，關於call函數的用法。

13、javascript閉包

function f1(){

　　　　var n=999;

　　　　function f2(){
　　　　　　 alert(n); // 999
　　　　 }

　　}

概念：內部受保護的函數就是閉包；（閉包就是可以讀取其餘函數內部變量的函數。）

因爲在javascript中，只有函數內部的子函數才能讀取局部變量，因此說，閉包能夠簡單理解成「定義在一個函數內部的函數」。因此，在本質上，閉包是將函數內部和函數外部鏈接起來的橋樑。

閉包的用途：一個是前面提到的能夠讀取函數內部的變量，二是讓這些變量的值始終保持在內存中，不會在f1調用後被自動清除。

使用閉包的注意點

（1）因爲閉包會使得函數中的變量都被保存在內存中，內存消耗很大，因此不能濫用閉包，不然會形成網頁的性能問題，在IE中可能致使內存泄露。解決方法是，在退出函數以前，將不使用的局部變量所有刪除。

（2）閉包會在父函數外部，改變父函數內部變量的值。因此，若是你把父函數看成對象（object）使用，把閉包看成它的公用方法（Public Method），把內部變量看成它的私有屬性（private value），這時必定要當心，不要隨便改變父函數內部變量的值。

14、變量提高變量提高即將變量聲明提高到它所在做用域的最開始的部分。

console.log(global); // undefined

var global = 'global';

console.log(global); // global

function fn () {

　　console.log(a); // undefined

　　var a = 'aaa';

　　console.log(a); // aaa

}

fn();

本質代碼以下：

var global; // 變量提高，全局做用域範圍內，此時只是聲明，並無賦值

console.log(global); // undefined

global = 'global'; // 此時才賦值

console.log(global); // 打印出global

function fn () {

　　var a; // 變量提高，函數做用域範圍內

　　console.log(a);

　　a = 'aaa';

　　console.log(a);

}

fn();

15、函數提高

js中建立函數有兩種方式：函數聲明式和函數字面量式。只有函數聲明才存在函數提高！

console.log(f1); // function f1() {}

console.log(f2); // undefined

function f1() {}

var f2 = function() {}

執行以下：

function f1() {} // 函數提高，整個代碼塊提高到文件的最開始<br>　　　　　console.log(f1);

console.log(f2);

var f2 = function() {}

16、經常使用的字符串函數

concat() – 將兩個或多個字符的文本組合起來，返回一個新的字符串。

indexOf() – 返回字符串中一個子串第一處出現的索引。若是沒有匹配項，返回 -1 。

charAt() – 返回指定位置的字符。

lastIndexOf() – 返回字符串中一個子串最後一處出現的索引，若是沒有匹配項，返回 -1 。

match() – 檢查一個字符串是否匹配一個正則表達式。

substr() 函數 -- 返回從string的startPos位置，長度爲length的字符串

substring() – 返回字符串的一個子串。傳入參數是起始位置和結束位置。

slice() – 提取字符串的一部分，並返回一個新字符串。

replace() – 用來查找匹配一個正則表達式的字符串，而後使用新字符串代替匹配的字符串。

search() – 執行一個正則表達式匹配查找。若是查找成功，返回字符串中匹配的索引值。不然返回 -1 。

split() – 經過將字符串劃分紅子串，將一個字符串作成一個字符串數組。

length – 返回字符串的長度，所謂字符串的長度是指其包含的字符的個數。

toLowerCase() – 將整個字符串轉成小寫字母。

toUpperCase() – 將整個字符串轉成大寫字母。

17、經常使用的數組函數

concat() 鏈接兩個或更多的數組，並返回結果。

join() 把數組的全部元素放入一個字符串。元素經過指定的分隔符進行分隔。

pop() 刪除並返回數組的最後一個元素。

shift() 刪除並返回數組的第一個元素

push() 向數組的末尾添加一個或更多元素，並返回新的長度。

unshift() 向數組的開頭添加一個或更多元素，並返回新的長度。

reverse() 顛倒數組中元素的順序。

slice() 從某個已有的數組返回選定的元素

sort() 對數組的元素進行排序

splice() 刪除元素，並向數組添加新元素。

toSource() 返回該對象的源代碼。

toString() 把數組轉換爲字符串，並返回結果。

toLocaleString() 把數組轉換爲本地數組，並返回結果。

valueOf() 返回數組對象的原始值

18、jQuery的事件委託方法bind 、live、delegate、on之間有什麼區別？

<1>、bind 【jQuery 1.3以前】

定義和用法：主要用於給選擇到的元素上綁定特定事件類型的監聽函數；

語法：bind(type,[data],function(eventObject))；

特色：

　　(1)、適用於頁面元素靜態綁定。只能給調用它的時候已經存在的元素綁定事件，不能給將來新增的元素綁定事件。

　　(2)、當頁面加載完的時候，你才能夠進行bind()，因此可能產生效率問題。

實例以下：$( "#members li a" ).bind( "click", function( e ) {} );

<2>、live 【jQuery 1.3以後】

定義和用法：主要用於給選擇到的元素上綁定特定事件類型的監聽函數；

語法：live(type, [data], fn);

特色：

　　(1)、live方法並無將監聽器綁定到本身(this)身上，而是綁定到了this.context上了。

　　(2)、live正是利用了事件委託機制來完成事件的監聽處理，把節點的處理委託給了document，新添加的元素沒必要再綁定一次監聽器。

　　(3)、使用live（）方法但卻只能放在直接選擇的元素後面，不能在層級比較深，連綴的DOM遍歷方法後面使用，即$(「ul」").live...能夠，但$("body").find("ul").live...不行；

實例以下：$( document ).on( "click", "#members li a", function( e ) {} );

<3>、delegate 【jQuery 1.4.2中引入】

定義和用法：將監聽事件綁定在就近的父級元素上

語法：delegate(selector,type,[data],fn)

特色：

　　(1)、選擇就近的父級元素，由於事件能夠更快的冒泡上去，可以在第一時間進行處理。

　　(2)、更精確的小範圍使用事件代理，性能優於.live()。能夠用在動態添加的元素上。

實例以下：

$("#info_table").delegate("td","click",function(){/*顯示更多信息*/});

$("table").find("#info").delegate("td","click",function(){/*顯示更多信息*/});

<4>、on 【1.7版本整合了以前的三種方式的新事件綁定機制】

定義和用法：將監聽事件綁定到指定元素上。

語法：on(type,[selector],[data],fn)

實例以下：$("#info_table").on("click","td",function(){/*顯示更多信息*/});參數的位置寫法與delegate不同。

說明：on方法是當前JQuery推薦使用的事件綁定方法，附加只運行一次就刪除函數的方法是one()。

.bind(), .live(), .delegate(),.on()分別對應的相反事件爲：.unbind(),.die(), .undelegate(),.off()

19、$(document).ready()方法和window.onload有什麼區別？

(1)、window.onload方法是在網頁中全部的元素(包括元素的全部關聯文件)徹底加載到瀏覽器後才執行的。

(2)、$(document).ready() 方法能夠在DOM載入就緒時就對其進行操縱，並調用執行綁定的函數。

20、tap和click事件的區別？

二者都會在點擊時觸發，但在web移動端click會有200-300ms的延時，因此要用tap代替click做爲點擊事件，singleTap和doubleTap分別做爲單次點擊和雙擊，可是使用tap會帶來點透事件(事件穿透)。

21、什麼是跨域？跨域請求資源的方法有哪些？

//什麼是跨域？

因爲瀏覽器同源策略，凡是發送請求url的協議、域名、端口三者之間任意一與當前頁面地址不一樣即爲跨域。存在跨域的狀況：

網絡協議不一樣，如http協議訪問https協議。

端口不一樣，如80端口訪問8080端口。

域名不一樣，如qianduanblog.com訪問baidu.com。

子域名不一樣，如abc.qianduanblog.com訪問def.qianduanblog.com。

域名和域名對應ip,如www.a.com訪問20.205.28.90.

//跨域請求資源的方法：

(1)、porxy代理

定義和用法：proxy代理用於將請求發送給後臺服務器，經過服務器來發送請求，而後將請求的結果傳遞給前端。

實現方法：經過nginx代理；

注意點：1、若是你代理的是https協議的請求，那麼你的proxy首先須要信任該證書（尤爲是自定義證書）或者忽略證書檢查，不然你的請求沒法成功。

(2)、CORS 【Cross-Origin Resource Sharing】

定義和用法：是現代瀏覽器支持跨域資源請求的一種最經常使用的方式。

使用方法：通常須要後端人員在處理請求數據的時候，添加容許跨域的相關操做。以下：

res.writeHead(200, {

"Content-Type": "text/html; charset=UTF-8",

"Access-Control-Allow-Origin":'http://localhost',

'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',

'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'

});

(3)、jsonp

定義和用法：經過動態插入一個script標籤。瀏覽器對script的資源引用沒有同源限制，同時資源加載到頁面後會當即執行（沒有阻塞的狀況下）。

特色：經過狀況下，經過動態建立script來讀取他域的動態資源，獲取的數據通常爲json格式。

實例以下：

function testjsonp(data) {

console.log(data.name); // 獲取返回的結果 }</script>

var _script = document.createElement('script');

_script.type = "text/javascript";

_script.src = "http://localhost:8888/jsonp?callback=testjsonp";

document.head.appendChild(_script);</script>

缺點：

1、這種方式沒法發送post請求（這裏）

2、另外要肯定jsonp的請求是否失敗並不容易，大多數框架的實現都是結合超時時間來斷定。

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

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;

}

console.log('出現次數最多的是:'+iIndex+'出現'+iMax+'次');

23、如何獲取瀏覽器URL查詢字符串中的參數

function showWindowHref(){

var sHref = window.location.href;

var args = sHref.split('?');

if(args[0] == sHref){

return "";

}

var arr = args[1].split('&');

var obj = {};

for(var i = 0;i< arr.length;i++){

var arg = arr[i].split('=');

obj[arg[0]] = arg[1];

}

return obj;

}

var href = showWindowHref(); // obj

console.log(href['name']); // xiaoming

24、數組去重的經常使用方法

//遍歷數組法

Function unique1(array){

Var str1=[];

For(var i=0;i<array.length;i++){

If(str1.indexOf(array[i])==-1){

Str1.push(array[i])

}

Return str1;

}

//先排序相鄰去除法

Function unique2(array){

Array.sort();

Var str2=[array[0]];

For(var i=0;i<array.length;i++){

If(array[i]!==str2[str2.length-1]){

Str2.push(array[i])

}

Return str2;

}

//對象鍵值對法

Function unique3(array){

Var obj={},str3=[];

For(var i=0;i<array.length;i++){

If(!obj[array[i]]){

Str3.push(array[i]);

Obj[array[i]]=1;

}

Return str3;

}

25、克隆函數

Function clone(obj){

Var o;

Switch(typeOf obj){

Case 「undefined」:

Break;

Case 「string」:o=obj+」」;

Break;

Case 「number」:o=obj-0;

Break;

Case 「boolean」:o=obj;

Break;

Case 「object」:

If(obj===null){

o=null;

}else {

If(Object.prototype.toString.call(obj).slice(8,-1)===」Array」){

O=[];

For(var i=0;i<obj.length;i++){

O.push(clone(obj[i]))

}

}else{

O={};

For(var key in obj){

O[key]=clone(obj[key])

}

Break;

Default :o=obj;

Break;

}

Return o;

}

26、排序算法

//1、冒泡排序
function subSort(arr1){
    for(var i=0;i<arr1.length;i++){
        for(var j=0;j<arr1.length-1-i;j++){
            if(arr1[j]>arr1[j+1]){//相鄰元素對比
                var temp=arr1[j+1];
                arr1[j+1]=arr1[j];
                arr1[j]=temp;
            }
        }
    }
    return arr1;
}
var arr1=[3,5,9,8,11,55,22,44,12,23]
console.log(subSort(arr1))

//2.選擇排序
function selectionSort(arr2){
    var temp,minIndex
    for(var i=0;i<arr2.length-1;i++){
        minIndex=i;
        for(var j=i+1;j<arr2.length;j++){
            if(arr2[j]<arr2[minIndex]){
                minIndex=j
            }
        }
        temp=arr2[i]
        arr2[i]=arr2[minIndex]
        arr2[minIndex]=temp
    }
    return arr2
}
var arr2=[3,44,38,5,47,15,36,26,27,2,46,4,19,50,48];
console.log(selectionSort(arr2));

//3.插入排序
function insertionSort(array) {
    for (var i = 1; i < array.length; i++) {
        var key = array[i];
        var j = i - 1;
        while ( array[j] > key) {
            array[j + 1] = array[j];
            j--;
        }
        array[j + 1] = key;
    }
    return array;
}
var arr3=[3,44,38,5,47,15,36,26,27,2,46,4,19,50,48];
console.log(insertionSort(arr3));

27、JavaScript兩個變量交換值的實現方法

//1.普通作法

var a=1,b=2;

var temp;

temp=a

a=b

b=temp

經過變量temp做爲中間量，將兩個變量值進行交換

//2.算數運算

var a = 1,b = 2;

a = a + b; // a = 3, b = 2

b = a - b; // a = 3, b = 1

a = a - b;// a = 2, b = 1

//3.ES6解構

let a = 1,b = 2;

[a, b] = [b, a];

28、數字轉成大寫：

function intToChinese ( str ) {

str = str+'';

var len = str.length-1;

var idxs = ['','十','百','千','萬','十','百','千','億','十','百','千','萬','十','百','千','億'];

var num = ['零','壹','貳','叄','肆','伍','陸','柒','捌','玖'];

return str.replace(/([1-9]|0+)/g,function( $, $1, idx, full) {

var pos = 0;

if( $1[0] != '0' ){

pos = len-idx;

if( idx == 0 && $1[0] == 1 && idxs[len-idx] == '十'){

return idxs[len-idx];

}

return num[$1[0]] + idxs[len-idx];

} else {

var left = len - idx;

var right = len - idx + $1.length;

if( Math.floor(right/4) - Math.floor(left/4) > 0 ){

pos = left - left%4;

}

if( pos ){

return idxs[pos] + num[$1[0]];

} else if( idx + $1.length >= len ){

return '';

}else {

return num[$1[0]]

}

});

}

29、迴文的判斷？

function isPalindrome(line) {

line += "";

for(var i=0,j=line.length-1;i<j;i++,j--){

if(line.charAt(i) !== line.charAt(j)){

return false;

}

return true;

}

30、判斷郵箱

RegExp(/^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/)

31、駝峯命名與連字符命名的轉換

駝峯轉連字符:

function getKebabCase ( str ) {

var arr = str.split('');

str = arr.map(function ( item ){

if( item.toUpperCase() === item ){

return '-' + item.toLowerCase();

}else{

return item; }

}).join( '' );

return str;

}

console.log( getKebabCase( 'getElementById' ) ); //get-element-by-id

function getKebabCase( str ) {

return str.replace( /[A-Z]/g, function( i ) {

return '-' + i.toLowerCase();

})

}

console.log( getKebabCase( 'getElementById' ) ); //get-element-by-id

轉駝峯

function getCamelCase( str ) {

var arr = str.split( '-' );

return arr.map( function( item, index ) {

if( index === 0 ){

return item;

}else{

return item.charAt(0).toUpperCase() + item.slice( 1 ); }

}).join('');

}

console.log( getCamelCase( 'get-element-by-id' ) ); //getElementById

function getCamelCase( str ) {

return str.replace( /-([a-z])/g,

function( all, i ){

return i.toUpperCase();

} )

}

console.log( getCamelCase( 'get-element-by-id' ) ); //getElementById

3二、js去掉先後字符

function trim(str){

return str.replace(/(^\s*)|(\s*$)/g, "");

}

33、第1我的10，第2個比第1我的大2歲，依次遞推，計算出第8我的多大（遞歸）
function add(n){

var num=10;

for(var i=1;i<n;i++){

num=num+2;

}

return num;

}

console.log(add(8))//26歲

34、實現字符串反轉的方法

var str = "abcdef";

console.log( str.split("").reverse().join("") )；//fedcba

35、js的延遲加載方式

<1>使用setTimeout延遲方法的加載時間

function A(){

$.post("/lord/login",{name:username,pwd:password},function(){

alert("Hello");

});

}

$(function (){

setTimeout('A()', 1000); //延遲1秒

})

</script>

<2><script>標籤訂義defer屬性(HTML4)

<3><script>標籤訂義 async屬性(HTML5)

<4>讓js最後加載

把js外部引入的文件放到頁面底部，來讓js最後引入，從而加快頁面加載速度

<5>使用jQuery的getScript()方法

$.getScript("outer.js",function(){//回調函數，成功獲取文件後執行的函數

console.log("腳本加載完成")

});

3六、JavaScript常見的內置對象

Object,Math,String,Array,Number,Function,Boolean,JSON

3七、JS的事件冒泡和事件捕獲

事件捕獲指的是從document到觸發事件的那個節點，即自上而下的去觸發事件。相反的，事件冒泡是自下而上的去觸發事件。綁定事件方法的第三個參數，就是控制事件觸發順序是否爲事件捕獲。true,事件捕獲；false,事件冒泡。默認false,即事件冒泡。Jquery的e.stopPropagation會阻止冒泡，意思就是到我爲止，個人爹和祖宗的事件就不要觸發了。

</div>

document.getElementById("parent").addEventListener("click",function(e){

alert("parent事件被觸發，"+this.id);

}) document.getElementById("child").addEventListener("click",function(e){

alert("child事件被觸發，"+this.id)

})

結果：（先child，而後parent。事件的觸發順序自內向外，這就是事件冒泡。）

child事件被觸發，child

parent事件被觸發，parent

如今改變第三個參數的值爲true，意思爲事件捕獲

結果：（先parent,而後child。事件觸發順序變動爲自外向內，這就是事件捕獲。）

parent事件被觸發，parent

child事件被觸發，child

3、VUE框架部分

一、v-show指令和v-if指令的區別？

條件渲染指令，與v-if不一樣的是，不管v-show的值爲true或者false，元素都會存在於HTML代碼中，而v-if只有在爲true時纔會在HTML代碼中存在，v-show設置css的style值

二、<style scoped></style>css代碼只在當前組件起做用

三、指令keep-alive含義：在vue-router中寫keep-alive保留狀態，避免從新渲染

四、Vue.js特色：

簡潔：頁面由HTML模板+Json數據+Vue實例組成

數據驅動：自動計算屬性和追蹤依賴的模板表達式

組件化：用可複用、解耦的組件來構造頁面

輕量：代碼量小，不依賴其餘庫

快速：精確有效批量DOM更新

模板友好：可經過npm，bower等多種方式安裝，很容易融入

五、vue的經常使用指令有哪些？

v-if、v-show、v-else、v-for、v-bind、v-on、v-model

8、vuex核心概念？

state => 基本數據
getters => 從基本數據派生的數據
mutations => 提交更改數據的方法，同步！
actions => 像一個裝飾器，包裹mutations，使之能夠異步。
modules => 模塊化Vuex

10、怎麼定義vue-router的動態路由？怎麼獲取傳過來的動態參數？

答：在router目錄下的index.js文件中，對path屬性加上/:id。使用router對象的params.id

11、vue-router有哪幾種導航鉤子？

第一種：是全局導航鉤子：router.beforeEach(to,from,next)，做用：跳轉前進行判斷攔截。

第二種：組件內的鉤子；

第三種：單獨路由獨享組件

12、mint-ui是什麼？怎麼使用？說出至少三個組件使用方法？

答：基於vue的前端組件庫。npm安裝，而後import樣式和js，

vue.use（mintUi）全局引入。在單個組件局部引入：import {Toast} from ‘mint-ui’。

組件一：Toast(‘登陸成功’)；

組件二：mint-header；

組件三：mint-swiper

13、axios是什麼？怎麼使用？描述使用它實現登陸功能的流程？

答：請求後臺資源的模塊。npm install axios -S裝好，

而後發送的是跨域，需在配置文件中config/index.js進行設置。

後臺若是是Tp5則定義一個資源路由。js中使用import進來，

而後.get或.post。返回在.then函數中若是成功，

失敗則是在.catch函數中

14、vuex是什麼？怎麼使用？哪一種功能場景使用它？

答：vue框架中狀態管理。在main.js引入store，注入。

新建了一個目錄store，….. export 。

場景有：單頁應用中，組件之間的狀態。音樂播放、登陸狀態、加入購物車

15、mvvm框架是什麼？它和其它框架（jquery）的區別是什麼？哪些場景適合？

答：一個model+view+viewModel框架，數據模型model，viewModel鏈接兩個

區別：vue數據驅動，經過數據來顯示視圖層而不是節點操做。

場景：數據操做比較多的場景，更加便捷

16、自定義指令（v-check、v-focus）的方法有哪些？它有哪些鉤子函數？還有哪些鉤子函數參數？

答：全局定義指令：在vue對象的directive方法裏面有兩個參數，一個是指令名稱，另一個是函數。組件內定義指令：directives鉤子函數：bind（綁定事件觸發）、inserted(節點插入的時候觸發)、update（組件內相關更新）鉤子函數參數：el、binding

17、說出至少4種vue當中的指令和它的用法？

答：v-if：判斷是否隱藏；v-for：數據循環出來；v-bind:class：綁定一個屬性；v-model：實現雙向綁定

18、Vue的雙向數據綁定原理是什麼？

答：vue.js 是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。

具體步驟：

第一步：須要observe的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上 setter和getter

這樣的話，給這個對象的某個值賦值，就會觸發setter，那麼就能監聽到了數據變化

第二步：compile解析模板指令，將模板中的變量替換成數據，而後初始化渲染頁面視圖，並將每一個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變更，收到通知，更新視圖

第三步：Watcher訂閱者是Observer和Compile之間通訊的橋樑，主要作的事情是:1、在自身實例化時往屬性訂閱器(dep)裏面添加本身2、自身必須有一個update()方法3、待屬性變更dep.notice()通知時，能調用自身的update()方法，並觸發Compile中綁定的回調，則功成身退。

第四步：MVVM做爲數據綁定的入口，整合Observer、Compile和Watcher三者，經過Observer來監聽本身的model數據變化，經過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通訊橋樑，達到數據變化 -> 視圖更新；視圖交互變化(input) -> 數據model變動的雙向綁定效果。

19、請詳細說下你對vue生命週期的理解？

答：總共分爲8個階段建立前/後，載入前/後，更新前/後，銷燬前/後。

建立前/後：在beforeCreated階段，vue實例的掛載元素$el和數據對象data都爲undefined，還未初始化。在created階段，vue實例的數據對象data有了，$el尚未。

載入前/後：在beforeMount階段，vue實例的$el和data都初始化了，但仍是掛載以前爲虛擬的dom節點，data.message還未替換。在mounted階段，vue實例掛載完成，data.message成功渲染。

更新前/後：當data變化時，會觸發beforeUpdate和updated方法。

銷燬前/後：在執行destroy方法後，對data的改變不會再觸發周期函數，說明此時vue實例已經解除了事件監聽以及和dom的綁定，可是dom結構依然存在

20、請說下封裝 vue 組件的過程？

答：首先，組件能夠提高整個項目的開發效率。可以把頁面抽象成多個相對獨立的模塊，解決了咱們傳統項目開發：效率低、難維護、複用性等問題。

而後，使用Vue.extend方法建立一個組件，而後使用Vue.component方法註冊組件。子組件須要數據，能夠在props中接受定義。而子組件修改好數據後，想把數據傳遞給父組件。能夠採用emit方法。

21、vue-loader是什麼？使用它的用途有哪些？

答：解析.vue文件的一個加載器，跟template/js/style轉換成js模塊。

用途：js能夠寫es6、style樣式能夠scss或less、template能夠加jade等

22、請說出vue.cli項目中src目錄每一個文件夾和文件的用法？

答：assets文件夾是放靜態資源；components是放組件；router是定義路由相關的配置;view視圖；app.vue是一個應用主組件；main.js是入口文件

23、聊聊你對Vue.js的template編譯的理解？

答：簡而言之，就是先轉化成AST樹，再獲得的render函數返回VNode（Vue的虛擬DOM節點）

詳情步驟：

首先，經過compile編譯器把template編譯成AST語法樹（abstract syntax tree 即源代碼的抽象語法結構的樹狀表現形式），compile是createCompiler的返回值，createCompiler是用以建立編譯器的。另外compile還負責合併option。

而後，AST會通過generate（將AST語法樹轉化成render funtion字符串的過程）獲得render函數，render的返回值是VNode，VNode是Vue的虛擬DOM節點，裏面有（標籤名、子節點、文本等等）

24、vue的組件是怎麼定義的？父組件怎麼給子組件傳值？

答：首先註冊vue.components，第一個參數是組件名稱，第二個參數是選項。

直接綁定一個屬性，而後在子組件props裏面接收

27、說下你對mvvm的理解？雙向綁定的理解?

答：mvvm就是vm框架視圖、m模型就是用來定義驅動的數據、v通過數據改變後的html、vm就是用來實現雙向綁定

雙向綁定:一個變了另一個跟着變了，例如：視圖一個綁定了模型的節點有變化，模型對應的值會跟着變

25、請說下具體使用vue的理解？

1、使用vue沒必要擔憂佈局更改和類名重複致使的js重寫，由於它是靠數據驅動雙向綁定，底層是經過Object.defineProperty() 定義的數據 set、get 函數原理實現。2、組件化開發，讓項目的可拓展性、移植性更好，代碼重用性更高，就好像農民工建房子，拿起本身的工具包就能夠開工。項目經理坐等收樓就好。3、單頁應用的體驗零距離接觸安卓原生應用，局部組件更新界面，讓用戶體驗更快速省時。4、js的代碼無形的規範，團隊合做開發代碼可閱讀性更高。

26、你以爲哪些項目適合vue框架？

答：1、數據信息量比較多的，反之相似企業網站就無需此框架了。2、手機web和app應用多端共用一套界面的項目，由於使用vue.cli+webpack後的前端目錄，很是有利於項目的跨平臺部署。

27、怎麼理解MVVM模式的這些框架？

答：1、M就是Model模型層，存的一個數據對象。2、V就是View視圖層，全部的html節點在這一層。3、VM就是ViewModel，它經過data屬性鏈接Model模型層，經過el屬性鏈接View視圖層。
28、vuex有哪幾種屬性？

答：有五種，分別是 State、 Getter、Mutation 、Action、 Module

29、vuex的State特性是？

1、Vuex就是一個倉庫，倉庫裏面放了不少對象。其中state就是數據源存放地，對應於與通常Vue對象裏面的data

2、state裏面存放的數據是響應式的，Vue組件從store中讀取數據，如果store中的數據發生改變，依賴這個數據的組件也會發生更新

3、它經過mapState把全局的 state 和 getters 映射到當前組件的 computed 計算屬性中

30、vuex的Getter特性是？

1、getters 能夠對State進行計算操做，它就是Store的計算屬性

2、雖然在組件內也能夠作計算屬性，可是getters 能夠在多組件之間複用

3、若是一個狀態只在一個組件內使用，是能夠不用getters

31、vuex的Mutation特性是？

1、Action 相似於 mutation，不一樣在於：

2、Action 提交的是 mutation，而不是直接變動狀態。

3、Action 能夠包含任意異步操做

32、Vue.js中ajax請求代碼應該寫在組件的methods中仍是vuex的actions中？

1>若是請求來的數據是否是要被其餘組件公用，僅僅在請求的組件內使用，就不須要放入vuex 的state裏。

2>若是被其餘地方複用，這個很大概率上是須要的，若是須要，請將請求放入action裏，方便複用，幷包裝成promise返回，在調用處用async await處理返回的數據。若是不要複用這個請求，那麼直接寫在vue文件裏很方便。

33、不用Vuex會帶來什麼問題？

1、可維護性會降低，你要想修改數據，你得維護三個地方

2、可讀性會降低，由於一個組件裏的數據，你根本就看不出來是從哪來的

3、增長耦合，大量的上傳派發，會讓耦合性大大的增長，原本Vue用Component就是爲了減小耦合，如今這麼用，和組件化的初衷相背。

34、第一次頁面加載會觸發哪幾個鉤子？

答：第一次頁面加載時會觸發 beforeCreate, created, beforeMount, mounted 這幾個鉤子

35、簡單描述每一個週期具體適合哪些場景？

答：生命週期鉤子的一些使用方法： beforecreate : 能夠在這加個loading事件，在加載實例時觸發 created : 初始化完成時的事件寫在這裏，如在這結束loading事件，異步請求也適宜在這裏調用 mounted : 掛載元素，獲取到DOM節點 updated : 若是對數據統一處理，在這裏寫上相應函數 beforeDestroy : 能夠作一個確認中止事件的確認框 nextTick : 更新數據後當即操做dom
36、axios的特色有哪些？