1、JS的數(shù)據(jù)類型只有浮點型今艺，沒有整型摔笤。
null,underfined,boolean,number,string,symbol
typeof對于基本數(shù)據(jù)類型会油，除了null都能正常表達(dá)其類型。
2贾费、隱式類型轉(zhuǎn)換
underfined,null,false,NaN,'',0 為false
其它為true
3枚碗、調(diào)用new 操作執(zhí)行哪些步驟：
1.新生成了一個對象，
2.鏈接到原型
3.綁定this
4.返回新對象
4铸本、實例對象和構(gòu)造函數(shù)之間的關(guān)系肮雨？
構(gòu)造函數(shù)實例化產(chǎn)生實例
1.實例對象：
實例對象中只有proto屬性，所有的實例都指向自己構(gòu)造函數(shù)的原型箱玷。proto屬性里面有構(gòu)造器construction和proto怨规。
構(gòu)造器指向原型所屬的構(gòu)造函數(shù)陌宿，proto屬性指向Object的原型。
2.構(gòu)造函數(shù)：
構(gòu)造函數(shù)里面有倆個屬性proto和prototype屬性波丰，原型屬性prototype本質(zhì)上該屬性就是對象（Object的實例對象）壳坪。proto指向Function。
5掰烟、如何判斷對象是不是這個數(shù)據(jù)類型
1.通過構(gòu)造器的方式爽蝴，實例對象的構(gòu)造器constructor==構(gòu)造函數(shù)名字
2.instanceof構(gòu)造函數(shù)的名字(instanceof可以正確的判斷對象的類型，因為內(nèi)部機(jī)制是通過判斷對象的原型鏈中是不是能找到類型的 prototype)
6纫骑、原型的作用：
1.解決數(shù)據(jù)共享蝎亚，節(jié)省內(nèi)存空間
2.不需要共享的函數(shù)寫在構(gòu)造函數(shù)里，需要共享的數(shù)據(jù)寫在原型里(感覺像廢話)
7先馆、閉包方面发框，為什么函數(shù)A已經(jīng)彈棧了，為什么函數(shù)B還能引用函數(shù)A中的變量煤墙？
答：因為函數(shù)A中的變量這時候已經(jīng)存儲在堆中梅惯，現(xiàn)在JS引擎可以通過逃逸分析辨別出哪些變量需要存儲在堆上，哪些需要存儲在棧上仿野。
*閉包的常用場景：輪播圖铣减、模塊就是閉包
8、CommonJS和ES6中的模塊化的兩者區(qū)別：
1.前者支持動態(tài)導(dǎo)入脚作，也就是 require(${path}/xx.js)葫哗，后者目前不支持，但是已有提案
2.前者是同步導(dǎo)入鳖枕，因為用于服務(wù)端魄梯，文件都在本地桨螺，同步導(dǎo)入即使卡住主線程影響也不大宾符。而后者是異步導(dǎo)入，因為用于瀏覽器灭翔，需要下載文件魏烫，如果也采用導(dǎo)入會對渲染有很大影響
3.前者在導(dǎo)出時都是值拷貝，就算導(dǎo)出的值變了肝箱，導(dǎo)入的值也不會改變哄褒，所以如果想更新值，必須重新導(dǎo)入一次煌张。但是后者采用實時綁定的方式呐赡，導(dǎo)入導(dǎo)出的值都指向同一個內(nèi)存地址，所以導(dǎo)入值會跟隨導(dǎo)出值變化
4.后者會編譯成 require/exports 來執(zhí)行的

9骏融、函數(shù)防抖：
1.如果在頻繁的事件回調(diào)中做復(fù)雜計算链嘀，很有可能導(dǎo)致頁面卡頓萌狂，不如將多次計算合并為一次計算，只在一個精確點做操作怀泊，可以實現(xiàn)一個按鈕的防二次點擊操作茫藏。
2.函數(shù)防抖的實現(xiàn)思路：
一旦我開始一個定時器，只要我定時器還在霹琼，不管你怎么點擊都不會執(zhí)行回調(diào)函數(shù)务傲。一旦定時器結(jié)束并設(shè)置為 null，就可以再次點擊了枣申。
3.函數(shù)節(jié)流：
防抖動和節(jié)流本質(zhì)是不一樣的售葡。防抖動是將多次執(zhí)行變?yōu)樽詈笠淮螆?zhí)行，節(jié)流是將多次執(zhí)行變成每隔一段時間執(zhí)行糯而。
10天通、call,apply,bind區(qū)別：
1.call、apply和bind是Function對象自帶的三個方法熄驼，都是為了改變函數(shù)體內(nèi)部 this 的指向像寒。
2.apply 、 call 瓜贾、bind 三者第一個參數(shù)都是 this 要指向的對象诺祸，也就是想指定的上下文；
3.apply 祭芦、 call 筷笨、bind 三者都可以利用后續(xù)參數(shù)傳參；
4.bind 是返回對應(yīng) 函數(shù)龟劲，便于稍后調(diào)用bind() 方法會創(chuàng)建一個 新函數(shù)胃夏，稱為綁定函數(shù)，當(dāng)調(diào)用這個綁定函數(shù)時昌跌，綁定函數(shù)會以創(chuàng)建它時傳入 bind() 方法的第一個參數(shù) 作為 this仰禀，傳入 bind() 方法的 第二個以及以后的參數(shù)加上綁定函數(shù)運行時本身的參數(shù)按照順序作為原函數(shù)的參數(shù)來調(diào)用原函數(shù)。
5.apply 蚕愤、call 則是立即調(diào)用 答恶。
對于 apply、call 二者而言萍诱，作用完全一樣悬嗓，只是接受 參數(shù) 的方式不太一樣。call 是把參數(shù)按順序傳遞進(jìn)去裕坊，而 apply 則是把參數(shù)放在數(shù)組里包竹。
11、V8 下的垃圾回收機(jī)制：
1.V8 實現(xiàn)了準(zhǔn)確式 GC，GC 算法采用了分代式垃圾回收機(jī)制周瞎。因此悟狱，V8 將內(nèi)存（堆）分為新生代和老生代兩部分。
2.新生代算法：新生代中的對象一般存活時間較短堰氓，使用 Scavenge GC 算法挤渐。
3.老生代算法：老生代中的對象一般存活時間較長且數(shù)量也多，使用了兩個算法双絮，分別是標(biāo)記清除算法和標(biāo)記壓縮算法浴麻。
12、跨域：
1.因為瀏覽器出于安全考慮囤攀，有同源策略软免。也就是說，如果協(xié)議焚挠、域名或者端口有一個不同就是跨域膏萧，Ajax 請求會失敗。
2.JSONP：
JSONP 的原理很簡單蝌衔，就是利用 <script> 標(biāo)簽沒有跨域限制的漏洞榛泛。通過<script> 標(biāo)簽指向一個需要訪問的地址并提供一個回調(diào)函數(shù)來接收數(shù)據(jù)當(dāng)需要通訊時。但是只限于 get 請求噩斟。
3.CORS：
CORS 需要瀏覽器和后端同時支持曹锨。IE 8 和 9 需要通過 XDomainRequest 來實現(xiàn)。瀏覽器會自動進(jìn)行 CORS 通信剃允，實現(xiàn) CORS 通信的關(guān)鍵是后端沛简。只要后端實現(xiàn)了CORS，就實現(xiàn)了跨域斥废。服務(wù)端設(shè)置 Access-Control-Allow-Origin 就可以開啟CORS椒楣。該屬性表示哪些域名可以訪問資源，如果設(shè)置通配符則表示所有網(wǎng)站都可以訪問資源牡肉。
13捧灰、瀏覽器的渲染機(jī)制過程：
1.處理 HTML 并構(gòu)建 DOM 樹。
2.處理 CSS 構(gòu)建 CSSOM 樹荚板。
3.將 DOM 與 CSSOM 合并成一個渲染樹凤壁。
4.根據(jù)渲染樹來布局吩屹，計算每個節(jié)點的位置跪另。
5.調(diào)用 GPU 繪制，合成圖層煤搜，顯示在屏幕上
14免绿、重繪和回流：
1.重繪和回流是渲染步驟中的一小節(jié)，但是這兩個步驟對于性能影響很大擦盾；
2.重繪是當(dāng)節(jié)點需要更改外觀而不會影響布局的嘲驾，比如改變 color 就叫稱為重繪淌哟；
3.回流是布局或者幾何屬性需要改變就稱為回流；
4.回流必定會發(fā)生重繪辽故，重繪不一定會引發(fā)回流徒仓。回流所需的成本比重繪高的多誊垢，改變深層次的節(jié)點很可能導(dǎo)致父節(jié)點的一系列回流掉弛；
5.很多人不知道的是，重繪和回流其實和 Event loop 有關(guān)喂走；
6.常用優(yōu)化方式：使用 translate 替代 top;不要使用 table 布局; CSS 選擇符從右往左匹配查找殃饿，避免 DOM 深度過深
15、緩存
1.通常瀏覽器緩存策略分為兩種：強(qiáng)緩存和協(xié)商緩存芋肠。
2.在一次js請求中一般會產(chǎn)生cdn緩存乎芳、dns緩存、瀏覽器緩存帖池、服務(wù)器緩存
16奈惑、存儲
cookie，localStorage睡汹，sessionStorage携取，indexDB
*擴(kuò)展indexedDB
{localstorage就是專門為小數(shù)量數(shù)據(jù)設(shè)計的，所以它的api設(shè)計為同步的帮孔。而IndexedDB很適合存儲大量數(shù)據(jù)雷滋，它的API是異步調(diào)用的。IndexedDB使用索引存儲數(shù)據(jù)文兢，各種數(shù)據(jù)庫操作放在事務(wù)中執(zhí)行晤斩。IndexedDB甚至還支持簡單的數(shù)據(jù)類型。IndexedDB比localstorage強(qiáng)大得多姆坚，但它的API也相對復(fù)雜澳泵。對于簡單的數(shù)據(jù)，你應(yīng)該繼續(xù)使用localstorage兼呵，但當(dāng)你希望存儲大量數(shù)據(jù)時兔辅，IndexedDB會明顯的更適合，IndexedDB能提供你更為復(fù)雜的查詢數(shù)據(jù)的方式.}
17击喂、DNS 預(yù)解析
預(yù)解析的方式預(yù)先獲得域名所對應(yīng)的 IP维苔。
<link rel="dns-prefetch" href="http://">
18、預(yù)加載
預(yù)加載其實是聲明式的 fetch 懂昂，強(qiáng)制瀏覽器請求資源介时，并且不會阻塞 onload 事件，可以使用以下代碼開啟預(yù)加載
<link rel="preload" href="http://">
19、預(yù)渲染
可以通過預(yù)渲染將下載的文件預(yù)先在后臺渲染沸柔，可以開啟預(yù)渲染
<link rel="prerender" href="http://">
20循衰、懶執(zhí)行
懶執(zhí)行就是將某些邏輯延遲到使用時再計算。該技術(shù)可以用于首屏優(yōu)化褐澎，對于某些耗時邏輯并不需要在首屏就使用的会钝，就可以使用懶執(zhí)行。懶執(zhí)行需要喚醒工三，一般可以通過定時器或者事件的調(diào)用來喚醒顽素。
21、懶加載
懶加載就是將不關(guān)鍵的資源延后加載徒蟆。
懶加載的原理就是只加載自定義區(qū)域（通常是可視區(qū)域胁出，但也可以是即將進(jìn)入可視區(qū)域）內(nèi)需要加載的東西。對于圖片來說段审，先設(shè)置圖片標(biāo)簽的 src 屬性為一張占位圖全蝶，將真實的圖片資源放入一個自定義屬性中菜循，當(dāng)進(jìn)入自定義區(qū)域時缩功，就將自定義屬性替換為 src 屬性蒲牧，這樣圖片就會去下載資源莹妒，實現(xiàn)了圖片懶加載。懶加載不僅可以用于圖片忌警，也可以使用在別的資源上绰沥。比如進(jìn)入可視區(qū)域才開始播放視頻等等筷转。
22筐喳、關(guān)系型數(shù)據(jù)庫如Mysql催式、Oracle等將數(shù)據(jù)存儲在表中，而非關(guān)系型數(shù)據(jù)庫如Redis避归、MongoDB等將數(shù)據(jù)集作為個體對象存儲荣月。
23、圖片加載優(yōu)化
1.小圖使用 base64 格式
2.將多個圖標(biāo)文件整合到一張圖片(精靈圖)
3.WebP 格式
4.小圖使用PNG,圖標(biāo)使用svg梳毙，照片用jpeg
24哺窄、CDN
靜態(tài)資源盡量使用CDN加載，由于瀏覽器對于單個域名有并發(fā)請求上限账锹，可以考慮使用多個CDN 域名萌业。對于CDN加載靜態(tài)資源需要注意CDN域名要與主站不同，否則每次請求都會帶上主站的Cookie奸柬。
25生年、如何渲染幾萬條數(shù)據(jù)并不卡住界面：
可以使用setInterval和setTimeout、requestAnimationFrame來實現(xiàn)定時分批渲染鸟缕，每16ms刷新一次晶框。
*擴(kuò)展：requestAnimationFrame
{requestAnimationFrame跟setTimeout/setInterval差不多，不過不需要設(shè)置時間間隔懂从，它的時間間隔為最佳刷新頻率16.6ms授段；通過遞歸調(diào)用同一方法來不斷更新畫面以達(dá)到動起來的效果，但它優(yōu)于setTimeout/setInterval的地方在于它是由瀏覽器專門為動畫提供的API番甩，在運行時瀏覽器會自動優(yōu)化方法的調(diào)用侵贵，并且如果頁面不是激活狀態(tài)下的話，動畫會自動暫停缘薛，有效節(jié)省了CPU開銷窍育。}
26、電商網(wǎng)站如何防范跨站請求偽造：
1.Get 請求不對數(shù)據(jù)進(jìn)行修改
2.不讓第三方網(wǎng)站訪問到用戶Cookie
3.阻止第三方網(wǎng)站請求接口
4.請求時附帶驗證信息宴胧，比如驗證碼或者token
27漱抓、前端路由的方式：
1.hash模式，當(dāng)##后面的hash值發(fā)生變化時恕齐，不會向服務(wù)器請求數(shù)據(jù)乞娄，可以通過hashchange事件來監(jiān)聽到URL的變化，從而進(jìn)行跳轉(zhuǎn)頁面显歧。
2.history 模式仪或，History模式是HTML5新推出的功能，沒有#號士骤，比之HashURL 更加美觀范删。
28、Virtual—Dom（虛擬DOM）
操作DOM是很耗費性能的一件事情拷肌，既然如此到旦，我們可以考慮通過JS對象來模擬DOM對象，畢竟操作JS對象比操作DOM省事的多巨缘。
29厢绝、（關(guān)于算法的面試題應(yīng)該歸于擴(kuò)展）時間復(fù)雜度：O(n)
30、樹的遞歸,如何判斷屬性的更改带猴。
1.遍歷舊的屬性列表昔汉，查看每個屬性是否還存在于新的屬性列表中
2.遍歷新的屬性列表，判斷兩個列表中都存在的屬性的值是否有變化
3.在第二步中同時查看是否有屬性不存在與舊的屬性列列表中
31拴清、判斷列表差異算法實現(xiàn)
1.遍歷舊的節(jié)點列表靶病，查看每個節(jié)點是否還存在于新的節(jié)點列表中
2.遍歷新的節(jié)點列表，判斷是否有新的節(jié)點
3.在第二步中同時判斷節(jié)點是否有移
32口予、遍歷子元素打標(biāo)識
1.判斷兩個列表差異
2.給節(jié)點打上標(biāo)
33娄周、渲染差異
1.深度遍歷樹，將需要做變更操作的取出來
2.局部更新DOM
34沪停、Virtual Dom 算法的實現(xiàn)也就是以下三步
1.通過JS來模擬創(chuàng)建DOM對象
2.判斷兩個對象的差異
3.渲染染差
35煤辨、display:none 和 visibility:hidden 的區(qū)別裳涛？
1.display:none 是徹底的消失 不占文檔流 瀏覽器不會解析 會產(chǎn)生回流
2.visibility:hidden 是視覺上的消失 占文檔流 瀏覽器會解析 不會產(chǎn)生回流(重繪)
36、jq中找到所有與元素的同級元素需要用到: $('.box').sibilings()
37众辨、懶加載:
1.原理:現(xiàn)將img標(biāo)簽中的src鏈接設(shè)置為同一張空白圖片端三，將其真正的圖片地址存儲在自定義屬性中(data-src)
2.JS監(jiān)聽該圖片元素進(jìn)入到可視區(qū)域時,將其自定義屬性中的值存儲到src屬性中，達(dá)到懶加載的效果
3.好處:防止頁面一次性向服務(wù)器響應(yīng)大量請求導(dǎo)致服務(wù)器響應(yīng)慢鹃彻，頁面卡頓等問題
38郊闯、狀態(tài)管理:
概念:它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式管理蛛株。
39团赁、什么時候使用vuex?
開發(fā)大型單頁應(yīng)用(Flux 架構(gòu)就像眼鏡：您自會知道什么時候需要它)
40、promise模擬計時器谨履？

let start = new Date();
console.log(`start: ${start}`);
setTimeout(()=>{
console.log('This line will be log in 3 seconds?');
console.log(`end : ${new Date()}`);
}
, 3000);
while (true) {
if ((+start + 5000) < +new Date()) {
return;
}
}

41欢摄、promise回調(diào)并發(fā)?
1.回調(diào)并發(fā):又叫回調(diào)地獄,異步調(diào)用一般分為兩個階段,提交請求和處理結(jié)果,這兩個階段之間有時間循環(huán)的調(diào)用,它們屬于兩個不同的事件循環(huán),彼此沒有關(guān)聯(lián)
2.異步調(diào)用一般以傳入callback的方式來指定異步操作完成后要執(zhí)行的動作。而異步調(diào)用的本體和callback屬于不同的時間循環(huán)
3.處理方法: try...catch語句只能捕獲當(dāng)前事件循環(huán)的異常,對callback無能為力笋粟；也就是說,一旦我們在異步調(diào)用函數(shù)中扔出一個I/O請求,異步調(diào)用函數(shù)立即返回,此時,這個異步調(diào)用的函數(shù)和這個異步I/O請求沒有任何關(guān)系
42剧浸、Ajax處理前后臺交互?

                function ajax(options){
                    //-1 整理options
                    options=options||{};
                    options.data=options.data||{};
                    options.timeout=options.timeout||0;
                    options.type=options.type||'get';
                    
                    //0 整理data
                    var arr=[];
                    for(var key in options.data){
                        arr.push(key+'='+encodeURIComponent(options.data[key]));    
                    }
                    var str=arr.join('&');
                    
                    //1 創(chuàng)建ajax對象
                    if(window.XMLHttpRequest){
                        var oAjax=new XMLHttpRequest();//[object XMLHttpRequest]
                    }else{
                        var oAjax=new ActiveXObject('Microsoft.XMLHTTP')
                    }
                    
                    if(options.type=='get'){
                        //2.
                        oAjax.open('get',options.url+'?'+str,true);
                        //3.
                        oAjax.send();
                    }else{
                        //2.
                        oAjax.open('post',options.url,true);
                        //設(shè)置請求頭
                        oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                        oAjax.send(str);//身子
                    }
                    //3.5   超時
                    if(options.timeout){
                        var timer=setTimeout(function(){
                            alert('超時了');
                            oAjax.abort();//中斷ajax請求    
                        },options.timeout);
                    }
                    //4.
                    oAjax.onreadystatechange=function(){//當(dāng)準(zhǔn)備狀態(tài)改變時
                        if(oAjax.readyState==4){//成功失敗都會有4
                            clearTimeout(timer);
                            if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
                                options.success && options.success(JSON.parse(oAjax.responseText));
                            }else{
                                options.error && options.error(oAjax.status);//http 0
                            }
                        }
                    };
                    
                    
                };
        

43、H5的新增標(biāo)簽? css3的新特性?
H5: <header> <section> <article> <aside> <mask> <canvas> <footer> <nav>
css3: border-shadow border-image border-radius
background-size background-origin(規(guī)定背景圖片定位區(qū)域)
text-shadow
transform:translate()/rotate()
44矗钟、閉包
定義:閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù),也可以說是一個定義在一個函數(shù)內(nèi)部的函數(shù)
本質(zhì):鏈接函數(shù)內(nèi)部與函數(shù)外部的橋梁
缺點:1.會使函數(shù)內(nèi)部的變量保存在內(nèi)存中,內(nèi)存消耗很大,所以不能濫用
2.閉包會在父函數(shù)的外部,改變父函數(shù)內(nèi)部變量的值
45唆香、跨域問題？
含義:同協(xié)議,同域名,同端口,有一個不滿足都存在跨域問題
解決辦法:Jsonp Ajax CORS Nginx反向代理 后臺用SpringMVC
46吨艇、ES6的新特性?
引入了塊級作用域 {}
const命令 用來定義常量
解構(gòu)賦值 let [a,b,c] = [1,2,3]
箭頭函數(shù) ()=>{}
數(shù)組的擴(kuò)展 [...arr1]
Symbol函數(shù) 具有唯一性
set/map遍歷
Promise---異步
class類
47躬它、箭頭函數(shù)與普通函數(shù)this的指向問題?
普通函數(shù)：this總是代表它的直接調(diào)用者 obj.fun ---> obj
在默認(rèn)情況下，沒有直接調(diào)用者, 指向window
在嚴(yán)格模式下,沒有直接調(diào)用者,指向undefine
使用call,apply,bind,this指向綁定的對象
箭頭函數(shù): 默認(rèn)指向定義它時,它所處的對象,而不是執(zhí)行時的對象 定義它的時候东涡，可能環(huán)境處于window(即繼承父級的this)
48冯吓、vuex的雙向綁定原理?
采用了數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式,通過Object.defineProperty()來劫持各個屬性是setter,getter,在數(shù)據(jù)變動時發(fā)布消息給訂閱者并觸發(fā)相應(yīng)的監(jiān)聽回調(diào)
49、在網(wǎng)頁中會引用那些常見的靜態(tài)資源?
JS
.js .jsx .coffee .ts
CSS
.css .scss .less .stylus
Image
.jpg .png .gif .bmp .svg .ttf .webp
字體文件
.svg .btf .eot .woff .woff2
模板文件
.ejs .jade .vue(webpack定義組件的方式)
50疮跑、過多的靜態(tài)資源對頁面有什么影響?
問題：頁面加載速度過慢, 因為我們會多次發(fā)送二次請求
要處理錯綜復(fù)雜的依賴關(guān)系
解決方法：合并 壓縮 精靈圖 圖片base64編碼 使用webpack
51组贺、節(jié)點綁定失效: 那就在事件綁定之前,給該節(jié)點的父節(jié)點綁定事件
52、生命周期函數(shù):
Vue: 初始化: beforeCreate created(獲取數(shù)據(jù)) beforeMount Mounted(獲取節(jié)點)
進(jìn)行中: beforeUpdata upDated
銷 毀: beforeDistory Distoryed
React: 初始化: getDefaultProps getInitialState componentWillMount(獲取數(shù)據(jù)) render(渲染虛擬DOM) componentDidMount
進(jìn)行中: componentWillReceiveProps shouldComponentUpdate componentWillUpdate render componentDidUpdate
卸 載: componentWillUnmount
53祖娘、前端性能的優(yōu)化:
減少http請求的次數(shù)
將樣式表放在頂部
將腳本放在底部
避免css表達(dá)式
使用外部Js以及css
減少DNS查找
精簡js
使ajax可緩存
54失尖、本地對象、內(nèi)置對象渐苏、宿主對象?
本地對象: arrary object 等可以new實例化的
內(nèi)置對象: gload math 等不可以實例化的
宿主對象: window document 等瀏覽器自帶的
55掀潮、vue組件之間的信息傳遞?
父 ---> 子: 父向子傳遞數(shù)據(jù)是通過props 父組件綁定屬性，子組件props接收
子 ---> 父: 通過綁定方法on 父組件向子組件傳遞方法,子組件用$emit接收可以直接調(diào)用
同級之間的傳遞: 1.使用一個空的vue實例作為中央事件總線
2. 使用vuex
56琼富、vue修改data數(shù)據(jù)并且實時顯示?
1. 首先定義一個變量
2. 給變量賦值
實時顯示: 利用vue.set(data,"改變的屬性名",屬性值val)

        var acticleVal = null;
        
        articleVal = new Vue({
            el:'app',
            data:{
                article:msg
            }
        })

        var datas = [{id:1,book:"活著"},{id:2,book:'小王子'}]
        articleVal.$data.article = datas
        
        <div v-for = 'v in article' :key='v.id'>{v.book}</div>

57仪吧、eval():
主要是計算js字符串,并把它作為腳本來執(zhí)行
58、node.js的使用場景?
RESTFUL API 實時聊天 以及客戶端邏輯強(qiáng)大的單頁app
59鞠眉、call()和apply()的區(qū)別?
call:可以接受多個參數(shù),第一個參數(shù)是this,后面則是一串參數(shù)列表
apply: 最多只能接受兩個參數(shù), 第一個是this,第二個是數(shù)組,所以傳多個參數(shù)的話要放在數(shù)組里
因此 : apply和call的功能是一樣的,只是傳入?yún)?shù)的形式不一樣
60薯鼠、ajax是什么? ajax的交互模型? 同異步的區(qū)別? ajax解決跨域?
1.ajax:是異步的js和xml择诈。通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,ajax可以使頁面實現(xiàn)異步更新。意味著可以不重新加載整個頁面,而對頁面 某部分進(jìn)行更新
2.交互流程: 獲取XMLHttpRequest對象---> open 開啟url通道,設(shè)置異步傳輸 ---> send 發(fā)送數(shù)據(jù) ---> 服務(wù)端接收數(shù)據(jù)并處理并返回結(jié)果 ---> 客戶端接收返回數(shù)據(jù)
3. 同步: 腳本會停留并且等待服務(wù)器發(fā)送恢復(fù)然后在繼續(xù)
異步: 腳本允許頁面繼續(xù)其進(jìn)程并處理可能的回復(fù)
4.ajax解決跨域:

1. web代理 A網(wǎng)站與B網(wǎng)站需建立緊密協(xié)作的關(guān)系出皇，A網(wǎng)站服務(wù)器負(fù)擔(dān)會增加 并且無法帶用戶保存session狀態(tài)
   2. on - Demand方式 通過動態(tài)修改script屬性完成對跨域頁面的調(diào)用
   3. iframe方式
   4. 用戶本地存儲方式
   61羞芍、改變?yōu)g覽器地址，但不發(fā)送請求的兩種方式:
   1.在地址中加#恶迈，用來欺騙瀏覽器 地址的改變值由于正在進(jìn)行頁內(nèi)導(dǎo)航
   2.使用h5中window.history功能,使用url的hash來模擬完整的url

62涩金、虛擬Dom?
用js對象的形式來模擬頁面上DOM嵌套關(guān)系(以js對象的形式存在的)
本質(zhì): 用Js對象谱醇，來模擬DOM元素和嵌套關(guān)系
目的: 為了實現(xiàn)頁面中暇仲，DOM元素的高效更新
63、DOM和虛擬DOM的區(qū)別?
1.DOM: 瀏覽器中,提供的概念,用JS對象,表示頁面上的元素,并提供了操作元素的API
2.虛擬DOM:是框架中的概念,是開發(fā)框架的程序員,手動用JS對象模擬DOM元素和嵌套關(guān)系
64副渴、MVC與MVVM區(qū)別?
1.MVC: 允許在不改變視圖的情況下改變視圖對用戶輸入的響應(yīng)式
2.用戶View操作交給了Controller處理,在Controller中響應(yīng)View的事件調(diào)用Model的接口對數(shù)據(jù)進(jìn)行操作,一旦model變化相關(guān)視圖也會跟著更新
3.MVVM:是"數(shù)據(jù)模型數(shù)據(jù)雙向綁定"的思想為核心,所以view和model之間沒有聯(lián)系奈附，通過ViewModel進(jìn)行交互
4.區(qū)別: mvvm 與mvc 最大的區(qū)別是它實現(xiàn)了view和model的自動同步,也就是當(dāng)model的屬性改變時,我們不用再自己手動操作dom元素,來改變view的顯示,而是改變屬性后該屬性對應(yīng)的View層顯示也會跟著變化
65、vue的理解?
1.Vue.js 不是一個框架 它只聚焦視圖層,是一個構(gòu)建數(shù)據(jù)驅(qū)動的Web界面庫
2.優(yōu)點: 1. 輕量 體積小,不依賴其他的基礎(chǔ)庫
2. 數(shù)據(jù)綁定
3. 指令 類似angular,可以用一些內(nèi)置的簡單指令
4. 插件化 不包括Router,ajax表單驗證,但可方便的加載對應(yīng)插件
67煮剧、框架間的對比?
1.生命周期
2.渲染機(jī)制: vue 用的是基于html語法的模板 允許開發(fā)者聲明式的將Dom綁定到vue的底層實例上
3.核心: Vue.js是一個允許你采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進(jìn)Dom系統(tǒng)里
4.react 是將html語法直接寫在Js語法中, 不加任何引導(dǎo), 這就是JSX語法 允許Html與Js混寫
5.狀態(tài)管理機(jī)制: vue 是用vuex來進(jìn)行狀態(tài)管理的
6.react redux react-redux redux-thunk prop-types
68斥滤、雙向數(shù)據(jù)綁定?
基于ES5中的defineProperty來實現(xiàn)的,支持IE9
69、雙向數(shù)據(jù)流?
js內(nèi)存屬性發(fā)生改變,影響頁面變化
頁面的改變影響js內(nèi)存屬性的改變
70勉盅、react的理解?
react的三個關(guān)鍵字:
1. just the ui 負(fù)責(zé)ui層面的表現(xiàn),它把ui拆分成組件,并且引入了Jsx語法,使它更容易拓展和維護(hù)
2. virtual dom 減少真實dom的操作,提高了性能
3. data flow react的數(shù)據(jù)流是從組件樹從上到下單向流動
4. redux
71佑颇、作用域鏈?
1.作用域: 變量所使用的范圍稱為作用域
2.全局作用域: 定義在函數(shù)外的變量會被保存在全局作用域中，且能夠能夠被其他作用域訪問和修改
3.局部作用域: 聲明在函數(shù)內(nèi), 且變量之間彼此不能訪問
4.作用域鏈: 用于解析變量, 當(dāng)解析一個變量的時候js開始從最內(nèi)層沿著父級尋找所需的變量或其他資源
5.包含自己執(zhí)行環(huán)境以及所有父級環(huán)境中包含的變量
71草娜、json數(shù)據(jù)格式?
1.是前端數(shù)據(jù)交互的常用格式挑胸，一般是數(shù)組格式和對象格式
2.json.parse(轉(zhuǎn)json) json.stringify(轉(zhuǎn)成字符串)
3.eval('('+ data +')')(轉(zhuǎn)成json)
72、動態(tài)創(chuàng)建元素綁定不上事件?
1.dom沒有跟著渲染出來
73宰闰、vuex解決跨域?
1.跨域代理表 proxy
2.找到config文件夾下的index.js配置proxyTable

            proxyTable:{
                '/api':{
                    target:'http://api.xxxxxxxxxx.com',
                    changeOrigin:true,
                    pathRewrite:{
                        '^/api':'/api'
                    }
                }
            }
// 說明配置中target后面的內(nèi)容為后端人員提供的數(shù)據(jù)接口
// 原理類似vpn做了一個中轉(zhuǎn)茬贵，Node替你去接口請求數(shù)據(jù)

3. 調(diào)用

    this.$http.get('/api/login.json').then((data)=>{
        console.log(data)
    })

74、事件委托?
1.把子元素上的事件放在父元素身上稱為事件委托
2.利用事件冒泡原理
75移袍、數(shù)組的常用方法?
1.indexOf() 返回數(shù)組中可以找到一個給定元素的第一個索引,如果不存在,則返回-1
2.join() 將數(shù)組中的所有元素連接到一個字符串中
3.map() 創(chuàng)建一個新數(shù)組,其結(jié)果是該數(shù)組中的每個元素都調(diào)用了一個提供的函數(shù)的后返回的結(jié)果解藻；指"映射",對數(shù)組中的每一項運行給定函數(shù),返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組
4.forEach() 對數(shù)組進(jìn)行遍歷循環(huán),對數(shù)組中的每一項運行給定函數(shù),這個方法沒有返回值。
參數(shù)都是function類型,默認(rèn)有傳參,參數(shù)分別為:遍歷的數(shù)組內(nèi)容;第對應(yīng)的數(shù)組索引,數(shù)組本身
5.reduce() 累加器
6.some() 測試數(shù)組中的某些元素是否通過由提供的函數(shù)實現(xiàn)的測試
7.sort() 當(dāng)?shù)匚恢脤?shù)組元素進(jìn)行排序,并返回數(shù)組
8.slice() 返回一個從開始到結(jié)束(不包括結(jié)束)選擇的數(shù)組的一部分淺拷貝到一個新的數(shù)組中
9.spice() 可以實現(xiàn)刪除插入替換
1.刪除任意數(shù)量的項,只需指定 2 個參數(shù):要刪除的第一項的位置和要刪除的項數(shù)葡盗。
例如,splice(0,2)會刪除數(shù)組中的前兩項
2.可以向指定位置插入任意數(shù)量的項螟左，只需提供 3 個參數(shù)：起始位置、 0（要刪除的項數(shù)）和要插入的項觅够。
例如路狮，splice(2,0,4,6)會從當(dāng)前數(shù)組的位置 2 開始插入4和6。
3.可以向指定位置插入任意數(shù)量的項蔚约，且同時刪除任意數(shù)量的項奄妨，只需指定 3 個參數(shù)：起始位置、要刪除的項數(shù)和要插入的任意數(shù)量的項苹祟。插入的項數(shù)不必與刪除的項數(shù)相等砸抛。
例如评雌，splice (2,1,4,6)會刪除當(dāng)前數(shù)組位置 2 的項，然后再從位置 2 開始插入4和6
76直焙、字符串常用的方法?
1.str.substring(start,end) 兩個參數(shù)都為正數(shù),返回值:[start,end) 也就是說返回從start到end-1的字符
　　 2.str.slice(start,end) 兩個參數(shù)可正可負(fù),負(fù)值代表從右截取,返回值:[start,end) 也就是說返回從start到end-1的字符
3.str.split(separator,limit)參數(shù)1指定字符串或正則景东，參照2指定數(shù)組的最大長度
4.str.replace(rgExp/substr,replaceText) 返回替換后的字符串

Explem:
    1.懶加載
        https://github.com/jirengu-inc/jrg-renwu10/blob/master/homework/%E5%AD%99%E7%BA%A2%E7%85%A7/mission29/demo2.html
    2. 無限加載
        https://github.com/jirengu-inc/jrg-renwu10/blob/master/homework/%E5%AD%99%E7%BA%A2%E7%85%A7/mission29/demo3.html
    3. 置頂
        https://github.com/jirengu-inc/jrg-renwu10/blob/master/homework/%E5%AD%99%E7%BA%A2%E7%85%A7/mission29/demo1.html
        

重點

html-css

1、筆試：
jquery/css3的選擇器
jquery:
元素選擇器:{
("p.intro") 選取所有 class="intro" 的 <p> 元素斤吐。
("[href]") 選取所有帶有 href 屬性的元素厨喂。
("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素。
='.jpg']") 選取所有 href 值以 ".jpg" 結(jié)尾的元素蜕煌。
}

css3:{
派阱。。斜纪。贫母。
}

2、i++ ++i
簡單的理解就是i++是先訪問i然后再自增,而++i 則是先自增然后再訪問i的值盒刚。
表格的事件代理
利用了事件冒泡和目標(biāo)元素的特性腺劣，動態(tài)創(chuàng)建表格
3、margin-top失效問題
問題：當(dāng)兩個空的塊級元素嵌套時因块，如果內(nèi)部的塊設(shè)置有margin-top屬性橘原，而且父元素沒有下邊解決方法所述的特征，那么內(nèi) 部塊的margin-top屬性會綁架父元素（即將margin-top傳遞凌駕給了父元素）贮聂。
就好比一個小兵靠柑，看到上級有漏洞，就假傳圣旨吓懈，利用漏洞擴(kuò)張自己的權(quán)利歼冰。只要設(shè)置父元素的border（柵欄）或者 padding（隔離墻），就能管住這個調(diào)皮的下屬

解決： 1耻警、設(shè)置父元素或者自身的display:inline-block;
2隔嫡、設(shè)置父元素的border:1px aqua solid;(>0)
3、設(shè)置父元素的padding:1px;(>0)
4甘穿、給父元素設(shè)置overflow:hidden;
5腮恩、給父元素或者自身設(shè)置position:absolute;
6、設(shè)置父元素非空温兼，填充一定的內(nèi)容秸滴。

4、pc 瀏覽器的兼容問題
解決：html css(css3低版本不兼容 PIE.htc) js(事件對象 組織瀏覽器的默認(rèn)行文 事件監(jiān)聽等
移動端
解決：meta標(biāo)簽大全
5募判、iframe
iframe標(biāo)簽是框架的一種形式荡含，也比較常用到咒唆，iframe一般用來包含別的頁面，例如我們可以在我們自己 的網(wǎng)站頁面加載別人網(wǎng)站或者本站其他頁面的內(nèi)容释液。iframe標(biāo)簽的最大作用就是讓頁面變得美觀全释。iframe 標(biāo)簽的用法有很多，主要區(qū)別在于對iframe標(biāo)簽定義的形式不同

js

1. this
   this指向： this 指的是當(dāng)前對象误债，如果在全局范圍內(nèi)使用this浸船，則指代當(dāng)前頁面window；如果在函數(shù)中使用 this寝蹈，則this指向根據(jù)當(dāng)前函數(shù)是在什么對象上調(diào)用李命。我們可以使用call和apply改變函數(shù)中 this的具體指向。
2. 閉包躺盛？ 你在哪里使用過閉包项戴？
   答案：輪播圖形帮，雙重嵌套時
3. let var const
   區(qū)別：1. let添加了塊級作用域槽惫；
   2. let約束了變量提升
   3. let有暫時性死區(qū)
   4. let禁止重復(fù)聲明變量
   5. let不會成為全局對象的屬性
   6. 以上let所介紹的規(guī)則均適用于const命令，不同的是辩撑，const聲明的變量不能重新賦值界斜，也是由于這個規(guī)則，const變量聲明時必須初始化合冀，不能留到以后賦值
   4各薇、ajax?
   1.ajax是與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁的藝術(shù)，在不重新加載整個頁面的情況下君躺。
   2.ajax是一種在無需重新加載整個網(wǎng)頁的情況下峭判，能夠更新部分網(wǎng)頁的技術(shù)。
   3.ajax是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)棕叫。通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換林螃。ajax可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下俺泣，對網(wǎng)頁的某部分進(jìn)行更新疗认。而傳統(tǒng)的網(wǎng)頁（不使用ajax）如果需要更新內(nèi)容，必須重載整個網(wǎng)頁面伏钠。
   4.優(yōu)點： 1横漏、最大的一點是頁面無刷新，用戶的體驗非常好
   2熟掂、使用異步方式與服務(wù)器通信缎浇，具有更加迅速的響應(yīng)能力。赴肚。
   3素跺、可以把以前一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端鹏秋，利用客戶端閑置的能力來處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)亡笑，節(jié) 約空間和寬帶租用成本侣夷。并且減輕服務(wù)器的負(fù)擔(dān)，ajax的原則是“按需取數(shù)據(jù)”仑乌，可以最大程度的減少冗余請求百拓， 和響應(yīng)對服務(wù)器造成的負(fù)擔(dān)
   4、基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù)晰甚，不需要下載插件或者小程序衙传。
   5、ajax可使因特網(wǎng)應(yīng)用程序更小厕九、更快蓖捶，更友好
   5.缺點： 1、ajax不支持瀏覽器back按鈕扁远。
   2俊鱼、安全問題 AJAX暴露了與服務(wù)器交互的細(xì)節(jié)。
   3畅买、對搜索引擎的支持比較弱
   4并闲、破壞了程序的異常機(jī)制。
   5谷羞、不容易調(diào)試帝火。
   5、get /post
   1.區(qū)別： 最直觀的區(qū)別就是GET把參數(shù)包含在URL中湃缎，POST通過request body傳遞參數(shù)犀填。
   2.get：一般用來進(jìn)行查詢操作，url地址有長度限制嗓违，請求的參數(shù)都暴露在url地址當(dāng)中九巡，如果傳遞中文參數(shù)， 需要自己進(jìn)行編碼操作靠瞎，安全性較低比庄，
   3.post：一般用來提交數(shù)據(jù)，沒有數(shù)據(jù)的長度限制乏盐，提交的內(nèi)容存在于http請求體中佳窑，數(shù)據(jù)不會暴露在url地址 中
   6、http/https
   區(qū)別： 1父能、https協(xié)議需要到ca申請證書神凑，一般免費證書較少，因而需要一定費用冗锁。
   2疗锐、http是超文本傳輸協(xié)議，信息是明文傳輸阵幸，https則是具有安全性的ssl加密傳輸協(xié)議瓣喊。
   3坡慌、http和https使用的是完全不同的連接方式，用的端口也不一樣藻三，前者是80洪橘，后者是443。
   4棵帽、http的連接很簡單熄求，是無狀態(tài)的；HTTPS協(xié)議是由SSL+HTTP協(xié)議構(gòu)建的可進(jìn)行加密傳輸逗概、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議弟晚，比http協(xié)議安全。
   7逾苫、本地存儲 localStorage 和cookie
   區(qū)別： 1. cookie在瀏覽器和服務(wù)器間來回傳遞卿城。而sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存隶垮。
   2. cookie數(shù)據(jù)還有路徑（path）的概念藻雪，可以限制cookie只屬于某個路徑下秘噪。存儲大小限制也不同狸吞，cookie數(shù)據(jù)不能超過4k，同時因為每次http請求都會攜帶cookie指煎，所以cookie只適合保存很小的數(shù)據(jù)蹋偏，如會話標(biāo)識。sessionStorage和localStorage 雖然也有存儲大小的限制至壤，但比cookie大得多威始，可以達(dá)到5M或更大。
   3. 數(shù)據(jù)有效期不同像街，sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效黎棠，自然也就不可能持久保持；localStorage：始終有效镰绎，窗口或瀏覽器關(guān)閉也一直保存脓斩，因此用作持久數(shù)據(jù)；cookie只在設(shè)置的cookie過期時間之前一直有效畴栖，即使窗口或瀏覽器關(guān)閉随静。
   4. 作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面燎猛；localStorage 在所有同源窗口中都是共享的恋捆；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知機(jī)制重绷，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者沸停。Web Storage 的 api 接口使用更方便。
   8昭卓、面向?qū)ο?br> 繼承 多太 封裝 工廠函數(shù)
   9星立、繼承有哪些方式?
   1.原型鏈繼承：
   核心： 將父類的實例作為子類的原型
   缺點：父類新增原型方法/原型屬性，子類都能訪問到葬凳，父類一變其它的都變了
   2.構(gòu)造繼承：
   核心：使用父類的構(gòu)造函數(shù)來增強(qiáng)子類實例绰垂，等于是復(fù)制父類的實例屬性給子類（沒用到原型）
   缺點：方法都在構(gòu)造函數(shù)中定義， 只能繼承父類的實例屬性和方法火焰，不能繼承原型屬性方法劲装，無法實現(xiàn)函數(shù)復(fù)用，每個子類都有父類實例函數(shù)的副本昌简，影響性能
   3.組合繼承：
   核心：通過調(diào)用父類構(gòu)造占业，繼承父類的屬性并保留傳參的優(yōu)點，然后再通過將父類實例作為子類原型纯赎，實現(xiàn)函數(shù)復(fù)用
   缺點：調(diào)用了兩次父類構(gòu)造函數(shù)谦疾，生成了兩份實例（子類實例將子類原型上的那份屏蔽了）
   4.寄生組合繼承：
   核心：通過寄生方式，砍掉父類的實例屬性犬金，這樣念恍，在調(diào)用兩次父類的構(gòu)造的時候， 就不會初始化兩次實例方法/屬性晚顷，避免的組合繼承的缺點
   缺點：堪稱完美峰伙，但實現(xiàn)較為復(fù)雜
   10、是否使用過php/node.js/java等后臺語言
   1.通信 webSocket
   WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進(jìn)行全雙工通訊的協(xié)議
   WebSocket 使得客戶端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡單该默，允許服務(wù)端主動向客戶端推送數(shù)據(jù)瞳氓。
   在 WebSocket API 中，瀏覽器和服務(wù)器只需要做一個握手的動作栓袖，然后匣摘，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送裹刮。
   Ajax 輪詢這種傳統(tǒng)的模式帶來很明顯的缺點音榜，即瀏覽器需要不斷的向服務(wù)器發(fā)出請求，然而HTTP請求可能包含較長的頭部必指，其中真正有效的數(shù)據(jù)可能只是很小的一部分囊咏，顯然這樣會浪費很多的帶寬等資 源。
   HTML5 定義的 WebSocket 協(xié)議，能更好的節(jié)省服務(wù)器資源和帶寬梅割，并且能夠更實時地進(jìn)行通訊霜第。
   11、h5新增了那些新的特性
   1.標(biāo)簽
   video：表示一段視頻并提供播放的用戶界面
   audio： 表示音頻
   canvas： 表示位圖區(qū)域
   source： 為video和audio提供數(shù)據(jù)源
   track： 為video和audio指定字母
   svg： 定義矢量圖
   code： 代碼段
   figure： 和文檔有關(guān)的圖例
   figcaption： 圖例的說明
   time： 日期和時間值
   mark： 高亮的引用文字
   datalist： 提供給其他控件的預(yù)定義選項
   keygen： 秘鑰對生成器控件
   output：計算值
   progress： 進(jìn)度條
   menu： 菜單
   embed： 嵌入的外部資源
   menuitem： 用戶可點擊的菜單項
   main户辞， template泌类， section， nav底燎， aside刃榨， article， footer双仍， header
   2.屬性
   contenteditable： 規(guī)定是否可編輯元素的內(nèi)容枢希。
   contextmenu： 指定一個元素的上下文菜單。當(dāng)用戶右擊該元素朱沃，出現(xiàn)上下文菜單
   data-*： 用于存儲頁面的自定義數(shù)據(jù)
   draggable： 指定某個元素是否可以拖動
   dropzone： 指定是否將數(shù)據(jù)復(fù)制苞轿，移動，或鏈接逗物，或刪除
   hidden： hidden 屬性規(guī)定對元素進(jìn)行隱藏搬卒。
   spellcheck：檢測元素是否拼寫錯誤
   translate： 指定是否一個元素的值在頁面載入時是否需要翻譯
   本地存儲 localstorage
   Canvas
   HTML5 <canvas> 元素用于圖形的繪制，通過腳本 (通常是JavaScript)來完成.
   <canvas> 標(biāo)簽只是圖形容器翎卓，您必須使用腳本來繪制圖形契邀。
   你可以通過多種方法使用 canvas 繪制路徑,盒、圓失暴、字符以及添加圖像
   12坯门、前端的可視化是否接觸過？
   D3.js Echart.js hchart.js
   13锐帜、去重的方式
   1.雙重的遍歷（ IndexOf ）
   indexOf() 方法可返回數(shù)組中某個指定的元素位置田盈。
   該方法將從頭到尾地檢索數(shù)組，看它是否含有對應(yīng)的元素缴阎。開始檢索的位置在數(shù)組 start 處或數(shù)組的開頭（沒有指定 start 參數(shù)時）。如果找到一個 item简软，則返回 item 的第一次出現(xiàn)的位置蛮拔。開始位置的索引為 0。
   如果在數(shù)組中沒找到指定元素則返回 -1痹升。
   利用indexOf()方法查詢遍歷出的數(shù)組在新數(shù)組中是否出現(xiàn),如果出現(xiàn):則繼續(xù)遍歷數(shù)組,如未出現(xiàn):則利用push方法添加到新數(shù)組中.
   2. 利用對象的屬性唯一性
      14建炫、排序
      快速排序
      冒泡排序
      es6 set
      sort
      15、深拷貝 和 淺拷貝
      值得拷貝和址的傳遞
      16疼蛾、json/ xml
      xml：擴(kuò)展標(biāo)記語言 (Extensible Markup Language, XML) 肛跌，用于標(biāo)記電子文件使其具有結(jié)構(gòu)性的標(biāo)記語言，可以用來標(biāo)記數(shù)據(jù)、定義數(shù)據(jù)類型衍慎，是一種允許用戶對自己的標(biāo)記語言進(jìn)行定義的源語言XML使用DTD(document type definition)文檔類型定義來組織數(shù)據(jù);格式統(tǒng)一转唉，跨平臺和語言
      json： JSON(JavaScript Object Notation)一種輕量級的數(shù)據(jù)交換格式，具有良好的可讀和便于快速編寫的特性稳捆≡ǎ可在不同平臺之間進(jìn)行數(shù)據(jù)交換。JSON采用兼容性很高的乔夯、完全獨立于語言文本格式砖织，同時也具備類似于C語言的習(xí)慣(包括C, C++, C#, Java, JavaScript, Perl, Python等)體系的行為。這些特性使JSON成為理想的數(shù)據(jù)交換語言末荐。

node.js

17侧纯、前端的模塊化
1.AMD require.js
AMD是"Asynchronous Module Definition"的縮寫，意思就是"異步模塊定義"甲脏。它采用異步方式加載模塊茂蚓，模塊的加載不影響它后面語句的運行。所有依賴這個模塊的語句剃幌，都定義在一個回調(diào)函數(shù)中聋涨，等到加載完成之后，這個回調(diào)函數(shù)才會運行负乡。
2.CMD sea.js
SeaJS要解決的問題和requireJS一樣牍白，只不過在模塊定義方式和模塊加載（可以說運行、解析）時機(jī)上有所不同
3.Common.js
CommonJs規(guī)范的出發(fā)點：JS沒有模塊系統(tǒng)抖棘、標(biāo)準(zhǔn)庫較少茂腥、缺乏包管理工具；為了讓JS可以在任何地方運行切省，以達(dá)到Java最岗、C#、PHP這些后臺語言具備開發(fā)大型應(yīng)用的能力朝捆；
為什么要有模塊化的概念出現(xiàn)
1.命名空間
多個模塊之間的多重依賴關(guān)系
代碼組織
2.node
內(nèi)置的模塊
第三方的模塊
自定義模塊
18般渡、前端的五大異步流程工具
一、Promise
從語法上講芙盘，promise是一個對象驯用，從它可以獲取異步操作的消息；從本意上講儒老，它是承諾蝴乔，承諾它過一段時間會給你一個結(jié)果。promise有三種狀態(tài)：pending(等待態(tài))驮樊，fulfiled(成功態(tài))薇正，rejected(失敗態(tài))片酝；狀態(tài)一旦改變，就不會再變挖腰。創(chuàng)造promise實例后雕沿，它會立即執(zhí)行。
1.Promise.all：
Promise.all可以將多個Promise實例包裝成一個新的Promise實例曙聂。同時晦炊，成功和失敗的返回值是不同的，成功的時候返回的是一個結(jié)果數(shù)組宁脊，而失敗的時候則返回最先被reject失敗狀態(tài)的值断国。
2.Promise.race：
顧名思義，Promse.race就是賽跑的意思榆苞，意思就是說稳衬，Promise.race([p1, p2, p3])里面哪個結(jié)果獲得的快，就返回那個結(jié)果坐漏，不管結(jié)果本身是成功狀態(tài)還是失敗狀態(tài)
二薄疚、es6 generator函數(shù)
Generator函數(shù)是ES6引入的新型函數(shù)，用于異步編程赊琳，跟Promise對象聯(lián)合使用的話會極大降低異步編程的編寫難度和閱讀難度
Generator函數(shù)跟普通函數(shù)的寫法有非常大的區(qū)別：
一是街夭，function關(guān)鍵字與函數(shù)名之間有一個星號；
二是躏筏，函數(shù)體內(nèi)部使用yield語句板丽，定義不同的內(nèi)部狀態(tài)（yield在英語里的意思就是“產(chǎn)出”）
三、node/vue nextTick()
nextTick是全局vue的一個函數(shù)趁尼，在vue系統(tǒng)中埃碱，用于處理dom更新的操作。
如果想在DOM狀態(tài)更新后做點什么酥泞，則需要用到nextTick砚殿。
四、async 函數(shù)中 await
function aa(){console.log('aa')}
const async = () => { await aa() console.log(1)}
五芝囤、async.js
async模塊是為了解決嵌套金字塔,和異步流程控制而生. async 函數(shù)就是 Generator 函數(shù)的語法糖似炎。
優(yōu)點： （1）內(nèi)置執(zhí)行器。 Generator 函數(shù)的執(zhí)行必須靠執(zhí)行器凡人，所以才有了 co 函數(shù)庫名党，而 async 函數(shù)自帶執(zhí)行器。也就是說挠轴，async 函數(shù)的執(zhí)行，與普通函數(shù)一模一樣耳幢，只要一行岸晦。
（2）更好的語義欧啤。 async 和 await，比起星號和 yield启上，語義更清楚了邢隧。async 表示函數(shù)里有異步操作，await表示緊跟在后面的表達(dá)式需要等待結(jié)果冈在。
（3）更廣的適用性倒慧。 co 函數(shù)庫約定，yield 命令后面只能是 Thunk 函數(shù)或 Promise 對象包券，而 async 函數(shù)的await 命令后面纫谅，可以跟 Promise 對象和原始類型的值（數(shù)值、字符串和布爾值溅固，但這時等同于同步操作）付秕。

19、你接觸過哪些數(shù)據(jù)庫
一侍郭、mysql / mongodb
二询吴、express
Express 是一個簡潔而靈活的 node.js Web應(yīng)用框架, 提供了一系列強(qiáng)大特性幫助你創(chuàng)建各種 Web 應(yīng)用，和豐富的 HTTP 工具亮元。使用 Express 可以快速地搭建一個完整功能的網(wǎng)站猛计。
Express 框架核心特性： 可以設(shè)置中間件來響應(yīng) HTTP 請求。
定義了路由表用于執(zhí)行不同的 HTTP 請求動作爆捞。
可以通過向模板傳遞參數(shù)來動態(tài)渲染 HTML 頁面奉瘤。
三、mongoose
Mongoose是在node.js異步環(huán)境下對mongodb進(jìn)行便捷操作的對象模型工具
Mongoose是NodeJS的驅(qū)動嵌削，不能作為其他語言的驅(qū)動毛好。
Mongoose有兩個特點：
　　 1、通過關(guān)系型數(shù)據(jù)庫的思想來設(shè)計非關(guān)系型數(shù)據(jù)庫
　　 2苛秕、基于mongodb驅(qū)動肌访，簡化操作
Vue
20、虛擬DOM的引入艇劫？
多次真實DOM --》 字符串拼接的方式 --.> 虛擬DOM ( diff算法 )
虛擬的DOM的核心思想是：對復(fù)雜的文檔DOM結(jié)構(gòu)吼驶，提供一種方便的工具，進(jìn)行最小化地DOM操作
21店煞、三大框架的區(qū)別蟹演？
不同點：
vue 控制器：無；過濾器 ：無 顷蟀；指令：有酒请；渲染指令： 有 ；數(shù)據(jù)綁定：雙向鸣个；
React 控制器：無羞反；過濾器 ：無 布朦；指令：無；渲染指令 ： 無 昼窗；數(shù)據(jù)綁定：單向是趴；
angular 控制器：有；過濾器 ：有 澄惊；指令：有唆途；渲染指令 ： 有 ；數(shù)據(jù)綁定：雙向掸驱；
相同點：
都是操作虛擬DOM（真實的dom肛搬，轉(zhuǎn)換js對象樹）
React 起源于 Facebook 的內(nèi)部項目，用來架設(shè) Instagram 的網(wǎng)站亭敢， 并于 2013年 5 月開源滚婉。React 擁有較高的性能，代碼邏輯非常簡單
它有以下的特性：
1.聲明式設(shè)計：React采用聲明范式帅刀，可以輕松描述應(yīng)用让腹。
2.高效：React通過對DOM的模擬，最大限度地減少與DOM的交互扣溺。
3.靈活：React可以與已知的庫或框架很好地配合骇窍。
優(yōu)點：
1. 速度快：在UI渲染過程中，React通過在虛擬DOM中的微操作來實現(xiàn)對實際DOM的局部更新锥余。
2. 跨瀏覽器兼容：虛擬DOM幫助我們解決了跨瀏覽器問題腹纳，它為我們提供了標(biāo)準(zhǔn)化的API，甚至在IE8中都是沒問題的驱犹。
3. 模塊化：為你程序編寫?yīng)毩⒌哪K化UI組件嘲恍，這樣當(dāng)某個或某些組件出現(xiàn)問題是，可以方便地進(jìn)行隔離雄驹。
4 . 單向數(shù)據(jù)流：Flux是一個用于在JavaScript應(yīng)用中創(chuàng)建單向數(shù)據(jù)層的架構(gòu)佃牛，它隨著React視圖庫的開發(fā)而被Facebook概念化。
5. 同構(gòu)医舆、純粹的javascript：因為搜索引擎的爬蟲程序依賴的是服務(wù)端響應(yīng)而不是JavaScript的執(zhí)行俘侠，預(yù)渲染你的應(yīng)用有助于搜索引擎優(yōu)化。
6.兼容性好：比如使用RequireJS來加載和打包蔬将，而Browserify和Webpack適用于構(gòu)建大型應(yīng)用爷速。它們使得那些艱難的任務(wù)不再讓人望而生畏。
缺點：
React本身只是一個V而已霞怀，并不是一個完整的框架惫东，所以如果是大型項目想要一套完整的框架的話，基本都需要加上ReactRouter和Flux才能寫大型應(yīng)用毙石。
Vue是尤雨溪編寫的一個構(gòu)建數(shù)據(jù)驅(qū)動的Web界面的庫凿蒜，準(zhǔn)確來說不是一個框架禁谦，它聚焦在V（view）視圖層胁黑。
它有以下的特性：
1.輕量級的框架
2.雙向數(shù)據(jù)綁定
3.指令
4.插件化
優(yōu)點：
1. 簡單：官方文檔很清晰废封，比 Angular 簡單易學(xué)。
2. 快速：異步批處理方式更新 DOM丧蘸。
3. 組合：用解耦的漂洋、可復(fù)用的組件組合你的應(yīng)用程序。
4. 緊湊：~18kb min+gzip力喷，且無依賴刽漂。
5. 強(qiáng)大：表達(dá)式 無需聲明依賴的可推導(dǎo)屬性 (computed properties)。
6. 對模塊友好：可以通過 NPM弟孟、Bower 或 Duo 安裝贝咙，不強(qiáng)迫你所有的代碼都遵循 Angular 的各種規(guī)定，使用場景更加靈活拂募。
缺點：
1. 新生兒：Vue.js是一個新的項目庭猩，沒有angular那么成熟。
2. 影響度不是很大：google了一下陈症，有關(guān)于Vue.js多樣性或者說豐富性少于其他一些有名的庫蔼水。
3. 不支持IE8

Angular是一款優(yōu)秀的前端JS框架，

它有以下的特性：
1.良好的應(yīng)用程序結(jié)構(gòu)
2.雙向數(shù)據(jù)綁定
3.指令
4.HTML模板
5.可嵌入录肯、注入和測試
優(yōu)點：
1. 模板功能強(qiáng)大豐富趴腋，自帶了極其豐富的angular指令。
2. 是一個比較完善的前端框架论咏，包含服務(wù)优炬，模板，數(shù)據(jù)雙向綁定厅贪，模塊化蠢护，路由，過濾器卦溢，依賴注入等所有功能糊余；
3. 自定義指令，自定義指令后可以在項目中多次使用单寂。
4. ng模塊化比較大膽的引入了Java的一些東西（依賴注入）贬芥，能夠很容易的寫出可復(fù)用的代碼，對于敏捷開發(fā)的團(tuán)隊來說非常有幫助宣决。
5. angularjs是互聯(lián)網(wǎng)巨人谷歌開發(fā)蘸劈，這也意味著他有一個堅實的基礎(chǔ)和社區(qū)支持。
缺點：
1. angular 入門很容易 但深入后概念很多, 學(xué)習(xí)中較難理解.
2. 文檔例子非常少, 官方的文檔基本只寫了api, 一個例子都沒有, 很多時候具體怎么用都是google來的, 或直接問misko,angular的作者.
3. 對IE6/7 兼容不算特別好, 就是可以用jQuery自己手寫代碼解決一些.
4. 指令的應(yīng)用的最佳實踐教程少, angular其實很靈活, 如果不看一些作者的使用原則,很容易寫出四不像的代碼, 例如js中還是像jQuery的思想有很多dom操作.
5. DI 依賴注入 如果代碼壓縮需要顯示聲明.
22尊沸、三大框架的使用場景威沫？
angular：
angular功能比較強(qiáng)大贤惯，適用在復(fù)雜、重大項目中棒掠。它有自己的一套規(guī)則孵构，寫出來的項目結(jié)構(gòu)比較清晰，便于大型項目的維護(hù)迭代烟很。
react：
react是一套跨平臺的js框架颈墅，對比angular，react較輕量雾袱，同時恤筛，react有一個明顯的特點讯检，也是angular的“痛點”——跨平臺猖凛。就移動端來說吧，angular當(dāng)時出來的時候并沒有把移動端考慮在內(nèi)疹启，只是后來才意識到移動端龐大的需求林说，所以出來angular2.0（angular2.0說白了就是angular專門針對移動市場的一種解決方案）煎殷。react使用js去調(diào)用移動原生控件，性能比傳統(tǒng)的hybrid app（webview加載html頁面）高很多述么，體驗也更接近于native蝌数。
vue：
對比其他兩大框架，vue是最輕量的度秘，所以上手比較簡單顶伞。vue專注于 MVVM 模型的ViewModel層，它主要目的是想讓大家可以盡可能簡單地達(dá)到數(shù)據(jù)和視圖的綁定剑梳。如果你的產(chǎn)品需求是輕量級的唆貌、開發(fā)效率快的，那就選擇它吧垢乙。
響應(yīng)式原理
響應(yīng)式原理 vuejs中的模型(model)和視圖(view)是保持同步的锨咙，在修改數(shù)據(jù)的時候會自動更新視圖，這其實依賴于Object.defineProperty方法追逮，所以vuejs不支持IE8及以下版本酪刀，vuejs通過劫持getter/setter方法來監(jiān)聽數(shù)據(jù)的變化，通過getter進(jìn)行依賴收集钮孵，在數(shù)據(jù)變更執(zhí)行setter的時候通知視圖更新骂倘。
生命周期
beforeCreate ，這個時候巴席，數(shù)據(jù)還沒有掛載呢历涝，只是一個空殼，無法訪問到數(shù)據(jù)和真實的dom，一般不做操作
created 荧库，一般可以在這里做初始數(shù)據(jù)的獲取
beforeMount 堰塌， 一般可以在這里做初始數(shù)據(jù)的獲取
mounted ， 可以在這里操作真實dom等事情...
beforeUpdate 分衫， 一般不做什么事兒
updated 场刑， 可以操作更新后的虛擬dom
beforeDestroy ，一般在這里做一些善后工作丐箩，例如清除計時器摇邦、清除非指令綁定的事件等等
destroyed ，在這里做善后工作也可以
vuex *********
通過定義和隔離狀態(tài)管理中的各種概念并強(qiáng)制遵守一定的規(guī)則屎勘，我們的代碼將會變得更結(jié)構(gòu)化且易維護(hù)。使用vuex來引入外部狀態(tài)管理居扒，將業(yè)務(wù)邏輯切分到組件外概漱，可以避免重復(fù)的從服務(wù)端抓取數(shù)據(jù)。
Vue組件接收交互行為喜喂，調(diào)用dispatch方法觸發(fā)action相關(guān)處理瓤摧，若頁面狀態(tài)需要改變，則調(diào)用commit方法提交mutation修改state玉吁，通過getters獲取到state新值照弥，重新渲染Vue Components，界面隨之更新
vue的全家桶
概括起來就是：进副、1.項目構(gòu)建工具这揣、2.路由、3.狀態(tài)管理影斑、4.http請求工具给赞。
路由原理
通過改變?yōu)g覽器地址URL，在不重新請求頁面的情況下矫户，更新頁面視圖
有兩種方式:
1.一種是# hash在地址中加入#以欺騙瀏覽器片迅，地址的改變是由于正在進(jìn)行頁內(nèi)導(dǎo)航
2.一種是h5的history使用URL的Hash來模擬一個完整的URL
23、spa 單頁面應(yīng)用皆辽？
SPA不會因為用戶的操作而進(jìn)行頁面的重新加載或跳轉(zhuǎn)柑蛇，而是利用JavaScript動態(tài)的變換HTML（采用的是div切換顯示和隱藏），從而實現(xiàn)UI與用戶的交互驱闷。
好處：
1耻台、由于避免了頁面的重新加載，SPA可以提供較為流暢的用戶體驗遗嗽。得益于Ajax粘我，可以實現(xiàn)無跳轉(zhuǎn)刷新，由于與瀏覽器的history機(jī)制，可以使用hash的b變化從而可以實現(xiàn)推動界面變化征字。
2都弹、只要使用支持HTML5和CSS3的瀏覽器就可以執(zhí)行復(fù)雜的SPA,因此，開發(fā)人員不必為了寫SPA網(wǎng)站而特別學(xué)習(xí)另一個開發(fā)方式匙姜，而使用者也不額外安裝軟件畅厢，所以，讓開發(fā)SPA網(wǎng)頁程序的入門和使用門檻降低不少氮昧。
缺點：
以SPA方式開發(fā)的網(wǎng)站不容易管理也不夠安全框杜。
因為沒了一頁一頁的網(wǎng)頁給搜索引擎的爬蟲來爬，所以袖肥，在搜索引擎最佳化（SEO）的工作上咪辱，需要花費額外的功夫。
因為沒有換頁椎组，需要自定義狀態(tài)來取代傳統(tǒng)網(wǎng)頁程序以網(wǎng)址來做判斷油狂。
前端的版本控制工具
24、git svn
git的操作流程

1. 組長： 創(chuàng)建一個遠(yuǎn)程的倉庫
2. 邀請各個組員寸癌，給賦予權(quán)限
3. 給每一個組員創(chuàng)建一個分支专筷，創(chuàng)建好公共的分支
4. 克隆倉庫到本地，多復(fù)制一份出來（這一份作為我們分支的開發(fā)目錄）蒸苇， 有的同學(xué)直接在倉庫代碼中開發(fā)磷蛹，代碼提交的時候，代碼丟失溪烤，
5. 首先味咳，當(dāng)我們開發(fā)完之后，在開發(fā)目錄中先做好測試氛什，然后再去提交遠(yuǎn)程分支
6. 組長：統(tǒng)管項目
   25莺葫、你的項目開發(fā)流程
   產(chǎn)品<--> ui <--> 前端 <--> 后臺<-->測試<-->上線
   26、你平時是如何和你的ui和后臺溝通的
   都可以做的枪眉，成本大
   后臺接口沒有給你（ 跨域 json mock.js ）
   27捺檬、前端的工程化（自動化）
   1.webpack
   什么是webpack：webpack是一款模塊加載兼打包工具，它可以將js贸铜、jsx堡纬、coffee、樣式sass蒿秦、less烤镐，圖片等作為模塊來使用和處理。
   優(yōu)點：
   1棍鳖、以commonJS的形式來書寫腳本炮叶，對AMD碗旅、CMD的支持也很全面，方便舊項目的遷移
   2镜悉、能被模塊化的不止是JS了祟辟。
   3、能替代部分grunt/gulp的工作侣肄，例如打包旧困，壓縮混淆，圖片轉(zhuǎn)base64等稼锅。
   4吼具、擴(kuò)展性強(qiáng)，插件機(jī)制完善矩距，支持React熱拔插
   2.gulp
   Glup側(cè)重于前端開發(fā)的整個過程的控制管理拗盒，我們可以通過給glup配置不同的task來讓glup實現(xiàn)不同的功能，從而構(gòu)建整個前端開發(fā)流程剩晴。
   3.grunt
   簡而言之锣咒，就是運行在Node.js上面的任務(wù)管理器（task runner），其可以在任何語言和項目中自動化指定的任務(wù)

React

28赞弥、redux
1.redux-thunk
當(dāng)我們需要在actionCreator中返回一個函數(shù)的時候（異步操作的時候）
2.redux的工作流程
組件想要獲取State， 用ActionCreator創(chuàng)建了一個請求交給Store,Store借助Reducer確認(rèn)了該State的狀態(tài)趣兄，Reducer返回給Store一個結(jié)果绽左，Store再把這個State轉(zhuǎn)給組件。
3.生命周期
初始化：
getDefaultProps： 設(shè)置默認(rèn)屬性
getInitialState： 設(shè)置初始狀態(tài)艇潭， 此時可以訪問this.props
componentWillMount ： 即將掛載 拼窥， 此時可以修改state。
render ： 渲染蹋凝，就是掛載鲁纠， 此時就不能更改state了。
componentDidMount ： 掛載完成
更新：
compoentwillReceiveProps： 組件初始化時不調(diào)用鳍寂，組件接受新的props時調(diào)用改含。
shouldCompnetUpdate： 是否應(yīng)該進(jìn)行更新操作
componentWillUpdate： 即將進(jìn)行更新操作， 此時可以修改state
render ： 重新渲染
componentDidUpdate： 更新完成迄汛， 此時可以獲取dom節(jié)點捍壤。
銷毀：
componentWillUnmount： 組件將要卸載時調(diào)用，一些事件監(jiān)聽和定時器需要在此時清除鞍爱。
29鹃觉、常見的ui組件庫/ ui庫
sui.js
element ui (vue)
muse ui (vue)
mini ui
framework7 vue
ant desigin （螞蟻金服ui庫）
rem 和彈性盒子
30、請問你使用過哪些 cs嗎睹逃？
Client Serve 客服端服務(wù)器 wamp / xmapp / phpstudy ...
后端測試工具
你在項目中遇到過什么問題盗扇？是如何解決的？
vue項目的時候，哪些地方卡住了疗隶？
react項目中 佑笋， 項目開發(fā)流程（日志文件） 問題 解決方案