結合網(wǎng)上和個人總結西轩，僅供參考悬蔽。
1扯躺、HTML&CSS:
1、DOM結構 —— 兩個節(jié)點之間可能存在哪些關系以及如何在節(jié)點之間任意移動蝎困。（通俗易懂的來講講DOM录语、兩個節(jié)點之間可能存在哪些關系以及如何在節(jié)點之間任意移動）
DOM: Document Object Module, 文檔對象模型。
節(jié)點的關系：父（parent）禾乘、子（child）和同胞（sibling）等節(jié)點關系澎埠；
- 在節(jié)點樹中，頂端節(jié)點被稱為根（root）
- 每個節(jié)點都有父節(jié)點始藕、除了根（它沒有父節(jié)點）
- 一個節(jié)點可擁有任意數(shù)量的子
- 同胞是擁有相同父節(jié)點的節(jié)點
2蒲稳、DOM操作 —— 如何添加氮趋、移除、移動江耀、復制剩胁、創(chuàng)建和查找節(jié)點等。
查找DOM：document.getElementById()和document.getElementsByTagName()祥国，以及CSS選擇器document.getElementsByClassName()昵观；querySelector()和querySelectorAll()【低版本的IE<8不支持，8有限支持】舌稀。
????document.getElementById()可以直接定位唯一的一個DOM節(jié)點啊犬。document.getElementsByTagName()和document.getElementsByClassName()總是返回一組DOM節(jié)點。
創(chuàng)建DOM：document.createElement(newElement)壁查；
更新DOM：innerHTML和innerText觉至、textContent；
插入DOM：innerHTML 和 parentNode.appendChild(childNode)潮罪，parentElement.insertBefore(newElement, referenceElement)康谆；
刪除DOM：parent.removeChild(childElement)；
3嫉到、事件 —— 如何使用事件沃暗，以及IE和標準DOM事件模型之間存在的差別。
（1）冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發(fā)何恶。
? IE 5.5: div -> body -> document
? IE 6.0: div -> body -> html -> document
? Mozilla 1.0: div -> body -> html -> document -> window
（2）捕獲型事件(event capturing)：事件從最不精確的對象(document 對象)開始觸發(fā)孽锥，然后到最精確(也可以在窗口級別捕獲事件，不過必須由開發(fā)人員特別指定)细层。
（3）DOM事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件惜辑，但是，捕獲型事件先發(fā)生疫赎。兩種事件流會觸及DOM中的所有對象盛撑，從document對象開始，也在document對象結束捧搞。
? DOM事件模型最獨特的性質是抵卫，文本節(jié)點也觸發(fā)事件(在IE中不會)。
4胎撇、XMLHttpRequest —— 這是什么介粘、怎樣完整地執(zhí)行一次GET請求、怎樣檢測錯誤晚树。（老版本IE ajax核心對象為ActiveXObject）
XMLHttpRequest 對象提供了在網(wǎng)頁加載后與服務器進行通信的方法姻采。
獲取ajax核心對象：
var request = false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}}}
5、嚴格模式與混雜模式 —— 如何觸發(fā)這兩種模式爵憎，區(qū)分它們有何意義慨亲。
DOCTYPE（是Document Type文檔類型的簡寫）是一組機器可讀的規(guī)則婚瓜，它們指示(X)HTML文檔中允許有什么，不允許有什么巡雨，DOCTYPE正是用來告訴瀏覽器使用哪種DTD闰渔，三種 DTD 類型分別是嚴格版本席函、過渡版本以及基于框架的 HTML 文檔铐望。聲明位于文檔中的最前面的位置，處于標簽之前茂附。如果DOCTYPE聲明不是頁面上的第一個元素正蛙，那么IE 6會自動切換到混雜模式。
嚴格模式是瀏覽器根據(jù)web標準去解析頁面营曼，是一種要求嚴格的DTD乒验，不允許使用任何表現(xiàn)層的語法，如<br/>
蒂阱《腿混雜模式則是一種向后兼容的解析方法，就是可以實現(xiàn)IE5.5以下版本瀏覽器的渲染模式录煤。總結：
（1）鳄厌、 <!DOCTYPE>聲明位于文檔中的最前面，處于標簽之前妈踊。告知瀏覽器的解析器了嚎，用什么文檔類型規(guī)范來解析這個文檔。
（2）廊营、嚴格模式的排版和 JS 運作模式是? 以該瀏覽器支持的最高標準運行歪泳。
（3）、在混雜模式中露筒，頁面以寬松的向后兼容的方式顯示呐伞。模擬老式瀏覽器的行為以防止站點無法工作。
（4）慎式、DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現(xiàn)伶氢。
6、盒模型 —— 外邊距瞬捕、內邊距和邊框之間的關系鞍历，及IE8以下版本的瀏覽器中的盒模型
CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中肪虎，"box model"這一術語是用來設計和布局時使用劣砍。
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素扇救，它包括：邊距刑枝，邊框香嗓，填充，和實際內容装畅。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素靠娱。
屬性：box-sizing；
屬性值1： box-sizing： content-box掠兄；（默認值）?標準盒子模型 像云，元素實際寬度等于width加上元素的內邊距padding和邊框寬度border-width，元素內容寬度 = width蚂夕；（IE8以下瀏覽器的盒模型中定義的元素的寬高不包括內邊距和邊框）?
屬性值2： box-sizing：border-box迅诬； 元素寬度width包含了元素的內邊距padding和邊框寬度border-width，元素內容寬度 = width - padding - border婿牍；
7侈贷、塊級元素與行內元素 —— 怎么用CSS控制它們、以及如何合理的使用它們（參考鏈接）
（1）CSS規(guī)范規(guī)定等脂，每個元素都有display屬性俏蛮，比如div默認display屬性值為“block”，成為“塊級”元素上遥，總是獨占一行搏屑，表現(xiàn)為另起一行開始，而且其后的元素也必須另起一行顯示露该；span默認display屬性值為“inline”睬棚，是“行內”元素，可以和相鄰的內聯(lián)元素在同一行解幼。
（2）行內元素有：a b span img input select strong···
?（3）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p?
（4）知名的空元素： <br/>? <hr/>? <img/>? <input/>? <link> <meta>
? ? ? ? ? ?// 鮮為人知的是：<area> <base> <command> <col> <embed>? <keygen>? <param> <source>? ?<track>? <wbr>??
8抑党、浮動元素 —— 怎么使用它們、它們有什么問題以及怎么解決這些問題撵摆。（參考鏈接）
屬性：float底靠；
屬性值：left：往左浮動；right：往右浮動特铝；
浮動元素引起的問題：
?1.父元素的高度無法被撐開暑中，影響與父元素同級的元素；
?2.與浮動元素同級的非浮動元素會跟隨其后鲫剿；
?3.若非第一個元素浮動鳄逾，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構灵莲；
解決方法：
清浮動雕凹，使用CSS中的clear:both;屬性來清除同級子元素的浮動問題
給父元素添加clearfix樣式，解決父元素高度無法撐開問題：
.clearfix:after {content: ""; display: block; clear: both;}
9、HTML與XHTML —— 二者有什么區(qū)別枚抵，你覺得應該使用哪一個并說出理由线欲。
主要區(qū)別：HTML是一種基本的WEB網(wǎng)頁設計語言，XHTML是一個基于XML的置標語言汽摹；
XHTML元素必須被正確地嵌套李丰；
XHTML元素必須被關閉；
標簽名必須用小寫字母逼泣；
XHTML文檔必須擁有根元素趴泌。
10、JSON —— 作用圾旨、用途踱讨、設計結構魏蔗。
JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式砍的。易于人閱讀和編寫。同時也易于機器解析和生成莺治。
JSON建構于兩種結構：“名稱/值”對的集合（A collection of name/value pairs）廓鞠。
不同的語言中，它被理解為對象（object）谣旁、紀錄（record）床佳、結構（struct）、字典（dictionary）榄审、哈希表（hash table）砌们、有鍵列表（keyed list）或者關聯(lián)數(shù)組（associative array）、值的有序列表（An ordered list of values）搁进。在大部分語言中浪感，它被理解為數(shù)組（array）。
11饼问、link 和@import 的區(qū)別影兽。
? ? （1）、link屬于XHTML標簽莱革，而@import是CSS提供的峻堰；
? ? （2）、頁面被加載的時盅视，link會同時被加載捐名，而@import引用的CSS會等到頁面被加載完再加載；
? ? （3）闹击、import只在IE5以上才能識別新娜，而link是XHTML標簽，無兼容問題瞻佛；
? ? （4）、link方式的樣式的權重 高于@import的權重狰腌；
12、CSS 選擇符有哪些牧氮？哪些屬性可以繼承琼腔？優(yōu)先級算法如何計算？ CSS3新增偽類有那些踱葛？
*? 1.id選擇器（ # myid）
? ? 2.類選擇器（.myclassname）
? ? 3.標簽選擇器（div, h1, p）
? ? 4.相鄰選擇器（h1 + p）
? ? 5.子選擇器（ul < li）
? ? 6.后代選擇器（li a）
? ? 7.通配符選擇器（ * ）
? ? 8.屬性選擇器（a[rel = "external"]）
? ? 9.偽類選擇器（a: hover, li: nth - child）
*? 可繼承： font-size font-family color, UL LI DL DD DT;
*? 不可繼承 ：border padding margin width height ;
*? 優(yōu)先級就近原則丹莲，樣式定義最近者為準;
*? 載入樣式以最后載入的定位為準;
優(yōu)先級為:?
!important > id > class > tag?
important 比內聯(lián)優(yōu)先級高
CSS3新增偽類舉例：
p:first-of-type? ?選擇屬于其父元素的首個元素的每個元素。
p:last-of-type? ?選擇屬于其父元素的最后元素的每個元素尸诽。
p:only-of-type? 選擇屬于其父元素唯一的元素的每個元素甥材。
p:only-child? ? 選擇屬于其父元素的唯一子元素的每個元素。? ?
?p:nth-child(2)? 選擇屬于其父元素的第二個子元素的每個元素性含。? ?
?:enabled洲赵、:disabled 控制表單控件的禁用狀態(tài)。? ?
?:checked商蕴，單選框或復選框被選中叠萍。
13、對瀏覽器內核的理解绪商？常見的瀏覽器內核有哪些苛谷？
瀏覽器內核的理解：
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負責取得網(wǎng)頁的內容（HTML格郁、XML腹殿、圖像等等）、整理訊息（例如加入CSS等）例书，以及計算網(wǎng)頁的顯示方式锣尉，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網(wǎng)頁的語法解釋會有不同雾叭，所以渲染的效果也不相同悟耘。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯织狐、顯示網(wǎng)絡內容的應用程序都需要內核暂幼。
JS引擎則：解析和執(zhí)行javascript來實現(xiàn)網(wǎng)頁的動態(tài)效果。
最開始渲染引擎和JS引擎并沒有區(qū)分的很明確移迫，后來JS引擎越來越獨立旺嬉，內核就傾向于只指渲染引擎。
常見的瀏覽器內核：
Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等厨埋。[又稱MSHTML]
Gecko內核：Netscape6及以上版本邪媳，F(xiàn)F,MozillaSuite/SeaMonkey等
Presto內核：Opera7及以上。 [Opera內核原為：Presto，現(xiàn)為：Blink;]
Webkit內核：Safari,Chrome等雨效。 [ Chrome的：Blink（WebKit的分支）]
16迅涮、less、sass徽龟、stylus預處理器
17.? HTML5：離線存儲
參考鏈接：有趣的HTML5：離線存儲
html&&css參考地址：
https://leohxj.gitbooks.io/front-end-database/html-and-css-basic/learn-dom-tree.html
https://www.liaoxuefeng.com/wiki/
2叮姑、js基礎
0. 面向對象原理；
????1）目標：實現(xiàn)封裝据悔、繼承传透、多態(tài)等面向對象的基本功能。
????2）原理：使用prototype极颓、function 朱盐、new、this模擬面向對象的類菠隆。
? ? ? ? ? JavaScript是面向對象語言兵琳，但不使用類（根本不存在類）。JavaScript的面向對象是基于prototype和function的浸赫，而不是基于類的闰围。
1. 原型和原型鏈；（參考鏈接）
每個對象都有一個私有屬性（稱之為 [[Prototype]]）既峡，它指向它的原型對象（prototype）。該 prototype 對象又具有一個自己的 prototype 碧查，層層向上直到一個對象的原型為?null运敢。根據(jù)定義，null?沒有原型忠售，并作為這個原型鏈中的最后一個環(huán)節(jié)传惠。
當查找一個對象的屬性時，JavaScript 會向上遍歷原型鏈稻扬，直到找到給定名稱的屬性為止卦方，到查找到達原型鏈的頂部 - 也就是 Object.prototype - 但是仍然沒有找到指定的屬性，就會返回 undefined
2. 閉包泰佳；（參考鏈接）
閉包是代碼塊和創(chuàng)建該代碼塊的上下文中數(shù)據(jù)的結合盼砍。
閉包是指有權訪問另一個函數(shù)作用域中的變量的函數(shù)。創(chuàng)建閉包的常見方式逝她，就是在一個函數(shù)內部創(chuàng)建另一個函數(shù)浇坐。（紅寶書P178）。
例子1：
[1, 2, 3].sort(function(a, b) {
...// 排序條件
});
[1, 2, 3].map(function (element) {
????return element * 2;
}); // [2, 4, 6]
例子2-延遲調用：
var a = 10;
setTimeout(function () {
????alert(a); // 10, after one second
}, 1000);
例子3-回調函數(shù)：
var x = 10;
xmlHttpRequestObject.onreadystatechange =function() {
// 當數(shù)據(jù)就緒的時候黔宛，才會調用;
// 這里近刘，不論是在哪個上下文中創(chuàng)建
// 此時變量“x”的值已經(jīng)存在了
????alert(x);// 10
};
例子4-隱藏輔助對象：
varfoo = {};
// 初始化
(function(object) {
????var x = 10;
????object.getX =function_getX() {
????????return x;
????};
})(foo);
alert(foo.getX());// 獲得閉包 "x" – 10
3. 類和繼承（es5實現(xiàn)方法 + es6實現(xiàn)方法）；
ES6創(chuàng)建類的基本語法和繼承實現(xiàn)原理
4.? let、const觉渴、var介劫；（參考鏈接）
5. Promise的使用及原理；（參考鏈接）
6. 異步處理方法案淋；（參考鏈接）
1)回調函數(shù)：
function fn1 () {
????console.log('Function 1')
}
function fn2 (f) {
????setTimeout(() => {
????????console.log('Function 2')
????????f()
}, 500)
}
function fn3 () {
????console.log('Function 3')
}
fn1();
fn2(fn3) ; //可依次執(zhí)行fn1蜕猫，fn2，fn3
2)發(fā)布/訂閱模式哎迄；
class AsyncFunArr {
????constructor (...arr) {
????????this.funcArr = [...arr]
}
next () {
????const fn = this.funcArr.shift()
????if (typeof fn === 'function') fn()
}
run () {
????this.next()
}
}
function fn1 () {
????console.log('Function 1')
????asyncFunArr.next()
}
function fn2 () {
????setTimeout(() => {
????????console.log('Function 2')
????????asyncFunArr.next()
????}, 500)
}
function fn3 () {
????console.log('Function 3')
????asyncFunArr.next()
}
3）Promise：
function fn1 () {
console.log('Function 1')
}
function fn2 () {
????return new Promise((resolve, reject) => {
????????setTimeout(() => {
????????????console.log('Function 2')
????????????resolve()
????}, 500) })
}
function fn3 () {
console.log('Function 3')
}
fn1()回右；
fn2().then(() => { fn3() })；
4)generator:（參考鏈接）
7. 遍歷所有文檔樹所有節(jié)點(考察遞歸)的方法漱挚；
（參考鏈接：https://blog.csdn.net/jjaze3344/article/details/7280321
? ? ? ? ? ? ? ? ? ????https://blog.csdn.net/sinat_27346451/article/details/77073938）
8. sort排序相關(注意ASCII這個坑)（參考鏈接）
默認情況下翔烁，sort函數(shù)是按照ASCII字符排序。在ASCII字符排序中旨涝，是對應位相比較蹬屹。18和5相比，實際上就是1和5相比白华，因為5只有一位數(shù)慨默，所以只比較第一位。因為1<5弧腥，所以就會出現(xiàn)錯誤的答案厦取。
錯誤如：
var a = [5,41,7,18]
a.sort();
alert(a);? ? ?//18，41管搪，5虾攻，7?
解決方案：
如果省略參數(shù)，將默認為ASCII字符排序更鲁，簡而言之霎箍，就是有了參數(shù)，就不是默認為ASCII字符排序了澡为。
即：
var a=[5,41,7,18];
a.sort(function (m, n){
? ??return m-n;
});
alert(a);? ? ?//5,7,18,41
9. 數(shù)組和對象的深淺拷貝漂坏；（參考鏈接）
10. String + Array的一些基本操作；（參考鏈接）
11. 數(shù)組去重的方法媒至；（參考鏈接）
推薦的兩種方法：
1顶别、先將原數(shù)組進行排序，使重復元素在相鄰位置塘慕，創(chuàng)建新數(shù)組筋夏，并賦值元數(shù)組的第一項，檢查原數(shù)組中的第i個元素與新數(shù)組中的最后一個元素是否相同图呢，如果不相同条篷，則將該元素存入新數(shù)組中
function unique(arr){?
????arr.sort();?//先排序 骗随，這里不需要參數(shù)
????var res = [arr[0]];??
????for (var i = 1; i < arr.length; i++) {??
????????if (arr[i] !== res[res.length - 1]) {???
????????res.push(this[i]);?
?????????}?
????}?
return res;
}
2、創(chuàng)建一個空對象和一個空數(shù)組赴叹，將數(shù)組的數(shù)值以對象屬性的形式保存鸿染，并賦值1，push到新數(shù)組中乞巧，后續(xù)遍歷數(shù)組時通過數(shù)組的值以屬性的方式訪問對象涨椒，從而達到驗證重復的目的。（較推薦）
function unique(arr) {?
var res = [];
?var hash = {};
?for (var i = 0; i < arr.length; i++) {??
????if (!hash[arr[i]]) {???
????????res.push(arr[i]);??
?????????hash[arr[i]] = 1;?
?????}?
?}?
return res;
}
12. 冒泡和捕獲绽媒；（參考鏈接）
13. 事件代理蚕冬；（參考鏈接）
14. cookies，sessionStorage 和 localStorage 的區(qū)別是辕？（參考鏈接）
cookie是網(wǎng)站為了標示用戶身份而儲存在用戶本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過加密）囤热。cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要），即會在瀏覽器和服務器間來回傳遞获三。
sessionStorage和localStorage僅在客戶端（即瀏覽器）中保存旁蔼，不參與和服務器的通信；sessionStorage保存在當前會話窗口疙教；localStorage保存在本瀏覽器數(shù)據(jù)緩存區(qū)棺聊。
共同點：都是保存在瀏覽器端、僅同源可用的存儲方式贞谓。
存儲大邢夼濉：cookie數(shù)據(jù)大小不能超過4k；sessionStorage和localStorage 雖然也有存儲大小的限制经宏，但比cookie大得多犀暑，可以達到5M或更大。
存儲格式：cookie只能以字符串格式保存烁兰；webStorage以key-value格式保存，更便于存然捕肌（sessionStorage.setItem("key","value")沪斟，sessionStorage.getItem("key")）；
保存時間：localStorage 存儲持久數(shù)據(jù)暇矫，瀏覽器關閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)主之；sessionStorage 數(shù)據(jù)在當前瀏覽器窗口關閉后自動刪除；cookie 設置的cookie過期時間之前一直有效李根，即使窗口或瀏覽器關閉槽奕。
Cookie的作用是與服務器進行交互，作為HTTP規(guī)范的一部分而存在 房轿，而Web Storage僅僅是為了在本地“存儲”數(shù)據(jù)而生粤攒。
15. jsonp和跨域所森，為什么瀏覽器會禁止跨域（參考鏈接：??跨 域、?jsonp）
16. 變量提升夯接；（參考鏈接）
17. 高階函數(shù)焕济；（參考鏈接）
18. 動畫；（參考鏈接）
19. setTimeout盔几、setInterval和requestAnimationFrame晴弃；（參考鏈接）（requestAnimationFrame參考鏈接）
基本用法與區(qū)別
setTimeout(code, millseconds)?用于延時執(zhí)行參數(shù)指定的代碼，如果在指定的延遲時間之前逊拍，你想取消這個執(zhí)行上鞠，那么直接用clearTimeout(timeoutId)來清除任務，timeoutID?是?setTimeout?時返回的芯丧；
setInterval(code, millseconds)用于每隔一段時間執(zhí)行指定的代碼芍阎，永無停歇，除非你反悔了注整，想清除它能曾，可以使用?clearInterval(intervalId)，這樣從調用 clearInterval 開始肿轨，就不會在有重復執(zhí)行的任務寿冕，intervalId?是?setInterval?時返回的；
requestAnimationFrame(code)椒袍，一般用于動畫驼唱，與?setTimeout?方法類似，區(qū)別是?setTimeout?是用戶指定的驹暑，而?requestAnimationFrame?是瀏覽器刷新頻率決定的玫恳，一般遵循 W3C 標準，它在瀏覽器每次刷新頁面之前執(zhí)行优俘。
20. 模塊化開發(fā)京办；
參考鏈接：模塊化入門-知乎
???????????????????UMD
21. 引起內存泄漏的原因；（參考鏈接）
1）全局變量引起的內存泄漏
function leaks(){ leak = 'xxxxxx';//leak 成為一個全局變量帆焕，不會被回收}
2）閉包引起的內存泄漏
var leaks = (function(){
????????var leak = 'xxxxxx';// 被閉包所引用，不會被回收
????????return function(){
????????????????console.log(leak);
????????}
})()
3）dom清空或刪除時财饥，事件未清除導致的內存泄漏
$('#container').bind('click', function(){
????console.log('click');
}).remove();
// zepto 和原生 js下钥星，#container dom 元素谦炒，還在內存里jquery 的 empty和 remove會幫助開發(fā)者避免這個問題
$('#container').bind('click', function(){
????console.log('click');
}).off('click').remove();
//把事件清除了乖篷，即可從內存中移除
4）?被遺忘的計時器或回調函數(shù)
var someResource = getData();
setInterval(function() {
????var node = document.getElementById('Node');
????if(node) {? ? ? ? // 處理 node 和 someResource
????????node.innerHTML = JSON.stringify(someResource));
}}, 1000);
修改：
var element = document.getElementById('button');
function onClick(event) {
????element.innerHTML = 'text';
}
element.addEventListener('click', onClick);
22. ajax撕蔼；
（參考鏈接：?http://www.runoob.com/ajax/ajax-tutorial.html
???????????????????http://3ms.huawei.com/km/blogs/details/5434911）
23. map鲸沮、filter讼溺、reduce相關怒坯；
（參考鏈接：https://atendesigngroup.com/blog/array-map-filter-and-reduce-js
? ? ? ? ? ? ? ? ? ? http://zerosoul.github.io/2016/12/06/array-filter-map-reduce-in-js/）
24. Map和Set；（參考鏈接）
Map是一組鍵值對的結構嬉荆，具有極快的查找速度汪茧。
例：var m =new Map([['Michael',95], ['Bob',75], ['Tracy',85]]);
m.get('Michael');// 95
Set和Map類似舱污，也是一組key的集合慌闭，但不存儲value省古。由于key不能重復，所以惜互，在Set中描验，沒有重復的key膘流。
要創(chuàng)建一個Set呼股，需要提供一個Array作為輸入，或者直接創(chuàng)建一個空Set：
var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
25. this相關(注意箭頭函數(shù)的this指向問題)允扇；（參考鏈接）
1）ES6中箭頭函數(shù)的this問題：
ES6 允許使用“箭頭”（=>）定義函數(shù)狭园，函數(shù)體內的this對象妙啃，就是定義時所在的對象揖赴，而不是使用時所在的對象燥滑。this對象的指向是可變的铭拧，但是在箭頭函數(shù)中搀菩，它是固定的，箭頭函數(shù)根本沒有自己的this州既，導致內部的this就是外層代碼塊的this。所以箭頭函數(shù)不能做構造函數(shù)，?也不能用call()实束、apply()磕洪、bind()這些方法去改變this的指向析显。
26. call、apply歹嘹、bind尺上；（參考鏈接）
27. 移動端開發(fā)相關怎抛；
（參考鏈接：https://juejin.im/post/5a77d6086fb9a0634417bfd3
??????????????????????http://www.restran.net/2015/05/14/mobile-web-front-end-collections/）
3、框架和工具相關
vue數(shù)據(jù)綁定原理富稻；
定義：vue的數(shù)據(jù)雙向綁定是基于Object.defineProperty方法椭赋，通過定義data屬性的get和set函數(shù)來監(jiān)聽數(shù)據(jù)對象的變化纹份，一旦變化蔓涧，vue利用發(fā)布訂閱模式，通知訂閱者執(zhí)行回調函數(shù)，更新dom鸠姨。
參考鏈接：vue數(shù)據(jù)綁定原理
vue父子組件和兄弟組件的通信問題；
1）父子組件通信：
1巍糯、父組件使用 props 把數(shù)據(jù)傳給子組件祟峦。
2徙鱼、子組件使用 $emit 觸發(fā)父組件的自定義事件宅楞。
2）兄弟組件通信：
創(chuàng)建一個事件中心，相當于中轉站袱吆，可以用它來傳遞事件和接收事件厌衙。
let Hub = new Vue(); //創(chuàng)建事件中心
組件1觸發(fā)：
methods: {
????eve() { Hub.$emit('change','hehe');? }??//Hub觸發(fā)事件
}
組件2接收:
created() {
????Hub.$on('change', () => {??//Hub接收事件
????????this.msg = 'hehe';??
????});
}
vuex的原理；
????參考鏈接：到底vuex是什么
vuex的action和mutation的異步操作和同步操作問題杆故；
????參考鏈接：vuex2.0 基本使用(2) --- mutation 和 action
vue的事件監(jiān)聽迅箩；
? ? 參考鏈接：事件監(jiān)聽
vue-router獲取自定義參數(shù)处铛；
傳值：
this.$router.push(name:"test",params:{data:"test"});
this.$router.push(path:"/test",query:{data:"test"});
取值（與傳值一一對應）：
$route.params? ? ? 類型:?Object
一個 key/value 對象龄砰，包含了動態(tài)片段和全匹配片段固蚤，如果沒有路由參數(shù)燎孟，就是一個空對象狸捅。
this.$route.params.data? //"test"
$route.query? ? ? ?類型:?Object
一個 key/value 對象朽褪，表示 URL 查詢參數(shù)。例如，對于路徑?/foo?user=1，則有?$route.query.user == 1，如果沒有查詢參數(shù)，則是個空對象实夹。
this.$route.query.data? //"test"
? ??????query和params使用區(qū)別
vue-router 路由模式（url中#號的解析）缴淋；
????參考鏈接：vueRouter - mode API
????1）Hash模式：使用 URL hash 值來作路由。支持所有瀏覽器三妈，包括不支持 HTML5 History Api 的瀏覽器咖祭。（URL中帶有#號）：
http://localhost:8080/#/
????2）History模式：依賴HTML5 History API 和服務器配置。HTML5 History模式，(URL中不帶有#號）:
export default new Router ({
?????mode: 'history',
????routes: [ {
????????path: '/',
????????name: '/',
????????component: main
????} ]
})
????3）Abstract模式：支持所有javascript運行模式桦沉，如 Node.js 服務器端埠褪。如果發(fā)現(xiàn)沒有瀏覽器的API屠升，路由會自動強制進入這個模式翰萨。
vue-router的go相關脏答；
router.go(n)：類似 window.history.go(n)，在 history 記錄中向前或后退n步(n為int類型)
router.push(location)：導航到不同的 URL，則使用 router.push 方法雳锋。這個方法會向 history 棧添加一個新的記錄粤蝎，所以延柠，當用戶點擊瀏覽器后退按鈕時，則回到之前的 URL影锈。
router.replace(location)：跟 router.push 很像，唯一的不同就是蝉绷，它不會向 history 添加新記錄鸭廷，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄。
vue組件設計相關熔吗；
? ? 1）用一些功能單一的小模塊來組織應用辆床，較小的模塊更容易看懂、維護桅狠、復用和調試 （每個組件應該保持單一讼载、獨立轿秧、可復用、可測試）维雇；
????2)組件命名應該遵從以下幾點原則：
????????有意義: 名字不要太詳細淤刃，也不要太抽象。
????????短: 名字最好是2-3個單詞吱型。
????????可讀的:容易讓人能讀出來以便我們可以更容易的討論它逸贾。
????vue組件也應該遵循以下原則：
????????遵從元素命名規(guī)范，包括連字符津滞，不要使用保留字
????????為了在其他項目中復用铝侵，應該以某個模塊名字作為命名空間。
????3）把復雜的語法移動到methods或者計算屬性中触徐，避免使用行內表達式咪鲜；
????4）保證組件的props簡單，保證接口簡單撞鹉，便于開發(fā)理解維護疟丙，同時進行props限制，比如檢查是否存在鸟雏，設置默認值享郊，設置類型校驗等；
????參考鏈接：vue組件最佳實踐
模塊化的工具孝鹊；
????參考鏈接：常用模塊化方案
webpack打包優(yōu)化炊琉；
????參考鏈接：webpack打包體積優(yōu)化
設計一個自己的打包工具需要設計哪些主要功能；
? ? 參考鏈接：前端打包工具
babel相關又活；
????參考鏈接：Babel 從入門到插件開發(fā)? ?
?????????????????????? Babel
mvvm的好處苔咪；
????參考鏈接：MVVM的優(yōu)點和缺點
????????????????????MVVM架構的優(yōu)缺點
jquery的一些基本用法；
????參考鏈接：jquery的一些基本用法
????????????????????????jQuery的詳細解析以及用法
lodash相關柳骄；
????參考鏈接：官方文檔
vue和react的對比团赏；
????參考鏈接：Vue.js與React的全面對比
vue和jquery的對比；
jQuery是使用選擇器（$）選取DOM對象夹界，對其進行賦值馆里、取值、事件綁定等操作可柿，其實和原生的HTML的區(qū)別只在于可以更方便的選取和操作DOM對象鸠踪，而數(shù)據(jù)和界面是在一起的。比如需要獲取label標簽的內容：$("lable").val();,它還是依賴DOM元素的值复斥。
?Vue則是通過Vue對象將數(shù)據(jù)和View完全分離開來了营密。對數(shù)據(jù)進行操作不再需要引用相應的DOM對象，可以說數(shù)據(jù)和View是分離的目锭，他們通過Vue對象這個vm實現(xiàn)相互的綁定评汰。這就是傳說中的MVVM纷捞。
vue適用的場景：復雜數(shù)據(jù)操作的后臺頁面，表單填寫頁面被去；
jquery適用的場景：比如說一些html5的動畫頁面主儡，一些需要js來操作頁面樣式的頁面；
然而二者也是可以結合起來一起使用的惨缆，vue側重數(shù)據(jù)綁定糜值，jquery側重樣式操作，動畫效果等坯墨，則會更加高效率的完成業(yè)務需求寂汇。
webGL：
????參考鏈接：webGL—MDN
