面試題總結

1. vue的雙向綁定道理：

vue的雙向綁定道理是經由過程Object.definedProperty的getter和setter來對屬性舉行數據挾制的。

由於Object.definedProperty最低是支撐到瀏覽器IE9的，所以假如想要兼容IE8，只能去做Object.definedProperty的兼容，那終究運用的是做的兼容，而不是Object.definedProperty.

找了一張圖片來示意相應道理。起首Object.definedProperty會對data的每一個屬性舉行數據的挾制，當我們把data屬性的值改了，就會觸發它的setter，然後關照到watcher，watcher再更新指令所綁定的屬性的值。

• 經由過程Observer對data做監聽，並供應了定閱某個數據項變化的才
• 把template編譯成一段document fragment,然後剖析个中的Directive,獲得每一個Directive所依靠的數據項和update要領。
• 經由過程Watcher把上述2部份結合起來，即把Directive中的數據依靠經由過程Watcher定閱在對應數據的Observer的Dep上，當數據變化時，

就會觸發Observer的Dep上的notify要領關照對應的Watcher的update,進而觸發Directive的update要領來更新dom視圖，末了到達模子和視圖關聯起來。

2. vue的鈎子函數：

依次為：beforeCreate ==> created ==> beforeMount ==> mounted ==> beforeUpdate ==> updated ==> beforeDestroy ==> destroyed
初始化的時刻只需一次，只需當數據更改的時刻才會去觸發update鈎子

3. vue的method,computed,watch的區分：

computed是對效果舉行緩存的，只需依靠的值沒有變化，效果就不會變化。method就是平常的要領。computed削減實行的getter減去了反覆盤算，節約內存。watch是一向在監聽。比方this.num + new Date(),雖然new Date的值一向在變，但只需this.num沒變，效果照樣一樣的。

4. flex做骰子的3點：

html:


5. css的偽類：

:first-child/:last-children //挑選第一個孩子，:nth-of-type(n)
:checked/:disabled //挑選checkbox已選中的
:afeter/:before //標籤的偽類
:not(selecter) //非元素的別的元素


6. 三行文本垂直居中：

1.加高低一樣的padding值，到達高低居中的目標。
2.應用table

3.{position:relative;top:50%;transform:translateY(-50%)}
4.經由過程box:

5.flex:

7. 跨域的要領：

瀏覽器為了平安機制，採納同源戰略，域名，協定，端口號一致的才夠舉行接見;

1，jsonp:是經由過程script標籤的src屬性來完成跨域的。經由過程src傳過去一個函數，把數據放在函數的實參挪用就能夠拿到數據。由因而用src的鏈接，所以jsonp只支撐get體式格局。content-type:Javascript
2，cors:轉變要求頭信息。客戶端加：Origin:地點。效勞器：Access-Control-Allow-Origin:地點.支撐IE10以上。
3，webpack:devServer里設置proxy:{api:'地點'};
4，nginx反向代辦：

nginx.conf
upstream tomcatserver{
server 192.168.72.49:8081//3.找到代辦效勞器的ip地點舉行要求
}
server{
listen 80;
server_name 8081.max.com;//1.客戶端挪用名 location / {
proxy_pass http://tomcatserver;//2.到代辦效勞器
index index.html index.html;
}
}

8. webpack：

loader和plugins的區分：loader是擔任剖析代碼的，而且plugins是去做優化，代碼整合之類的。

new ExtractTextPlugin('styles.css')：分開出css零丁打包;

new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
// 該設置假定你引入的 vendor 存在於 node_modules 目次中
return module.context && module.context.indexOf('node_modules') !== -1;
}
})//依靠項不反覆打包，分開模塊

TodoHandler: () => importLazy(import('./components/TodoHandler')),
TodoMenuHandler: () => importLazy(import('./components/TodoMenuHandler')),
TodoMenu: () => importLazy(import('./components/TodoMenu')),
}}>//懶加載

剖析es7用到的babel：babel-core,babel-loader,babel-preset-es2015,babel-preset-stage-2,babe-plugin-transform-runtime,babel-runtime,babel-register.

9. es6的聲明要領,es5:var,function：

var:會存在變量提拔，假如在聲明之前用到會報undefined.
let:不存在變量提拔，假如在聲明之前用到會報錯。暫時性死區。塊級作用域。
const:聲明以後就不能轉變。同上，假如是對象的話，只是指向援用的地點，所以對象內里的值轉變了，是沒有任何迴響反映的。
function:聲明屬於window.function
class:聲明一個類
import:聲明一個援用過來的模塊

10. 機能優化：

緊縮css,js：體積更小，加載速率更快。
css在前，js在後：css在前能夠和dom樹一同合成render樹，js在後不壅塞dom襯着。
削減http要求：http要求須要時候。而且要比及它要求完才實行。要求是異步的，不知道什麼時刻才要求完。
webpack設置：按需加載。星散css。分開依靠，把雷同的依靠只打包到一同，沒必要反覆加載。

11. 異步治理：

promise:promise比及實行完成后返回2種狀況，resolve代表勝利，reject代表失利。
假如有多個異步能夠用promise.all([]).
async await:async聲明一個函數返回一個promise。await比及promise異步實行完畢拿到的一個效果

12. angularJS雙向綁定完成道理：

臟值檢測：angular在scope模子上設置了一個監聽行列，用來監聽數據變化並更新view,每次綁定一個東西到view上時angular就會往$watch行列插進去一條$watch,用來檢測它看管的model里是不是有變化的東西（一個數據一個$watcher，對象會有一個，內里的值還會有，數組中每一個對象也都邑有一個）。這些$watch列表會在$digest輪迴中經由過程一個叫做‘臟值檢測’的順序剖析。
angular對大部份能發生數據更改的事宜舉行封裝（如click,mouse-enter,timeout），在每次事宜發生后，比方更改了scope中的一條數據，angular會自動挪用$digest來觸發一輪$digest輪迴，它會觸發每一個watcher,搜檢scope中的當前model值是不是和上一次盤算獲得的Model值是不是一樣，如差別，對應的回調函數會被實行，挪用該函數的效果，就是view中的表達式內容會被更新。

假如實行了非angular的要領，如setTimeout須要挪用$apply()應用到angular上，它會挪用$rootScope.$digest()。因而，一輪$digest輪迴在$rootScope最先，隨後會接見到一切的children scope中的watchers。

$apply()內里能夠加參數，而且會觸發作用域樹上一切的監控。$digest()只作用在當前作用域和它的子作用域上。

angular效勞:sevicer對象的實例化this.xx=。factory返回一個對象return{a:xx}

13. 在arr=[1,2,4],4之前插進去3

arr.splice(2,0,3)


14. json字符串與json對象的轉換：

在數據傳輸過程當中，json是以文本，即字符串的情勢通報的。而js操縱的是json對象。

轉對象：str.parseJSON(),JSON.parse(str),eval('('+str+')')
轉字符串：obj.toJSONString(),JSON.stringify(obj)

15. requestAnimationFrame和setTimeout/setInterval:

由於js是單線程的，setTimeout/setInterval是在定時器線程，要等主線程走完了，才會實行事宜行列。假如主線程的盤算實行時候太長，那末定時器就要一向等着不能實行，就致使了，動畫卡，或許一下堆在一同實行堆疊過快。
requestAnimationFrame不須要設置時候距離。IE9以下不支撐。cancelAnimationFrame()用來作廢。

16. 原型鏈：

每一個組織函數都有本身的原型對象，用prototype屬性來示意。每一個原型對象都有一個隱式的_proto_屬性指向它父級的原型對象。如:

let a= new A()
a._proto_=A.prototype
a._proto_._proto_=A.prototype._proto_=Object.prototype
a._proto_._proto_._proto_=A.prototype._proto_._proto_=Object.prototype._proto_=null


17. 閉包：

閉包簡樸來講就是函數套函數。我們在函數內聲明的變量叫局部變量，局部變量只能在內里接見，表面是接見不到的。假如我們想接見局部變量就能夠在函數的內部在寫一個函數，依據作用域鏈的準繩就能夠往上找父級的變量。
閉包會致使內存泄漏的題目，處理辦法是用過以後把這個變量清空復原。

18. arguments：

arguments是一個對應於通報給函數的參數的類數組對象。它是一個類似於數組的對象，但還不是數組。
arguments.length:實參長度。arguments.callee.length:形參長度
能夠用[].slice.call(arguments);或Array.from(arguments);[...arguments]

19. get和post：

get平常示意從效勞器獵取數據，post是向效勞器通報數據。
get的體式格局是url，由於在地點欄所以長度有限，而且地點欄的內容能夠看到，所以保密性較差。
而post是放在requst body。對長度沒有限定，保密性也較好。
get平常用於搜刮。post平常用於表單提交。

20.String+Number ：

3 + '3' = 33
undefined + 3 = NaN //undefined為NaN,
null + 3 = 3 //null為空。
'null' + 3 = 'null3'
當有+的時刻會搜檢是不是有範例為string的，假如有就會把別的值也轉化為string花樣舉行字符銜接。假如沒有string,有number，那末會把別的值轉化為number範例的值實行加法運算。

21. 輪迴

for(vari=0,j=0;i<5,j<10;i++,j++){}
console.log(i+j) //20

22. 給數組加一個數組去重的要領：


Array.prototype.q=function(arr){
let obj={},a=[];
for(let i=0;i if(!obj[arr[i]]){
obj[arr[i]]=true;
a.push(arr[i])
}
}
return a;
}
let arr=[3,4,4,5,6,7,72,4,3];
console.log(Array.q(a));

23. 類的繼續：

es6:extends


es5:
1.組織函數綁定：

function Cat(name,color){
Animal.apply(this,arguments);
this.name=name;
this.color=color;
}

2.應用prototype:

function Cat(name,color){
this.name=name;
this.color=color;
}
Cat.prototype=new Animal();
Cat.prototype.cOnstructor=Cat;

3.組合繼續：

function Cat(){
Animal.call(this)
}
Cat.prototype=new Animal();

4.經由過程空對象：

function extend(Child,Parent){
var F=function(){};
F.prototype=Parent.prototype; Child.prototype=new F();
Child.prototype.cOnstructor=Child;
}
function Animal(){}
Animal.prototype.species='動物';
function Cat(name){
this.name=name;
}
extend(Cat,Animal)

5.拷貝繼續：

function extend2(Child,Parent){
var p=Parent.prototype;
var c=Child.prototype; for(var i in p){ //淺拷貝
c[i]=p[i]
}
}
extend2(Cat,Animal)

24. map和forEach的區分：

forEach不能breack,也不能return.
map輪迴每一個的時刻就相當於在內存中新建了一個數據，比較占內存

25. 獵取url地點：

window.location.href


26. async的優點：

最最先的異步都是用回調函數處理的，比方ajax,setTimeout,addEventListener.然則假如回調函數過量就會構成回調地獄。那末promise就是為處理這一題目的。promise能夠用鏈式寫法比及異步有效果再舉行下一步。但假如promise寫多了也會變的不直觀，async的await比及promise的返回。能夠讓代碼看起來越發簡約高效。

27. 解構出a.b.c的值：

let obj={a:{b:{c:1}}}
let {a:{b:{c}}}=obj
console.log(c) //1

28.react的生命周期：

29. angular與vue的對照：

30. 盤算數組中元素湧現的次數：

請輸入代碼