1寸痢、淺拷貝和深拷貝的區(qū)別
淺拷貝是拷貝一層，深層次的對象級別的就拷貝引用
深拷貝是拷貝多層幼衰，每一層級的數(shù)據(jù)都會拷貝出來
1.1一段話贅述OOP編程思想
把一組數(shù)據(jù)結(jié)構(gòu)和處理它們的方法組成對象(object)镐捧，把相同行為的對象歸納為類(class)，通過類的封裝(encapsulation)隱藏內(nèi)部細(xì)節(jié)抢野，通過繼承(inherit)實(shí)現(xiàn)類的特化(specialization)與泛化(generalization)，再通過多態(tài)(polymorphic)實(shí)現(xiàn)基于對象類型的動態(tài)分派(dynamic allocation)各墨。
2指孤、閉包：
（可以看看實(shí)例：https://www.cnblogs.com/heyushuo/p/9975911.html）
閉包的特點(diǎn)：可以讀取函數(shù)內(nèi)部變量，將函數(shù)內(nèi)部變量的值始終保存在內(nèi)存中贬堵，保護(hù)函數(shù)內(nèi)的變量不被更改
用途：
使用閉包可以訪問函數(shù)中的變量
可以使變量長期保存在內(nèi)存中
閉包優(yōu)缺點(diǎn)
? ? ? 作用:讀取函數(shù)內(nèi)部的函數(shù),始終保持在內(nèi)存中
? ? ? 優(yōu)點(diǎn):變量長期保持在內(nèi)存中,不會清除,避免全局污染
? ? ? 缺點(diǎn):增大內(nèi)存使用,導(dǎo)致內(nèi)存泄漏邓厕， 網(wǎng)頁性能問題?
3、如何區(qū)分冒泡與捕獲
冒泡事件（false）：是指子元素向父元素傳遞的過程
捕獲事件（true）：是指父元素向子元素傳遞的過程
4扁瓢、rem em px的區(qū)別
rem css3新增的相對單位，相對于根節(jié)點(diǎn)html的字體大小來計(jì)算的
em：會繼承父級元素的字體大小
px：像素的相對于顯示器屏幕分辨率而言的
5补君、年輕人不講5的
6引几、js的數(shù)據(jù)類型
簡單數(shù)據(jù)類型：Number、String挽铁、Boolean伟桅、 undefined、object叽掘、Null
引用類型：Object Array Function
7楣铁、面向?qū)ο蟮奶卣鳎悍庋b、繼承更扁、抽象盖腕、多態(tài)
8赫冬、vue的實(shí)現(xiàn)原理
vue是一個典型的MVVM框架，模型Model是js對象溃列，修改它則視圖VIEW自動更新劲厌。
vue實(shí)現(xiàn)雙向數(shù)據(jù)綁定，需要三大模塊：
Observer:能夠?qū)?shù)據(jù)對象的所有屬性進(jìn)行監(jiān)聽听隐，如有變動可拿到最新值并通知訂閱者
Compile:對每個元素節(jié)點(diǎn)的指令進(jìn)行掃描和解析补鼻，根據(jù)指令模板替換數(shù)據(jù)，以及綁定想要的更新函數(shù)
Watcher:作為鏈接Observer和Compile的橋梁雅任，能夠訂閱并收到每個屬性變動的通知风范，執(zhí)行指令綁定的相應(yīng)回調(diào)函數(shù)，從而更新視圖沪么。
9硼婿、vue的生命周期
beforeCreate：組件實(shí)例剛被創(chuàng)建
created:組件實(shí)例創(chuàng)建完成，屬性已綁定成玫，但是DOM還未生成
beforeMount：模板編譯
mounted：掛載
beforeUpdate：
updated：更新
beforeDestroy：實(shí)例銷毀前
destroyed：銷毀
10加酵、防抖 :
（實(shí)例：https://www.cnblogs.com/momo798/p/9177767.html）
在某段時(shí)間內(nèi)，不管你觸發(fā)了多少次回調(diào)哭当，我都只認(rèn)最后一次猪腕。
a:如果在200ms內(nèi)沒有再次觸發(fā)滾動事件，那么就執(zhí)行函數(shù)
b:如果在200ms內(nèi)再次觸發(fā)滾動事件钦勘，那么當(dāng)前的計(jì)時(shí)取消陋葡，重新開始計(jì)時(shí)
//防抖例子
functiondebounce(fn,wait){vartimer=null;returnfunction(){varcontext=this,args=arguments;// 如果此時(shí)存在定時(shí)器的話，則取消之前的定時(shí)器重新記時(shí)if(timer){clearTimeout(timer);timer=null;}// 設(shè)置定時(shí)器彻采，使事件間隔指定事件后執(zhí)行timer=setTimeout(()=>{fn.apply(context,args);},wait);};}
節(jié)流：在某段時(shí)間內(nèi)腐缤，不管你觸發(fā)了多少次回調(diào)，我都只認(rèn)第一次肛响，并在計(jì)時(shí)結(jié)束時(shí)給予響應(yīng)岭粤。
// 函數(shù)節(jié)流的實(shí)現(xiàn);functionthrottle(fn,delay){varpreTime=Date.now();returnfunction(){varcontext=this,args=arguments,nowTime=Date.now();// 如果兩次時(shí)間間隔超過了指定時(shí)間，則執(zhí)行函數(shù)特笋。if(nowTime-preTime>=delay){preTime=Date.now();returnfn.apply(context,args);}};}
11剃浇、如何理解vue中MVVM模式？
MVVM全稱是Model-View-ViewModel猎物；
vue是以數(shù)據(jù)為驅(qū)動的虎囚，一旦創(chuàng)建dom和數(shù)據(jù)就保持同步，每當(dāng)數(shù)據(jù)發(fā)生變化時(shí)蔫磨，dom也會變化淘讥。DOMListeners和DataBindings是實(shí)現(xiàn)雙向綁定的關(guān)鍵。
Model代表數(shù)據(jù)模型堤如，也可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯蒲列。
View代表UI 組件窒朋，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI 展現(xiàn)出來。
ViewModel監(jiān)聽模型數(shù)據(jù)的改變和控制視圖行為嫉嘀、處理用戶交互炼邀，簡單理解就是一個同步View 和 Model的對象，連接Model和View剪侮。
在MVVM架構(gòu)下拭宁，View 和 Model 之間并沒有直接的聯(lián)系，而是通過ViewModel進(jìn)行交互瓣俯，Model 和 ViewModel 之間的交互是雙向的杰标， 因此View 數(shù)據(jù)的變化會同步到Model中，而Model 數(shù)據(jù)的變化也會立即反應(yīng)到View 上彩匕。
ViewModel通過雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來腔剂，而View 和 Model 之間的同步工作完全是自動的，無需人為干涉驼仪，因此開發(fā)者只需關(guān)注業(yè)務(wù)邏輯掸犬，不需要手動操作DOM, 不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問題，復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)完全由 MVVM 來統(tǒng)一管理绪爸。
12湾碎、Vue組件間的參數(shù)傳遞
1.父組件與子組件傳值
父組件傳給子組件：子組件通過props方法接受數(shù)據(jù);
子組件傳給父組件：$emit方法傳遞參數(shù)
2.非父子組件間的數(shù)據(jù)傳遞，兄弟組件傳值
eventBus奠货，就是創(chuàng)建一個事件中心介褥，相當(dāng)于中轉(zhuǎn)站，可以用它來傳遞事件和接收事件递惋。項(xiàng)目比較小時(shí)柔滔，用這個比較合適。（雖然也有不少人推薦直接用VUEX萍虽，具體來說看需求咯睛廊。技術(shù)只是手段，目的達(dá)到才是王道杉编。）
3喉前、多級傳值：provide和inject
4、其他用vuex
13王财、Vue的路由實(shí)現(xiàn)：hash模式 和 history模式
hash模式：在瀏覽器中符號“#”，#以及#后面的字符稱之為hash裕便，用window.location.hash讀热蘧弧；
特點(diǎn)：hash雖然在URL中偿衰，但不被包括在HTTP請求中挂疆；用來指導(dǎo)瀏覽器動作改览，對服務(wù)端安全無用，hash不會重加載頁面缤言。
hash 模式下宝当，僅 hash 符號之前的內(nèi)容會被包含在請求中，如http://www.xxx.com胆萧，因此對于后端來說庆揩，即使沒有做到對路由的全覆蓋，也不會返回 404 錯誤跌穗。
history模式：history采用HTML5的新特性订晌；且提供了兩個新方法：pushState（），replaceState（）可以對瀏覽器歷史記錄棧進(jìn)行修改蚌吸，以及popState事件的監(jiān)聽到狀態(tài)變更锈拨。
history 模式下，前端的 URL 必須和實(shí)際向后端發(fā)起請求的 URL 一致羹唠，如http://www.xxx.com/items/id奕枢。后端如果缺少對 /items/id 的路由處理，將返回 404 錯誤佩微。Vue-Router 官網(wǎng)里如此描述：“不過這種模式要玩好缝彬，還需要后臺配置支持……所以呢，你要在服務(wù)端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源喊衫，則應(yīng)該返回同一個 index.html 頁面跌造，這個頁面就是你 app 依賴的頁面。
14族购、vue路由的鉤子函數(shù)
首頁可以控制導(dǎo)航跳轉(zhuǎn)壳贪，beforeEach，afterEach等寝杖，一般用于頁面title的修改违施。一些需要登錄才能調(diào)整頁面的重定向功能。
beforeEach主要有3個參數(shù)to瑟幕，from磕蒲，next：
to：route即將進(jìn)入的目標(biāo)路由對象，
from：route當(dāng)前導(dǎo)航正要離開的路由
next：function一定要調(diào)用該方法resolve這個鉤子只盹。執(zhí)行效果依賴next方法的調(diào)用參數(shù)辣往。可以控制網(wǎng)頁的跳轉(zhuǎn)殖卑。
15站削、vuex是什么？怎么使用孵稽？哪種功能場景使用它许起？
只用來讀取的狀態(tài)集中放在store中十偶； 改變狀態(tài)的方式是提交mutations，這是個同步的事物园细； 異步邏輯應(yīng)該封裝在action中惦积。
在main.js引入store，注入猛频。新建了一個目錄store狮崩，….. export 。
場景有：單頁應(yīng)用中伦乔，組件之間的狀態(tài)厉亏、音樂播放、登錄狀態(tài)烈和、加入購物車
state
Vuex 使用單一狀態(tài)樹,即每個應(yīng)用將僅僅包含一個store 實(shí)例爱只，但單一狀態(tài)樹和模塊化并不沖突。存放的數(shù)據(jù)狀態(tài)招刹，不可以直接修改里面的數(shù)據(jù)恬试。
mutations
mutations定義的方法動態(tài)修改Vuex 的 store 中的狀態(tài)或數(shù)據(jù)。
getters
類似vue的計(jì)算屬性疯暑，主要用來過濾一些數(shù)據(jù)训柴。
action
actions可以理解為通過將mutations里面處里數(shù)據(jù)的方法變成可異步的處理數(shù)據(jù)的方法，簡單的說就是異步操作數(shù)據(jù)妇拯。view 層通過 store.dispath 來分發(fā) action幻馁。
16、v-if 和 v-show 區(qū)別
答：v-if按照條件是否渲染越锈，v-show是display的block或none仗嗦；
17.computed和watch的區(qū)別
computed只有當(dāng)頁面數(shù)據(jù)變化時(shí)才會計(jì)算,當(dāng)數(shù)據(jù)沒有變化時(shí),它會讀取緩存。而watch每次都需要執(zhí)行函數(shù),methods也是每次都需要執(zhí)行
數(shù)據(jù)變化時(shí)執(zhí)行異步操作,這個時(shí)候使用watch是合適的
分別簡述computed和watch的使用場景
computed:當(dāng)一個屬性受多個屬性影響的時(shí)候就需要用到computed
最典型的例子： 購物車商品結(jié)算的時(shí)候
watch:當(dāng)一條數(shù)據(jù)影響多條數(shù)據(jù)的時(shí)候就需要用watch??
例子：搜索數(shù)據(jù)
18甘凭、vue的虛擬dom稀拐？
虛擬dom實(shí)例（https://www.cnblogs.com/fundebug/p/vue-virtual-dom.html）
? ? 虛擬的DOM的核心思想是：對復(fù)雜的文檔DOM結(jié)構(gòu)，提供一種方便的工具丹弱，進(jìn)行最小化地DOM操作德撬。
VNode是什么？虛擬 DOM是什么躲胳？
? ? Vue在 頁面上渲染的節(jié)點(diǎn)蜓洪，及其子節(jié)點(diǎn)稱為“虛擬節(jié)點(diǎn) (Virtual Node)”，簡寫為“VNode”坯苹÷√矗“虛擬 DOM”是由 Vue 組件樹建立起來的整個 VNode 樹的稱呼。
19、vue的優(yōu)點(diǎn)是什么刚操？
低耦合：視圖（View）可以獨(dú)立于Model變化和修改，一個ViewModel可以綁定到不同的"View"上再芋，當(dāng)View變化的時(shí)候Model可以不變菊霜，當(dāng)Model變化的時(shí)候View也可以不變。
可重用性：你可以把一些視圖邏輯放在一個ViewModel里面济赎，讓很多view重用這段視圖邏輯鉴逞。
獨(dú)立開發(fā)：開發(fā)人員可以專注于業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)（ViewModel），設(shè)計(jì)人員可以專注于頁面設(shè)計(jì)司训。
可測試：界面素來是比較難于測試的构捡，而現(xiàn)在測試可以針對ViewModel來寫。
20壳猜、在Vue中使用插件的步驟
采用ES6的import ... from ...語法或CommonJSd的require()方法引入插件
使用全局方法Vue.use( plugin )使用插件,可以傳入一個選項(xiàng)對象Vue.use(MyPlugin, { someOption: true })
21勾徽、為什么避免 v-if 和 v-for 用在一起
? ? 當(dāng) Vue 處理指令時(shí)，v-for 比 v-if 具有更高的優(yōu)先級统扳，通過v-if 移動到容器元素喘帚，不會再重復(fù)遍歷列表中的每個值。取而代之的是咒钟，我們只檢查它一次吹由，且不會在 v-if 為否的時(shí)候運(yùn)算 v-for
21.5vue的雙向數(shù)據(jù)綁定原理是什么
vue數(shù)據(jù)雙向綁定是通過數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式來實(shí)現(xiàn)的
核心：關(guān)于VUE雙向數(shù)據(jù)綁定，其核心是 Object.defineProperty()方法朱嘴；
在數(shù)據(jù)渲染時(shí)使用prop渲染數(shù)據(jù)
將prop綁定到子組件自身的數(shù)據(jù)上，修改數(shù)據(jù)時(shí)修改自身數(shù)據(jù)來替代prop
watch子組件自身數(shù)據(jù)的改變，觸發(fā)事件通知父組件更改綁定到prop的數(shù)據(jù)
這樣做的好處是：父組件數(shù)據(jù)改變時(shí)怠堪，不會修改存儲prop的子V組件數(shù)據(jù)腰池，只是以子組件數(shù)據(jù)為媒介，完成對prop的雙向修改帚湘。
21.6玫荣、vue-router有哪幾種導(dǎo)航鉤子
全局導(dǎo)航鉤子：router.beforeEach，afterEach大诸；
組件內(nèi)的鉤子:beforeRouteEnter,beforeRoutrupdate,beforeRouteLeave,
路由獨(dú)享鉤子：beforeEnter
21.7捅厂、vue內(nèi)置的組件
component組件：有兩個屬性---is? ? inline-template
渲染一個‘元組件’為動態(tài)組件，按照'is'特性的值來渲染成那個組件
2）transition組件：為組件的載入和切換提供動畫效果资柔，具有非常強(qiáng)的可定制性焙贷，支持16個屬性和12個事件
3）transition-group：作為多個元素/組件的過渡效果
4）keep-alive：包裹動態(tài)組件時(shí)，會緩存不活動的組件實(shí)例贿堰，而不是銷毀它們
5）slot：作為組件模板之中的內(nèi)容分發(fā)插槽辙芍，slot元素自身將被替換
21.8、vuex中的getters是干什么的
可以認(rèn)為是 store 的計(jì)算屬性。就像計(jì)算屬性一樣故硅，getter 的返回值會根據(jù)它的依賴被緩存起來庶灿，且只有當(dāng)它的依賴值發(fā)生了改變才會被重新計(jì)算。
21.9吃衅、插槽的理解和使用：
https://www.cnblogs.com/mandy-dyf/p/11528505.html
22往踢、網(wǎng)站性能優(yōu)化
?? 1.盡可能減少HTTP請求
?? 2.使用雪碧圖
?? 3.css放在文件最上面防止白屏,閃動,js放在最下面
?? 4.壓縮js和css? 去除不必要的注釋 空格
?? 5.合理使用緩存
?? 6.使用CDN(內(nèi)容分發(fā)網(wǎng)絡(luò))
23、什么是盒子模型
網(wǎng)頁中的任何一個標(biāo)簽都相當(dāng)于是一個盒子模型徘层，而所有的盒子模型都存在五個必要的屬性：width,height,padding,border,margin.
24峻呕、css的預(yù)處理器? sass/less
優(yōu)點(diǎn)：變量，復(fù)用趣效，嵌套瘦癌，運(yùn)算，繼承
缺點(diǎn)：提高了門檻
25跷敬、DOM操作——怎樣添加讯私、移除、移動干花、復(fù)制妄帘、創(chuàng)建和查找節(jié)點(diǎn)。
（1）創(chuàng)建新節(jié)點(diǎn)
? ? ? createDocumentFragment()? ? //創(chuàng)建一個DOM片段
? ? ? createElement()?? //創(chuàng)建一個具體的元素
? ? ? createTextNode()?? //創(chuàng)建一個文本節(jié)點(diǎn)
（2）添加池凄、移除抡驼、替換、插入
? ? ? appendChild()
? ? ? removeChild()
? ? ? replaceChild()
? ? ? insertBefore()
（3）查找
? ? ? getElementsByTagName()? ? //通過標(biāo)簽名稱
? ? ? getElementsByName()? ? //通過元素的Name屬性的值
? ? ? getElementById()? ? //通過元素Id肿仑，唯一性
26致盟、常見的http狀態(tài)碼
? ? ? ? ? 200 - 請求成功
? ? ? ? ? 301 - 資源（網(wǎng)頁等）被永久轉(zhuǎn)移到其它URL
? ? ? ? ? 403 - 服務(wù)器理解請求客戶端的請求,但是拒絕執(zhí)行此請求
? ? ? ? ? 404 - 請求的資源（網(wǎng)頁等）不存在
? ? ? ? ?? 500 - 內(nèi)部服務(wù)器錯誤
開頭為1，2的沒有問題
3為重定向
4為客戶端錯誤
5為服務(wù)器錯誤
27尤慰、什么是同源策略
所謂同源是指馏锡，域名，協(xié)議伟端，端口相同杯道。
28、如何防止xss攻擊
XSS防御的總體思路是：對輸入(和URL參數(shù))進(jìn)行過濾责蝠，對輸出進(jìn)行編碼党巾。
29、es6合并對象的方法
assign()
1.作用：將多個對象{}? 合并成一個獨(dú)立對象霜医。
2.使用方式: Object.assign(合并的對象齿拂，傳入合并中的對象....)
let user = {name:'無敵人',age:19};
let page = {pageSize:10,currentPage:1};
let newObj = {};
Object.assign(newObj,user,page);
30、js中怎么知道一個東西是number肴敛、string署海、obj吗购？
typeof運(yùn)算符用于判斷對象的類型，但是對于一些創(chuàng)建的對象砸狞，它們都會返回'object'捻勉，有時(shí)我們需要判斷該實(shí)例是否為某個對象的實(shí)例，那么這個時(shí)候需要用到instanceof運(yùn)算符刀森，后續(xù)記錄instanceof運(yùn)算符的相關(guān)用法贯底。
實(shí)例：console.log(typeof(true));? //'boolean'
? ? console.log(typeof '123');? //'string'
? ? console.log(typeof 123);?? //'number'
? ? console.log(typeof NaN);?? //'number'
31、promise（ES6）和async/await（ES7）的區(qū)別
兩者都是做異步處理的;
await 使異步轉(zhuǎn)為同步撒强，目的都是為了解決異步回調(diào)產(chǎn)生的“回調(diào)地獄”。
32：js的作用域和作用域鏈
作用域：
全局作用域：?
最外層函數(shù)定義的變量擁有全局作用域笙什，即對任何內(nèi)部函數(shù)來說飘哨，都是可以訪問的：
局部作用域：?
和全局作用域相反，局部作用域一般只在固定的代碼片段內(nèi)可訪問到琐凭，而對于函數(shù)外部是無法訪問的芽隆，最常見的例如函數(shù)內(nèi)部
函數(shù)內(nèi)部聲明變量的時(shí)候，一定要使用var命令统屈。如果不用的話胚吁，你實(shí)際上聲明了一個全局變量！
作用域鏈:
根據(jù)在內(nèi)部函數(shù)可以訪問外部函數(shù)變量的這種機(jī)制愁憔，用鏈?zhǔn)讲檎覜Q定哪些數(shù)據(jù)能被內(nèi)部函數(shù)訪問腕扶。
33、for of和for in的區(qū)別
在循環(huán)對象屬性的時(shí)候吨掌，使用for...in,在遍歷數(shù)組的時(shí)候的時(shí)候使用for...of半抱。
for...in循環(huán)出的是key，for...of循環(huán)出的是value
34膜宋、如何創(chuàng)建BFC
根標(biāo)簽
float的值不為none
overflow 的值不為 visible
display 的值為 inline-block窿侈、table-cell、flex秋茫、table-caption或者inline-flex
position 的值為 absolute 或 fixed
35史简、csrf、xss攻擊防御：
1肛著、csrf同源策略：設(shè)置cookie的domain圆兵；
document.cookie = "username=Darren;path=/;domain=.csdn.net"；
2策泣、xss過濾
36衙傀、如何實(shí)現(xiàn)跨域
1、jsonp：實(shí)現(xiàn)簡單兼容好萨咕，就是只支持get统抬，容易遭到xss攻擊；
2、最流行的跨域方案：cors聪建；
3钙畔、最簡單的nginx
37、一個完整的http過程
1金麸、域名解析擎析；
2、發(fā)起tcp三次握手挥下；
3揍魂、建立tcp連接后發(fā)起http請求；
4棚瘟、服務(wù)器響應(yīng)http請求现斋，瀏覽器得到html；
5偎蘸、瀏覽器解析html庄蹋，并請求html代碼中的資源；
6迷雪、瀏覽器對頁面進(jìn)行渲染呈現(xiàn)給用戶限书；（解析html構(gòu)建dom樹，構(gòu)建render章咧，布局render倦西，繪制render）
38、Canvas與SVG的主要區(qū)別
從圖像類別區(qū)分赁严，Canvas是基于像素的位圖调限，而SVG卻是基于矢量圖形∥蟀模可以簡單的把兩者的區(qū)別看成photoshop與illustrator的區(qū)別耻矮。
從渲染模式上來說，Canvas屬于即時(shí)模式忆谓，而SVG則是保留模式,這兩種模式的區(qū)別可以參見 cshao 的博文：http://www.lifelaf.com/blog/?p=354裆装。
從結(jié)構(gòu)上說，Canvas沒有圖層的概念倡缠，所有的修改整個畫布都要重新渲染哨免，而SVG則可以對單獨(dú)的標(biāo)簽進(jìn)行修改。
從操作對象上說昙沦，Canvas是基于HTML canvas標(biāo)簽琢唾，通過宿主提供的Javascript API對整個畫布進(jìn)行操作的，而SVG則是基于XML元素的盾饮。
從功能上講采桃，SVG發(fā)布日期較早懒熙，所以功能相對Canvas比較完善。
關(guān)于動畫普办，Canvas更適合做基于位圖的動畫工扎，而SVG則適合圖表的展示。關(guān)于SVG和Canvas的運(yùn)行場景可參考MSCN關(guān)于如何為您的網(wǎng)站在Canvas和SVG之間做出選擇：
從搜索引擎角度分析衔蹲，由于svg是有大量標(biāo)簽組成肢娘，所以可以通過給標(biāo)簽添加屬性，便于爬蟲搜索舆驶。
39橱健、promise
console.log('here we go');
new Promise( resolve => {
setTimeout( () =>{
resolve('hello');
});
})
.then( value => {
console.log(value);
return new Promise( resolve => {
setTimeout( () => {
resolve('world')
})
})
})
.then( value => {
console.log(value+' world')
})
輸出： here we go
?輸出：hello
輸出：world world
40、日常工作中如何管理公共組件沙廉？
把公共組件發(fā)布到npmjs包管理官網(wǎng)畴博，然后用npm install引入
41、JS的三種加載方式
正常模式
這種情況下 JS 會阻塞瀏覽器蓝仲，瀏覽器必須等待 index.js 加載和執(zhí)行完畢才能去做其它事情。
<script? src="index.js"></script>
async(異步) 模式
async 模式下官疲，JS 不會阻塞瀏覽器做任何其它的事情袱结。它的加載是異步的，當(dāng)它加載結(jié)束途凫，JS 腳本會立即執(zhí)行垢夹。
<script? async? src="index.js"></script>
defer(延緩) 模式
efer 模式下，JS 的加載是異步的维费，執(zhí)行是被推遲的果元。等整個文檔解析完成、DOMContentLoaded 事件即將被觸發(fā)時(shí)犀盟，被標(biāo)記了 defer 的 JS 文件才會開始依次執(zhí)行而晒。
<script? defer? src="index.js"></script>
從應(yīng)用的角度來說，一般當(dāng)我們的腳本與 DOM 元素和其它腳本之間的依賴關(guān)系不強(qiáng)時(shí)阅畴，我們會選用 async倡怎；當(dāng)腳本依賴于 DOM 元素和其它腳本的執(zhí)行結(jié)果時(shí)，我們會選用 defer贱枣。
42监署、手寫一個sort方法
const insertSort = (arr, start =0, end) => {
end = end || arr.length;
for(let i = start;i < end;i++) {
let e = arr[i];
let j;
for(j =i;j > start && arr[j -1] >e;j --)
arr[j] = arr[j-1];
arr[j] =e;
}
return;
}
43、能不能描述一下原型鏈纽哥？
JavaScript對象通過prototype指向父類對象钠乏，直到指向Object對象為止，這樣就形成了一個原型指向的鏈條, 即原型鏈春塌。
44晓避、什么是閉包簇捍？
閉包的定義：閉包是指有權(quán)訪問另外一個函數(shù)作用域中的變量的函數(shù)
45、什么是CSRF攻擊够滑？
CSRF(Cross-site request forgery), 即跨站請求偽造垦写，指的是黑客誘導(dǎo)用戶點(diǎn)擊鏈接，打開黑客的網(wǎng)站彰触，然后黑客利用用戶目前的登錄狀態(tài)發(fā)起跨站請求梯投。
46、回流和重繪
回流 况毅，也叫重排分蓖。#觸發(fā)條件
簡單來說，就是當(dāng)我們對 DOM 結(jié)構(gòu)的修改引發(fā) DOM 幾何尺寸變化的時(shí)候尔许，會發(fā)生回流的過程么鹤。
重繪#觸發(fā)條件
當(dāng) DOM 的修改導(dǎo)致了樣式的變化，并且沒有影響幾何屬性的時(shí)候味廊，會導(dǎo)致重繪(repaint)蒸甜。
46、get和post的區(qū)別
首先最直觀的是語義上的區(qū)別余佛。
而后又有這樣一些具體的差別:
從緩存的角度柠新，GET 請求會被瀏覽器主動緩存下來，留下歷史記錄辉巡，而 POST 默認(rèn)不會恨憎。
從編碼的角度，GET 只能進(jìn)行 URL 編碼郊楣，只能接收 ASCII 字符憔恳，而 POST 沒有限制。
從參數(shù)的角度净蚤，GET 一般放在 URL 中钥组，因此不安全，POST 放在請求體中今瀑，更適合傳輸敏感信息者铜。
從冪等性的角度，GET是冪等的放椰，而POST不是作烟。(冪等表示執(zhí)行相同的操作，結(jié)果也是相同的)
從TCP的角度砾医，GET 請求會把請求報(bào)文一次性發(fā)出去拿撩，而 POST 會分為兩個 TCP 數(shù)據(jù)包，首先發(fā) header 部分如蚜，如果服務(wù)器響應(yīng) 100(continue)压恒， 然后發(fā) body 部分影暴。(火狐瀏覽器除外，它的 POST 請求只發(fā)一個 TCP 包)
47探赫、add(1)(2)
function add (a) {
? ? function sum(b) { // 使用閉包
? ? ? ? a = a + b; // 累加
? ? ? ? return sum;
? ? }
? ? sum.toString = function() { // 重寫toSting() 方法
? ? ? ? return a;
? ? }
? ? return sum; // 返回一個函數(shù)
}
console.log(add(1)(3)) // 4
console.log(add(1)(3)(5))
47.5型宙、?我們?nèi)绾螌⑵浔馄交癁閇1, 1, 2, 1, 2, 3]這樣的一維數(shù)組呢：
1.ES6的flat()
const arr = [1, [1,2], [1,2,3]] ；
arr.flat(Infinity)? // [1, 1, 2, 1, 2, 3]
48伦吠、xml與json差別
JSON相對于XML來講妆兑，數(shù)據(jù)的體積小，傳遞的速度更快些毛仪。
JSON與JavaScript的交互更加方便搁嗓，更容易解析處理，更好的數(shù)據(jù)交互箱靴。
SON對數(shù)據(jù)的描述性比XML較差腺逛。
JSON的速度要遠(yuǎn)遠(yuǎn)快于XML。
49衡怀、Canvas 與 SVG 的比較
Canvas
依賴分辨率
不支持事件處理器
弱的文本渲染能力
能夠以 .png 或 .jpg 格式保存結(jié)果圖像
最適合圖像密集型的游戲棍矛，其中的許多對象會被頻繁重繪
SVG
不依賴分辨率
支持事件處理器
最適合帶有大型渲染區(qū)域的應(yīng)用程序（比如谷歌地圖）
復(fù)雜度高會減慢渲染速度（任何過度使用 DOM 的應(yīng)用都不快）
不適合游戲應(yīng)用
50、Express 框架中對中間件的5種分類
應(yīng)用級別的中間件：掛載到 app 上的中間件?app.get('URL地址', （req, res, next）=> {})抛杨；
路由級別的中間件：掛載到 router 對象上的中間件?router.get('url地址', (req, res, next)=>{})
錯誤級別的中間件：回調(diào)函數(shù)中够委，有四個參數(shù)?app.use((err, req, res, next)=>{})
唯一內(nèi)置的中間件：express.static()
第三方中間件：非express框架提供的，需要程序員手動安裝才能使用的中間件蝶桶；body-parser?解析post 表單數(shù)據(jù)
51、Promise.all和Promise.race的區(qū)別
Promise.all()方法用于將多個?Promise?實(shí)例掉冶，包裝成一個新的?Promise?實(shí)例真竖。
Promise.all([promise1,promise2]).then(success1,fail1)
重點(diǎn)：promise1和promise2都成功才會調(diào)用success1
Promise.race
Promise.race()方法同樣是將多個?Promise?實(shí)例，包裝成一個新的?Promise?實(shí)例厌小。
Promise.race([promise1,promise2]).then(success1,fail1)
重點(diǎn)：promise1和promise2只要有一個成功就會調(diào)用success1
52恢共、自適應(yīng)網(wǎng)站與響應(yīng)式網(wǎng)站的區(qū)別
自適應(yīng)網(wǎng)站是使用不同設(shè)備瀏覽時(shí)呈現(xiàn)不同的網(wǎng)頁，網(wǎng)頁內(nèi)容及版式風(fēng)格或相似或完全不同璧亚，移動端和PC端屬于不同的網(wǎng)站模板讨韭，數(shù)據(jù)庫內(nèi)容或相同一致，或獨(dú)立不同癣蟋，目的在于為了符合訪客的瀏覽透硝。針對一些優(yōu)化人員，更習(xí)慣于做到數(shù)據(jù)庫同步疯搅，使PC端的網(wǎng)址和內(nèi)容與移動端的網(wǎng)址和內(nèi)容一一對應(yīng)濒生。
響應(yīng)式網(wǎng)站是使用不同的設(shè)備瀏覽網(wǎng)站時(shí)，網(wǎng)站樣式風(fēng)格幔欧、內(nèi)容和網(wǎng)址都是完全一樣的罪治，PC端和移動端屬于同一個網(wǎng)站模板丽声，數(shù)據(jù)庫完全一致，也非常符合搜索引擎的優(yōu)化規(guī)則觉义。
expires是一個絕對的值,如果更改本機(jī)時(shí)間可能會造成失效.
max-age是一個相對的值,從設(shè)置那一刻開始算起,即使更改時(shí)間仍舊有效
54、nextTick和set的區(qū)別
Vue.nextTick 在下次DOM更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)晒骇；
vue.set：如果我們在創(chuàng)建實(shí)例以后霉撵，再在實(shí)例上綁定新屬性，vue是無法進(jìn)行雙向綁定的厉碟。
此時(shí)如果使用vue.set的話喊巍，vue就會對新屬性進(jìn)行雙向綁定了。
作者：九章算法
鏈接：http://www.reibang.com/p/a99bbf1a5281
來源：簡書
著作權(quán)歸作者所有箍鼓。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)崭参，非商業(yè)轉(zhuǎn)載請注明出處。
