原地址：https://blog.csdn.net/Mr_JavaScript/article/details/84311068
1. flex布局：又叫做彈性布局
? ? 任何一個(gè)容器都可以指定flex布局，如display:flex 或 display:inline-flex
注意：設(shè)置了flex布局以后，子元素的float肛根，clear刁品，vertical-align屬性將失效
容器的屬性：
? ?flex-direction flex-wrap flex-flow justify-content align-items align-content
2. js有哪些遍歷數(shù)組的方法
es5方法：
? ? （1）for循環(huán)：通過下標(biāo)遍歷數(shù)組的每一項(xiàng)
（2）array.forEach(item, index, array)
(3) array.map(item, index, array => return 格式化數(shù)組)
(4) array.filter(item, index, array => return 過濾條件)
(5) array.every(((item, index, array)=>{ return //判斷條件 }))
? ? ?如果每個(gè)元素都符合條件辱姨，則返回true誊酌，否則返回false蹦漠；
6）array.some(((item, index, array)=>{ return //判斷條件 }))
? ? ?只要有一個(gè)元素符合條件椭员，就返回true，否則返回false笛园；
7）array.reduce((prev,cur,index,array)=>{})
? ? ?從左到右遍歷數(shù)組隘击，并返回回調(diào)函數(shù)的值（應(yīng)用于求和，求冪等）喘沿；prev為上一輪函數(shù)執(zhí)行結(jié)果（previousResult）闸度，cur為當(dāng)前值(currentValue)
8）array.reduceRight((prev,cur,index,array)=>{})
? ? ?從右到左遍歷數(shù)組，并返回回調(diào)函數(shù)的值蚜印；
ES6方法：
1）for(let item of array){? //等到每個(gè)元素? }
? ? ?for(let index of array.keys()) {? ?//keys()返回?cái)?shù)組的鍵（index）? }
? ? ?for(let keyAndValue of array.entries()){? ?//entries()返回?cái)?shù)組的鍵值對(duì)（index:element）? }
2）array.find((value, index, array)=>{ return //條件 }
? ? ?返回第一個(gè)符合條件的元素，如果沒找到返回undefined（找到第一個(gè)符合條件的元素留量，則停止遍歷）
3）array.findIndex((value, index, array)=>{ return //條件 }
? ? ?返回第一個(gè)符合條件的元素下標(biāo)窄赋，如果沒找到則返回-1（找到第一個(gè)符合條件的元素，則停止遍歷）
3楼熄、箭頭函數(shù)的特性
1）箭頭函數(shù)是匿名函數(shù)忆绰，自身沒有this和arguments，它的this從上下文捕捉而來可岂；
2）箭頭函數(shù)不能作為構(gòu)造函數(shù)错敢，和 new 一起用就會(huì)拋出錯(cuò)誤；
3）箭頭函數(shù)沒有原型屬性（prototype）；
4）箭頭函數(shù)不能當(dāng)做Generator函數(shù),不能使用yield關(guān)鍵字稚茅；
5纸淮、MVVM模式介紹
MVVM 是Model-View-ViewModel 的縮寫，它是一種基于前端開發(fā)的架構(gòu)模式亚享，其核心是提供對(duì)View 和 ViewModel 的雙向數(shù)據(jù)綁定咽块，這使得ViewModel 的狀態(tài)改變可以自動(dòng)傳遞給 View，即所謂的數(shù)據(jù)雙向綁定欺税。
beforeCreate() 創(chuàng)建組件
created() 創(chuàng)建完成
beforeMounte() 組件被掛載前
mounted() 組件掛載完成
beforeUpdate() 組件更新前
updated() 組件更新后
beforeDestory() 組件摧毀前
destoryed() 組件摧毀后
7、Vue數(shù)據(jù)雙向綁定原理
vue.js是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式實(shí)現(xiàn)數(shù)據(jù)雙向綁定晚凿，通過Object.defineProperty()來劫持各個(gè)屬性的setter亭罪，getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者歼秽，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)应役，從而更新視圖層的數(shù)據(jù)。
詳細(xì)介紹：剖析Vue原理&實(shí)現(xiàn)雙向綁定MVVM
? ? vue的數(shù)組如何實(shí)現(xiàn)的雙向綁定
9哲银、web緩存
http請(qǐng)求頭緩存
1）強(qiáng)制緩存：
第一次請(qǐng)求即把數(shù)據(jù)緩存起來扛吞，在緩存數(shù)據(jù)未失效的情況下，之后的請(qǐng)求都直接使用緩存數(shù)據(jù)荆责。
緩存規(guī)則(header里配置) Cache-Control滥比，參數(shù)：private（客戶端可以緩存），public（客戶端和代理服務(wù)器都可緩存）做院，max-age=xxx 緩存時(shí)長(zhǎng)（s）盲泛，no-cache使用緩存前，再向服務(wù)器發(fā)送驗(yàn)證請(qǐng)求键耕，no-store禁止緩存寺滚。
2）協(xié)商緩存：
第一次請(qǐng)求時(shí)拿到緩存數(shù)據(jù)和緩存標(biāo)識(shí)，再次請(qǐng)求時(shí)向服務(wù)器發(fā)送緩存標(biāo)識(shí)屈雄，服務(wù)器判斷緩存是否有效村视，若有效則返回304狀態(tài)碼，請(qǐng)求數(shù)據(jù)從緩存讀取酒奶，若無效則返回202蚁孔，需要重新發(fā)送http請(qǐng)求數(shù)據(jù)。
緩存數(shù)據(jù)的修改時(shí)間(header里配置) Last-Modified（第一次請(qǐng)求） 數(shù)據(jù)最后修改時(shí)間惋嚎，If-Modified-Since（再次請(qǐng)求）上次請(qǐng)求時(shí)的最后修改時(shí)間杠氢。
緩存標(biāo)識(shí)(header里配置)：Etag（第一次請(qǐng)求）由服務(wù)器生成的唯一標(biāo)識(shí)，If-None-Match（再次請(qǐng)求）第一次請(qǐng)求獲取的唯一標(biāo)識(shí)另伍。
常用瀏覽器緩存
1）Cookie主要用于用戶信息的存儲(chǔ)鼻百，Cookie的內(nèi)容可以自動(dòng)在請(qǐng)求的時(shí)候被傳遞給服務(wù)器；
2）LocalStorage的數(shù)據(jù)將一直保存在瀏覽器內(nèi)，直到用戶清除瀏覽器緩存數(shù)據(jù)為止温艇；
3）SessionStorage的其他屬性同LocalStorage因悲，只不過它的生命周期同標(biāo)簽頁(yè)的生命周期，當(dāng)標(biāo)簽頁(yè)被關(guān)閉時(shí)中贝，SessionStorage也會(huì)被清除囤捻；
4）IndexDB主要用在前端有大容量存儲(chǔ)需求的頁(yè)面上，例如邻寿，在線編輯瀏覽器或者網(wǎng)頁(yè)郵箱蝎土。
10、web跨域方式
同源策略：協(xié)議绣否，域名誊涯，端口三者中有一個(gè)不同就算跨域。
跨域方式：
1）JSONP蒜撮，通過<script>標(biāo)簽的異步加載來實(shí)現(xiàn)的跨域暴构；
2）CORS “跨域資源共享”（Cross-origin resource sharing），它允許瀏覽器向跨源服務(wù)器段磨，發(fā)出XMLHttpRequest請(qǐng)求取逾。分為簡(jiǎn)單請(qǐng)求和非簡(jiǎn)單請(qǐng)求；（瀏覽器自動(dòng)完成）
3）WebSocket（網(wǎng)絡(luò)通信協(xié)議）苹支，不受同源的限制砾隅，可在客戶端和服務(wù)器端之間雙向通信；（客戶端可以向服務(wù)器發(fā)送請(qǐng)求债蜜，服務(wù)器也可以向客戶端發(fā)送請(qǐng)求晴埂，而http只能由客戶端向服務(wù)器發(fā)送請(qǐng)求，不能反過來）
4）postMessage()寻定，H5新增的跨域通信方法儒洛。應(yīng)用場(chǎng)景：窗口 A (http:A.com)向跨域的窗口 B (http:B.com)互通信息；
5）Hash狼速，原理：Hash的改變琅锻，頁(yè)面不會(huì)刷新。應(yīng)用場(chǎng)景：A 通過iframe或frame嵌入了跨域的頁(yè)面 B向胡，A與B間可以通過hash通信浅浮。（A和B的domain相同）
12、大數(shù)的加減乘除
1）使用插件：如bignumber.js捷枯、bigInteger.js
2）原生js實(shí)現(xiàn)：javascript 大數(shù)值數(shù)據(jù)運(yùn)算
13.?判斷兩個(gè)單鏈表是否相交及找到第一個(gè)交點(diǎn)
? ??如果兩個(gè)單鏈表有共同的節(jié)點(diǎn)，那么從第一個(gè)共同節(jié)點(diǎn)開始专执，后面的節(jié)點(diǎn)都會(huì)重疊淮捆，直到鏈表結(jié)束。?
因?yàn)閮蓚€(gè)鏈表中有一個(gè)共同節(jié)點(diǎn)，則這個(gè)節(jié)點(diǎn)里的指針域指向的下一個(gè)節(jié)點(diǎn)地址一樣桐腌，所以下一個(gè)節(jié)點(diǎn)也會(huì)相交，依次類推苟径。所以案站，若相交，則兩個(gè)鏈表呈“Y”字形棘街。如下圖：
1.暴力解法蟆盐。?
從頭開始遍歷第一個(gè)鏈表，遍歷第一個(gè)鏈表的每個(gè)節(jié)點(diǎn)時(shí)遭殉，同時(shí)從頭到尾遍歷第二個(gè)鏈表石挂，看是否有相同的節(jié)點(diǎn)，第一次找到相同的節(jié)點(diǎn)即第一個(gè)交點(diǎn)险污。若第一個(gè)鏈表遍歷結(jié)束后痹愚，還未找到相同的節(jié)點(diǎn)，即不存在交點(diǎn)蛔糯。時(shí)間復(fù)雜度為O(n^2)拯腮。這種方法顯然不是寫這篇博客的重點(diǎn)。蚁飒。动壤。不多說了。
2.使用棧飒箭。?
我們可以從頭遍歷兩個(gè)鏈表狼电。創(chuàng)建兩個(gè)棧，第一個(gè)棧存儲(chǔ)第一個(gè)鏈表的節(jié)點(diǎn)弦蹂，第二個(gè)棧存儲(chǔ)第二個(gè)鏈表的節(jié)點(diǎn)肩碟。每遍歷到一個(gè)節(jié)點(diǎn)時(shí)，就將該節(jié)點(diǎn)入棧凸椿。兩個(gè)鏈表都入棧結(jié)束后削祈。則通過top判斷棧頂?shù)墓?jié)點(diǎn)是否相等即可判斷兩個(gè)單鏈表是否相交。因?yàn)槲覀冎滥月魞蓚€(gè)鏈表相交髓抑，則從第一個(gè)相交節(jié)點(diǎn)開始，后面的節(jié)點(diǎn)都相交优幸。?
若兩鏈表相交吨拍，則循環(huán)出棧，直到遇到兩個(gè)出棧的節(jié)點(diǎn)不相同网杆，則這個(gè)節(jié)點(diǎn)的后一個(gè)節(jié)點(diǎn)就是第一個(gè)相交的節(jié)點(diǎn)羹饰。
3.遍歷鏈表記錄長(zhǎng)度伊滋。?
同時(shí)遍歷兩個(gè)鏈表到尾部，同時(shí)記錄兩個(gè)鏈表的長(zhǎng)度队秩。若兩個(gè)鏈表最后的一個(gè)節(jié)點(diǎn)相同笑旺，則兩個(gè)鏈表相交。?
有兩個(gè)鏈表的長(zhǎng)度后馍资，我們就可以知道哪個(gè)鏈表長(zhǎng)筒主，設(shè)較長(zhǎng)的鏈表長(zhǎng)度為len1,短的鏈表長(zhǎng)度為len2。?
則先讓較長(zhǎng)的鏈表向后移動(dòng)(len1-len2)個(gè)長(zhǎng)度鸟蟹。然后開始從當(dāng)前位置同時(shí)遍歷兩個(gè)鏈表乌妙，當(dāng)遍歷到的鏈表的節(jié)點(diǎn)相同時(shí)，則這個(gè)節(jié)點(diǎn)就是第一個(gè)相交的節(jié)點(diǎn)戏锹。?
4.哈希表法冠胯。
既然連個(gè)鏈表一旦相交，相交節(jié)點(diǎn)一定有相同的內(nèi)存地址锦针，而不同的節(jié)點(diǎn)內(nèi)存地址一定是不同的荠察，那么不妨利用內(nèi)存地址建立哈希表，如此通過判斷兩個(gè)鏈表中是否存在內(nèi)存地址相同的節(jié)點(diǎn)判斷兩個(gè)鏈表是否相交奈搜。具體做法是：遍歷第一個(gè)鏈表悉盆，并利用地址建立哈希表，遍歷第二個(gè)鏈表馋吗，看看地址哈希值是否和第一個(gè)表中的節(jié)點(diǎn)地址值有相同即可判斷兩個(gè)鏈表是否相交焕盟。?
我們可以采用除留取余法構(gòu)造哈希函數(shù)。?
構(gòu)造哈希表可以采用鏈地址法解決沖突宏粤。哈希表沖突指對(duì)key1 != key2脚翘，存在f(key1)=f(key2)，鏈地址法就是把key1和key2作為節(jié)點(diǎn)放在同一個(gè)單鏈表中绍哎，這種表稱為同義詞子表来农，在哈希表中只存儲(chǔ)同義詞子表的頭指針，如下圖：
14. 一行代碼實(shí)現(xiàn)數(shù)組去重崇堰？
[...new Set([1,2,3,1,'a',1,'a'])]
15.?怎么判斷兩個(gè)對(duì)象相等沃于？
? ??最開始的思路是遍歷來判斷，但是最后好像沒有說清楚海诲，查了下繁莹，好像可以轉(zhuǎn)換為字符串來判斷。
JSON.stringify(obj)==JSON.stringify(obj2);//trueJSON.stringify(obj)==JSON.stringify(obj3);//false
16.?項(xiàng)目做過哪些性能優(yōu)化特幔？
1咨演、減少HTTP請(qǐng)求數(shù)
2、減少DNS查詢
3蚯斯、使用CDN
4雪标、避免重定向
5零院、圖片懶加載
6、減少DOM元素?cái)?shù)量
7村刨、減少DOM操作
8、使用外部JavaScript和CSS
9撰茎、壓縮JavaScript嵌牺、CSS、字體龄糊、圖片等
10逆粹、優(yōu)化CSS?Sprite
11、使用iconfont
12炫惩、字體裁剪
13僻弹、多域名分發(fā)劃分內(nèi)容到不同域名
14、盡量減少iframe使用
15他嚷、避免圖片src為空
16蹋绽、把樣式表放在 中
17、把腳本放在頁(yè)面底部 歡迎補(bǔ)充筋蓖。卸耘。。
17.?模塊化開發(fā)是怎么做的粘咖？
? ? ? 使用命名空間蚣抗。
18.?Vue router 跳轉(zhuǎn)和 location.href 有什么區(qū)別？
router是hash改變location.href是頁(yè)面跳轉(zhuǎn)瓮下，刷新頁(yè)面
19.?Set 和 Map 數(shù)據(jù)結(jié)構(gòu)
ES6提供了新的數(shù)據(jù)結(jié)構(gòu)Set它類似于數(shù)組翰铡，但是成員的值都是唯一的，沒有重復(fù)的值讽坏。
ES6提供了Map數(shù)據(jù)結(jié)構(gòu)锭魔。它類似于對(duì)象，也是鍵值對(duì)的集合震缭，但是“鍵”的范圍不限于字符串赂毯，各種類型的值（包括對(duì)象）都可以當(dāng)作鍵。也就是說拣宰，Object結(jié)構(gòu)提供了“字符串—值”的對(duì)應(yīng)党涕，Map結(jié)構(gòu)提供了“值—值”的對(duì)應(yīng)，是一種更完善的Hash結(jié)構(gòu)實(shí)現(xiàn)巡社。
20. 實(shí)現(xiàn)一個(gè)deepclone函數(shù)
? ??function deepClone(obj) {
? ? let objClone = Array.isArray(obj) ? [] : {};
? ? if (obj && typeof obj === "object") {
? ? ? ? for (key in obj) {
? ? ? ? ? ? if (obj.hasOwnProperty(key)) {
? ? ? ? ? ? ? ? //判斷ojb子元素是否為對(duì)象膛堤，如果是，遞歸復(fù)制
? ? ? ? ? ? ? ? if (obj[key] && typeof obj[key] === "object") {
? ? ? ? ? ? ? ? ? ? objClone[key] = deepClone(obj[key]);
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? //如果不是晌该，簡(jiǎn)單復(fù)制
? ? ? ? ? ? ? ? ? ? objClone[key] = obj[key];
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? return objClone;
}
// 測(cè)試代碼
let a = [1, 2, [1,5], 4],
? ? b = deepClone(a);
a[0] = 2;
a[2][0] = 5;
console.log(a, b);
21. diff比較方式
? ??
22. vuex
? ??
23. cookie
? ??
24. computed methods watch
? ??
25. css js預(yù)加載
26. 實(shí)現(xiàn)繼承的幾種方式
? ??
27. 原型 原型鏈
? ??
28. 事件循環(huán)
? ??
29. 數(shù)組方法
? ??
30. 請(qǐng)求頭 響應(yīng)頭
? ??
