1. 47道基礎的VueJS面試題(附答案)
1、什麼是MVVM框架？它適用於哪些場景？
MVVM框架是一個 Model-View-View Model框架，其中 ViewModel連接模型Model）和視圖（View）。
在數據操作比較多的場景中，MVVM框架更合適，有助於通過操作數據渲染頁面。
2、active- class是哪個組件的屬性？
它是 vue-router模塊的 router-link組件的屬性。
3、如何定義Vue- router的動態路由？
在靜態路由名稱前面添加冒號，例如，設置id動態路由參數，為路由對象的path屬性設置/:id。
4、如何獲取傳過來的動態參數？
在組件中，使用$router對象的 params.id，即 $route.params.id 。
5、vue- router有哪幾種導航鉤子？
有3種。
第一種是全局導航鉤子：router.beforeEach(to,from,next)。作用是跳轉前進行判斷攔截。
第二種是組件內的鉤子。
第三種是單獨路由獨享組件。
6、mint-ui是什麼？如何使用？
它是基於 Vue.js的前端組件庫。用npm安裝，然後通過 import導入樣式和javaScript代碼。vue.use(mintUi)用於實現全局引入， import {Toast} from ' mint-ui'用於在單個組件局部引入。
7、V-model是什麼？有什麼作用？
v- model是 Vue. js中的一條指令，可以實現數據的雙向綁定。
8、Vue.js中標簽如何綁定事件？
綁定事件有兩種方式。
第一種，通過v-on指令， 。
第二種，通過@語法糖， input@ click= doLog()/>。
9、vuex是什麼？如何使用？在哪種功能場景中使用它？
vuex是針對 Vue. js框架實現的狀態管理系統。
為了使用vuex，要引入 store，並注入Vue.js組件中，在組件內部即可通過$ ostore訪問 store對象。
使用場景包括：在單頁應用中，用於組件之間的通信，例如音樂播放、登錄狀態管理、加入購物車等。
10、如何實現自定義指令？它有哪些鉤子函數？還有哪些鉤子函數參數？
自定義指令包括以下兩種。
它有如下鉤子函數。
鉤子函數的參數如下。
11、至少說出vue.js中的4種指令和它們的用法。
相關指令及其用法如下。
12、Vue-router是什麼？它有哪些組件？
它是 Vue. js的路由插件。組件包括 router-link和 router-vIew。
13、導航鉤子有哪些？它們有哪些參數？
導航鉤子又稱導航守衛，又分為全局鉤子、單個路由獨享鈞子和組件級鈞子。
全局鉤子有 beforeEach、beforeResolve(Vue2.5.0新增的)、 afterEach。
單個路由獨享鉤子有 beforeEnter。
組件級鉤子有 beforeRouteEnter、 beforeRouteUpdate(Vue2.2新增的) beforeRouteLeave。
它們有以下參數。
14、Vue.js的雙向數據綁定原理是什麼？
具體步驟如下。
（1）對需要觀察的數據對象進行遞歸遍歷，包括子屬性對象的屬性，設置set和get特性方法。當給這個對象的某個值賦值時，會觸發綁定的set特性方法，於是就能監聽到數據變化。
（4）MVVM是數據綁定的入口，整合了 Observer、 Compile和 Watcher三者，通過Observer來監聽自己的 model數據變化，通過 Compile來解析編譯模板指令，最終利用Watcher搭起 Observer和 Compile之間的通信橋梁，達到數據變化通知視圖更新的效果。利用視圖交互，變化更新數據 model變更的雙向綁定效果。
15、請詳細說明你對Vue.js生命周期的理解。
總共分為8個階段，分別為 beforeCreate、created、beforeMount、 mounted、beforeUpdate、 updated、 beforeDestroyed、 destroyed。
當使用組件的kep- alive功能時，增加以下兩個周期。
Vue2.5.0版本新增了一個周期鉤子：ErrorCaptured，當捕獲一個來自子孫組件的錯誤時調用。
16、請描述封裝Vue組件的作用過程。
組件可以提升整個項目的開發效率，能夠把頁面抽象成多個相對獨立的模塊，解決了傳統項目開發中效率低、難維護、復用性等問題。
使用Vue.extend方法創建一個組件，使用Vue.component方法注冊組件。子組件需要數據，可以在 props中接收數據。而子組件修改妤數據後，若想把數據傳遞給父組件，可以採用emit方法。
17、你是怎樣認識vuex的？
vuex可以理解為一種開發模式或框架。它是對 Vue. js框架數據層面的擴展。通過狀態（數據源）集中管理驅動組件的變化。應用的狀態集中放在 store中。改變狀態的方式是提交 mutations，這是個同步的事務。非同步邏輯應該封裝在 action中。
18、Vue- loader是什麼？它的用途有哪些？
它是解析.vue文件的一個載入器，可以將 template/js/style轉換成 JavaScript模塊。
用途是通過 vue-loader, JavaScript可以寫 EMAScript 6語法， style樣式可以應用scss或less, template可以添加jade語法等。
19、請說出vue.cli項目的src目錄中每個文件夾和文件的用法。
assets文件夾存放靜態資源；components存放組件；router定義路由相關的配置；view是視圖；app. vue是一個應用主組件；main.js是入口文件。
20、在Vue.cli中怎樣使用自定義組件？在使用過程中你遇到過哪些問題？
具體步驟如下。
（1）在 components目錄中新建組件文件，腳本一定要導出暴露的介面。
（2）導入需要用到的頁面（組件）。
（3）將導入的組件注入uejs的子組件的 components屬性中。
（4）在 template的視圖中使用自定義組件。
21、談談你對vue.js的 template編譯的理解。
簡而言之，就是首先轉化成AST（ Abstract Syntax Tree，抽象語法樹），即將源代碼語法結構抽象成樹狀表現形式，然後通過 render函數進行渲染，並返回VNode（ Vue. js的虛擬DOM節點）。
詳細步驟如下。
（1）通過 compile編譯器把 template編譯成AST, compile是 create Compiler的返回值， createCompiler用來創建編譯器。另外， compile還負責合並 option。
（2）AST會經過 generate（將AST轉化成 render funtion字元串的過程）得到 render函數， render的返回值是 VNode, VNode是 Vue.Js的虛擬DOM節點，裡面有標簽名子節點、文本等。
22、說一下Vue.js中的MVVM模式。
MVVM模式即 Model- View- ViewModel模式。
Vue.js是通過數據驅動的， Vue. js實例化對象將DOM和數據進行綁定，一旦綁定，和數據將保持同步，每當數據發生變化，DOM也會隨著變化。
ViewModel是Vue.js的核心，它是 Vue.js的一個實例。Vue.js會針對某個HTML元素進行實例化，這個HTML元素可以是body，也可以是某個CSS選擇器所指代的元素。
DOM Listeners和 Data Bindings是實現雙向綁定的關鍵。DOM Listeners監聽頁面所有View層中的DOM元素，當發生變化時，Model層的數據隨之變化。Data Bindings會監聽 Model層的數據，當數據發生變化時，View層的DOM元素也隨之變化。
23、v-show指令和v-if指令的區別是什麼？
v-show與v-if都是條件渲染指令。不同的是，無論v-show的值為true或 false，元素都會存在於HTML頁面中；而只有當v-if的值為true時，元素才會存在於HTML頁面中。v-show指令是通過修改元素的 style屬性值實現的。
24、如何讓CSS只在當前組件中起作用？
在每一個Vue.js組件中都可以定義各自的CSS、 JavaScript代碼。如果希望組件內寫的CSS只對當前組件起作用，只需要在Style標簽添加Scoped屬性，即 。
25、如何創建vue.js組件？
在vue.js中，組件要先注冊，然後才能使用。具體代碼如下
26、如何實現路由嵌套？如何進行頁面跳轉？
路由嵌套會將其他組件渲染到該組件內，而不是使整個頁面跳轉到 router-view定義組件渲染的位置。要進行頁面跳轉，就要將頁面渲染到根組件內，可做如下配置。
首先，實例化根組件，在根組件中定義組件渲染容器。然後，掛載路由，當切換路由時，將會切換整個頁面。
27、ref屬性有什麼作用？
有時候，為了在組件內部可以直接訪問組件內部的一些元素，可以定義該屬性此時可以在組件內部通過this. $refs屬性，更快捷地訪問設置ref屬性的元素。這是一個原生的DOM元素，要使用原生 DOM API操作它們，例如以下代碼。
注意：在Ve2.0中，ref屬性替代了1.0版本中v-el指令的功能。
28、Vue. js是什麼？
Vue. js的目標是通過盡可能簡單的API實現響應式的數據綁定的組件開發。
29、描述vue.js的一些特性。
Vue.js有以下持性。
（1）MVVM模式。
數據模型（ Model）發生改變，視圖（View）監聽到變化，也同步改變；視圖（View）發生改變，數據模型（ Model）監聽到改變，也同步改變。
使用MVVM模式有幾大好處。
（2）組件化開發
（3）指令系統
（4）Vue2.0開始支持虛擬DOM。
但在Vue1.0中，操作的是真實DOM元素而不是虛擬DOM，虛擬DOM可以提升頁面的渲染性能。
30、描述vue.js的特點。
Vue. js有以下特點。
31、在vue.js中如何綁定事件？
通過在v-on後跟事件名稱=「事件回調函數( )」的語法綁定事件。事件回調函數的參數集合( )可有可無。如果存在參數集合( )，事件回調函數的參數需要主動傳遞，使用事件對象要傳遞 $event。當然，此時也可以傳遞一些其他自定義數據。如果沒有參數集合，此時事件回調函數有一個默認參數，就是事件對象。事件回調函數要定義在組件的 methods屬性中，作用域是 Vue. js實例化對象，因此在方法中，可以通過this使用 Vue. js中的數據以及方法，也可以通過@語法糖快速綁定事件，如@事件名稱=「事件回調函數( )」。
32、請說明 組件的作用。
當 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。
keep-alive>是一個抽象組件，它自身不會渲染一個DOM元素，也不會出現在父組件鏈中。
當在 內切換組件時，它的 activated和 deactivated這兩個生命周期鈞子函數將會執行。
33、axios是什麼？如何使用它？
axios是在vue2.0中用來替換 vue-resource.js插件的一個模塊，是一個請求後台的模。
用 npm install axios安裝 axios。基於 EMAScript 6 的 EMAScript Mole規范，通過 import關鍵字將 axios導入，並添加到 Vue. js類的原型中。這樣每個組件（包括vue.js實例化對象）都將繼承該方法對象。它定義了get、post等方法，可以發送get或者post請求。在then方法中注冊成功後的回調函數，通過箭頭函數的作用域特徵，可以直接訪問組件實例化對象，存儲返回的數據。
34、在 axios中，當調用 axios.post('api/user'）時進行的是什麼操作？
當調用post方法表示在發送post非同步請求。
35、sass是什麼？如何在ue中安裝和使用？
sass是一種CSS預編譯語言安裝和使用步驟如下。
（1）用npm安裝載入程序（ sass-loader、 css-loader等載入程序)。
（2）在 webpack. config. js中配置sass載入程序。
（3）在組件的 style標簽中加上lang屬性，例如lang="scss"。
36、如何在 Vue. js中循環插入圖片？
對「src」屬性插值將導致404請求錯誤。應使用 v-bind:src格式代替。
代碼如下：
2. js面試題
1.eventLoop
2.setTimeout 誤差原因
3.深淺拷貝
4.跨域原因及解決方案
5.css放在頭部，js放在尾部
6.css觸發bfc
7.webpack plugin和loader區別
8.前端優化
9.協商緩存
10.長列表優化
11.webview交互
12.vue響應式原理
13.原型
14.演算法題：數組中有n個元素，排列
EventLoop是計算機系統的運行機制，js就是運行這個機制，因為js是單線程語言，所以一旦遇到一個耗時很長的任務就會卡住，js為了解決這個問題就有了EventLoop
Event Loop是一個程序結構，用於等待和發送消息和事件。
就是在程序中有了兩個線程，一個負責應用本身，主線程，另一個負責主線程和其它進程，稱為EventLoop
1、js是單線程語言
基本數據類型存放在棧中的簡單數據段
引用數據類型存放在堆中的對象
因為定時器是宏任務，如果執行棧的時間大於定時器花費的時間，那麼定時器的回調在 宏任務(macrotask) 里，來不及去調用，所有這個時間會有誤差。所以就會有誤差
宏任務是宿主發起的比如script,setTimeout
css放在頭部是因為頁面載入html生成dom樹的時候就可以同時對dom樹進行渲染，防止閃跳，白屏
js放在尾部是因為js會修改dom樹，需要一個穩定的dom樹
BFC是css的一個布局概念，塊級格式化上下文
浮動float不為none的時候
定位為position:absolute和fixed的
display的時候
overflow不為visible
解決浮動父元素坍塌問題
解決自適應布局的問題
解決外邊距垂直方向重合問題
loader是文件載入器，運行在nodejs中，並對文件進行打包，壓縮轉換
plugin是插件，用於拓展webpack的功能
淺拷貝有兩種定於，第一種是賦值，第二種是拷貝對象的第一層屬性，深層還是一樣的
深拷貝是指將對象拷貝一份，無論如何修改都不會改變原有的
響應式原理就是當數據發生改變的時候視圖也會跟著更新
VUE是利用了Object.defineProperty的方法裡面的setter 與getter方法的觀察者模式來實現。
3. 面試題匯總-JS篇01
場景：var str = 「hello world!」
a.str.char() //返回指定下標的值
Str.char(2) //」l」
b.Str.indexOf() //返回指定值的下標
Str.indexOf(『e』) //』1』
c.Str.lastIndexOf() //返回最後指定值的下標
Str.lastIndexOf(『l』) //』9』
d.Str.concat() //拼接字元串
Str.concat(「mother fuck!」) //」hello world!mother fuck!」
Console.log(str) //」hello world!」
e.Str.substr(n,m) //從n開始截取m個字元
Str.substr(1,2) //』el』
f.Str.substring(n,m) //從n開始m結束截取字元串，不包含m
Str.substring(6,11) //」world」
g.Str.slice(n,m) //同substring，slice可以截取數組，substring不能截取數組
Str.slice(6,11) //」world」
h.Str.split //返回數組
Str.split(『 』) //[『hello』, 『world!』]
Str.aplit(『l』) //[『he』, 『』, 『o wor』, 『d!』]
i.Str.replace() //以下三個方法都是通過正則表達式對原字元串進行更改的
j.Str.match()
k.Str.search()
場景：const obj = {x: 0, y: 1}
Const obj2 = {x: 1, z: 2,fn: {number: 1}}
a.Object.assign() //合並對象，實行的是淺拷貝
Object.assign(obj, obj2)
Console.log(obj) //{x: 1, y: 1, z: 2,fn: {number: 1}}
b.Object.create() //新建一個對象，可以使用原型鏈繼承
Var newObj = Object.create(obj, {newValue: 『newAdd』})
Console.log(newObj) //{newValue: 『newAdd』}
Console.log(newObj.x) //0
c.Object.defineProperties() //往對象裡面添加或修改新屬性，值類型
Object.defineProperties(obj, {name: {value: 『歐』}}) //添加屬性
Console.log(obj) //{x: 0, y: 1, name: 『歐』}
Object.defineProperties(obj, {name: {value: 『林』, writable: true}}) //修改屬性
Console.log(obj) //{x: 0, y: 1, name: 『林』}
d.Object.defineProperty() //往對象裡面添加新屬性，可以是引用類型
Object.defineProperty(obj, 『name』, {value: function() {return 『歐』}})
Console.log(obj.name()) //』歐』
e.Object.keys() //返回對象所有key，以數組類型輸出
Console.log(Object.keys(obj)) //[『x』, 『y』]
f.Object.values() //返回對象所有的value，以數組類型輸出
Console.log(Object.values(obj)) //[0, 1]
場景：var arr = new array(1,2,3)
a.push() //向數組尾部添加元素
arr.push(4)
console.log(arr) //[1,2,3,4]
b.unshift() //向數組頭部添加元素
arr.unshift(0)
console.log(arr) //[0,1,2,3]
c.pop() //刪除數組尾部的元素
arr.pop()
console.log(arr) //[1,2]
d.shift() //刪除數組頭部的元素
arr.shift()
console.log(arr) //[2,3]
e.indexOf() //返回指定元素的下標
arr.indexOf(2) //1
f.slice(n,m) //從n開始m結束截取數組，不包括m,此方法不會更改元數組
console.log(arr.slice(1,2)) // [2]
console.log(arr) //[1,2,3]
g.splice() //刪除數組指定元素
arr.splice(1) //刪除從下標1開始到最後的所有元素
console.log(arr) //[1]
arr.splice(1,2) //刪除從下標1開始往後的2個元素
console.log(arr) //[1]
arr.splice(1,2,3,4) //刪除從下標1開始往後2個元素並用3,4替代
console.log(arr) //[1,3,4]
h.reverse() //數組翻轉
arr.reverse()
console.log(arr) //[3,2,1]
i.sort() //從小到大排序數組
arr.sort()
console.log(arr) //[1,2,3]
j.forEach() //以下提供了幾種遍歷的方法
k.map()
l.filter() //數組過濾，如果數組的元素的對象，可以通過對象的屬性名來過濾元素，用法跟C#的Linq一樣。
var newArr = [{id:1,name:』元素1』},{id:2,name:』元素2』}]
console.log(newArr.filter(item => item.id===1)) //[{id:1,name:』元素1』}]
console.log(newArr) //[{id:1,name:』元素1』},{id:2,name:』元素2』}]
m.every()
n.some()
o.find()
p.findIndex()
增刪改查
場景：<div class=」div」 id=」div」></div>
a.document.createElement() //創建節點
var newDiv = document.createElement()
b.document.craeteTextNode() //創建文本節點
var newDivText = document.craeteTextNode(『這是新創建的節點』)
c.div.appendChild() //向節點添加最後一個子節點
newDiv.appendChild(newDivText)
d.document.getElementById() //通過Id獲取節點
var div = document.getElementById(『div』)
e.div.parentNode //獲取父節點
f.div.childNode //獲取子節點，返回一個集合
var child = div.childNodes
g.div.nextSibling，div.previousSibling，div.firstChild，div.lastChild
分別為，獲取下一個兄弟節點，上一個兄弟節點，第一個子節點，最後一個子節點。
h.div.insetBefore() //插入到特定位置
div.insetBefore(newDiv, null) //插入到最後，跟appendchild用法一樣
div.insetBefore(newDiv, div.firstChild) //插入到第一個子節點之前
div.insetBefore(newDiv, div.lastChild) //插入到最後節點之前
i.div.replaceChild() //替換節點
div.replaceChild(newDiv, div.firstChild) //替換第一個子節點，原節點會被刪除
j.div.removeChild() //刪除子節點
k.cloneNode(true/false) //克隆節點，true為深克隆，false為淺克隆
l.document.querySelector(),document.querySelectorAll() //通過css選擇器搜索匹配的節點，querySelector返回匹配的第一個節點，querySelectorAll返回所有節點
document.querySelector(『div.div』) //返回class為div的div標簽節點
document.querySelector(『#div』) //返回id為div的節點
m.document.getElementsByTagName(),document.getElementsByName(),document.getElementsByClassName() //返回符合需求的集合
n.div.setAttribute() //給元素添加屬性
div.setAttribute(『name』: 『div』)
o.removeAttribute(),getAttribute(),hasAttribute() //各種操作屬性的方法
4. JS面試題：[1, 2, 3].map(parseInt)
顯而易見的，在該題目中有兩個JavaScript方法，一個是 Array.prototype.map ，另一個是 parseInt() 。
首先是 Array.prototype.map 方法，這是ES5給出的數組實例的方法。給map傳入一個回調函數，map就會遍歷數組，將相關信息一起傳入回調函數，並取回這個回調函數的返回值作為新數組的對應索引的元素，並返回這個新數組。
回調函數每次可以拿到三個值——（1）數組元素（2）索引值（3）數組本身
註：傳遞給map()的函數的調用方式和傳遞給forEach()的函數的調用方式一樣，但傳遞給map()的函數應該要有返回值。map()返回的是新數組，它不修改調用數組。如果調用數組是稀疏數組，則返回的數組也是稀疏數組——具有相同的長度和相同的缺失元素。
Array.prototype.map方法的底層實現
parseInt函數的作用是將第一個字元串轉換為數字，它接受兩個參數，第一個參數是我們需要轉換的字元串，第二個參數是可選的，它代表字元串的基數，即該參數表明我們需要通過幾進制去對這個字元串完成轉換，如2，就代表字元串是用二進製表達的。如果我們省略第二個參數，當字元串以 0x 或 0X 開頭，它就會被當作十六進制，否則被當作十進制。
特殊情況：當parseInt的第二個參數為0時，相當於第二個參數沒有傳，字元串會被當成十進制，該情況也是最常用的情況。
此外，當字元串的第一個非空格字元無法轉換成數字時，也會返回NaN。
下面給出一些例子：
[1, 2, 3].map(parseInt)的parseInt 作為回調函數拿到了map提供的三個參數，得益於JavaScript是弱類型語言，所以傳參數量不匹配也不會報錯，只會把不用的參數拋棄掉，將缺少的參數設置為undefined。
這里的parseInt只用到了兩個參數，分別是 數組元素 和 索引值 。
實際上我們可以把題目展開成如下函數：
如此便清晰明了了，我們很容易得到以下結果：
所以最後我們得到返回結果： [1, NaN, NaN]
5. js基礎面試題61-70道題目
61.作用域的分類
參考答案：塊作用域、詞法作用域、動態作用域
解析：
1 塊作用域 花括弧 {}
2 詞法作用域（js 屬於詞法作用域） 作用域只跟在何處被創建有關系，跟在何處被調用沒有關系
3 動態作用域 作用域只跟在何處被調用有關系，跟在何處被創建沒有關系
參與互動
62.js 屬於哪種作用域
參考答案：詞法作用域（函數作用域）
解析：
參與互動
63.浮點數精度
參考答案：參考
參與互動
64.自執行函數? 用於什麼場景？好處?
參考答案：
好處：防止變數彌散到全局，以免各種 js 庫沖突。隔離作用域避免污染，或者截斷作用域鏈，避免閉包造成引用變數無法釋放。利用立即執行特性，返回需要的業務函數或對象，避免每次通過條件判斷來處理
場景：一般用於框架、插件等場景
參與互動
65.多個頁面之間如何進行通信
參考答案：有如下幾個方式：
參與互動
66.css 動畫和 js 動畫的差異
參考答案：
1.代碼復雜度，js 動畫代碼相對復雜一些 2.動畫運行時，對動畫的控製程度上，js 能夠讓動畫，暫停，取消，終止，css 動畫不能添加事件 3.動畫性能看，js 動畫多了一個 js 解析的過程，性能不如 css 動畫好
解析：參考
參與互動
67.如何做到修改 url 參數頁面不刷新
參考答案：
HTML5 引入了 history.pushState() 和 history.replaceState() 方法，它們分別可以添加和修改 歷史 記錄條目。
假設當前頁面為 foo.html ，執行上述代碼後會變為 bar.html ，點擊瀏覽器後退，會變為 foo.html ，但瀏覽器並不會刷新。 pushState() 需要三個參數: 一個狀態對象, 一個標題 (目前被忽略), 和 (可選的) 一個 URL.讓我們來解釋下這三個參數詳細內容：
參與互動
68.數組方法 pop() push() unshift() shift()
參考答案：
參與互動
69.事件綁定與普通事件有什麼區別
參考答案：
參與互動
70.IE 和 DOM 事件流的區別
參考答案：
1.事件流的區別
IE 採用冒泡型事件 Netscape 使用捕獲型事件 DOM 使用先捕獲後冒泡型事件 示例：
復制代碼代碼如下:
冒泡型事件模型： button->p->body (IE 事件流)
捕獲型事件模型： body->p->button (Netscape 事件流)
DOM 事件模型： body->p->button->button->p->body (先捕獲後冒泡)
2.事件偵聽函數的區別
IE 使用:
DOM 使用：
bCapture 參數用於設置事件綁定的階段，true 為捕獲階段，false 為冒泡階段。
參與互動
6. Node.js常見面試題
Node.js常見面試題
Node、js常見面試題，如果面試緊張且不知道面試會問什麼問題，那面試失敗率會很高，但如知道面試大概會被問到哪些問題的話，那成功率自然會很高，來看Node、js常見面試題。
在進入正文之前，需要提前聲明兩點：
這些問題只是Node、js知識體系的一個局部，並不能完全考察被面試者的實際開發能力。
對現實世界開發中遇到的問題，需要的是隨機應變與團隊合作，所以你可以嘗試結對編程。
Node、js面試題列表
什麼是錯誤優先的回調函數?
你如何避免回調地獄?
你如何用Node來監聽80埠?
什麼是事件循環?
什麼工具可以用來保證一致的風格?
運算錯誤與程序員錯誤的區別?
為什麼npm是有用的?
什麼是stub?舉個使用場景?
什麼是測試金字塔?當我們談到HTTP API時，我們如何實施它?
你最喜歡的HTTP框架，並說明原因?
現在，我們依次來解答這些問題吧。
什麼是錯誤優先的回調函數?
錯誤優先的回調函數用於傳遞錯誤和數據。第一個參數始終應該是一個錯誤對象， 用於檢查程序是否發生了錯誤。其餘的參數用於傳遞數據。例如：
fs、readFile(filePath, function(err, data) {
if (err) { //handle the error } // use the data object});
解析：這個題目的主要作用在於檢查被面試者對於Node中非同步操作的一些基本知識的掌握。
如何避免回調地獄
你可以有如下幾個方法：
模塊化：將回調函數分割為獨立的函數
使用Promises
使用yield來計算生成器或Promise
解析：這個問題有很多種答案，取決你使用的場景，例如ES6, ES7，或者一些控制流庫。
在Node中你如何監聽80埠
1、先來談談你自己吧?
您好!我叫×××，於今年畢業於杭州電子科技大學國際經濟貿易專業，臨海本地人。我的座右銘是「一分耕耘一分收獲」，自己畢竟也年輕，所以有更大地發展空間去為自己心儀的工作所努力。
選擇×××這一崗位也是在分析了自己的特長之後才慎重選擇的，我的特長是交際，不論是大學還是臨海，都有許多朋友。而且在大學實習時也接觸過相關的工作，經濟、法律、營銷等專業基礎知識也比較扎實，所以我相信自己的選擇，也是對自己的一種考驗與肯定。謝謝
2、你大學從事過哪些工作?
3、對你來說工作中最重要的是什麼?
我覺得最重要的是處理好個人利益與企業利益的關系。自己一旦進入一個企業，就應該以企業利益為重，個人能力是個人在企業的一張名片，個人的價值在於你給企業帶來的收益。
而處理好個人利益與企業利益的時候，還能兼顧到團隊精神，並扎實自己的專業技能與培養恆心與信心。所以，我認為處理好兩個利益關系是最重要的。
4、你覺得×××(崗位)應該具備哪些素質?
①懂得推銷自己，克服在客戶面前的膽怯心理 ②在不傷及客戶利益的基礎上，盡量達到「雙贏、互利」的目的 ③需具有廣泛的多方協調能力，有敏銳的洞察力和市場分析預測能力 ④擁有扎實的專業知識和實踐經驗
⑤能分清主次客戶，提高工作效率，能及時關注市場上櫃卷煙的生命周期狀況及重點品牌的市場走向 ⑥為客戶補充貨源，阻止外來卷煙上櫃，若發現私、假卷煙，也需及時反饋給業務主管部門 ⑦及時檢查自己任務的完成情況，指導客戶合理安排卷煙庫存量。
5、你為什麼願意為本公司工作?
我覺得選擇一份好的工作是實現自我價值的體現，煙草公司是屬於國有煙草專賣專營的商業批發企業。
當然，自己選擇這個公司，是堅信本公司的美好前景，也是為自己選擇一個能充分發揮能力的舞台。
選擇這個公司，我覺得不應該僅僅關注公司的薪水與福利，而應該往自我能力和競爭力上思考，畢竟年輕的自己還有許多東西需要汲取，所以選擇了這個公司的這份工作，學習的過程任重道遠。
6、你認為公司為什麼要聘用你?
第一、我有很高的熱情去做好這個工作
第二、我有信心把這份工作做好
第三、我有一定的工作經驗
7、如果我們聘用你，你會待多久?
既然選擇了這份工作，就沒有想過一進來就考慮跳槽，應屆生頻繁地跳槽是一個社會現象，但我覺得，企業與自己是一個雙向選擇，但選擇不能盲目，自己既然選擇了企業，那表示對這份工作有意向，而企業聘用自己，說明企業有心栽培。
所以我不會考慮跳槽問題，而更多的思考是如何去做好一份工作，去實現企業與自己的價值。
8、你的`長處是什麼?
認識我的朋友都說我的長處是交際，自己也在這方面下了一些功夫，我堅信只要努力了即使達不到預計的成功都是一種收獲。
其次，我還擅長書法、國畫，在學生時代也獲得過一些獎次。悠閑時也愛看些書籍，上上網，發表一些見解獨特的文章。
9、什麼是你最大的弱點?
人無完人，我覺得自己的弱點是人事方面經驗不是很豐富。相關的工作經驗還處於培養時期，自己的一些獨特想法與付諸實踐所取得的效果還有一定的差距。並且一些情況下自信過於強烈，對失敗的認識還不是很透徹。不過既然認識到這些缺點，我也會慢慢去修正。謝謝
10、你的期望待遇是什麼?
我個人不是很在意剛進去時候的待遇，當然，期待的待遇是高的，不過這要等未來才能實現，剛進一個企業應該更好的展現自我，去博得大家的信任，去做好自己的本職工作，待遇問題等以後用事實說話。謝謝
11、先前你有沒有落實工作了?
很遺憾，由於自己的原因，離開杭州後一直在找一份自己喜歡的工作，以前的工作應該算是一種實習，實習結束後就回來了。自己也打算在臨海發展、
12、你的工作中最令你喜歡的部分是什麼?
我覺得最另自己喜歡的是完成了既定的工作任務，並給自己下達的第二天的任務也目標清晰，工作狀態高漲。我是一個喜歡有計劃性的人，喜歡把自己一段時間的工作計劃列成表格，喜歡從事具有挑戰性的工作。所以，可以說，最令我喜歡的部分是工作中的挑戰。
13、你找工作時最在乎的是什麼?請談一下你理性中的工作。
我覺得自己找工作最在乎的是能力的培養，主要包括團隊能力、分析預測能力和自我競爭力。工作中的能力是給企業甚至自己帶來驚喜的物質保證。我理性的工作就是有清晰的目標，有穩健的團隊，有奮斗的激情。
14、請介紹你的家庭
15、請談談在工作時曾經令你感到十分沮喪的一次經驗。
就是自己大二從事推廣××××(某某卡)的時候我們按照自己的經驗選擇了一個不錯的小區，但我們忽略了事前分析小區的人員分布，因為小區剛建不久，居住者大部分是租進來的外來務工人員，
他們自己沒有時間利用網路學習，更很少有孩子在那小區留住，所以我們在那推廣了一整天也才推出去一張卡。當時對自己的自信心有點打擊。
16、你曾經因為某一次特殊經驗而影響曰後地工作態度嗎?
我相信我不會，因為工作經驗是在不斷的積累，成功的工作經驗可以用來推廣到其他方面，失敗的工作經驗可以用於自己做更好的總結，「因為一棵樹而放棄一片森林」，我覺得是不可取的，應該看得遠一點。
17、如果我僱用你，你覺得可以為部門帶來什麼樣的貢獻?
剛進來，我會虛心向老的員工學習，積累工作經驗，當自己的專業技能達到一定程度的時候，我會盡最大的可能去拓展這一業務圈，讓公司用最少的成本去博得最大的價值。爭取為部門爭光。
18、你如何規劃未來，你認為5年後能達到什麼樣的成就?
第一年是業務培訓與起步時期，第二年開始是拓展時期，第三年在相關部門應該會有所建樹，5年後爭取在自己的崗位上做得最好。
19、你如何克服工作的低潮期?
每個人都可能因為周圍的變化而出現一定的心態波動，但這並不是影響工作的關鍵因素。記得《鋼鐵是怎樣煉成》的男主人公說過「人應該支配習慣而非習慣支配人」，所以我覺得，在工作的低潮時期，更應該放輕鬆些，多想想為什麼會造成這個原因，多去用實際行動來克服低潮時心情。
20、談談你對加班的看法。
加班是因為自己的工作目標還沒有完成或需要臨時的補充，加班對一個公司還是自己來說都是突然的，如果既定的任務出色完成那加班的機會就少了。我覺得加班能充實自己，所以會一切服從公司的安排
7. 前端面試題2021（JS篇（上））
（水仙花數也被稱為超完全數字不變數、自戀數、自冪數、阿姆斯特朗數。水仙花數是指一個3位數，它的每個位上的數字的3次冪之和等於它本身 例如： 1~3 + 5~3 + 3~3 =153）
(質數就是在大於1的自然數中，除了1和它本身以外不在有其他因數的自然數)
a:11,b:10
A [] B [""] C [undefined] D [null]
A ['false'] B [false] C[0] D[]
A null B undefined C 「hello」 D「world」
A "llowo" B "llow" C "llo" D null
A "llowo" B "llow" C "llo" D null
A getYear（）
B getMonth（）
C getDay（）
DgetDate（）
A 基於對象
B 移動端優先
C 事件驅動
D 跨平台
A String
B Float
C Number
D Null
A 任意單個字元
B 任意單個字母
C 任意單個字母、數字、下劃線
D 任意單個字母、數學、下劃線、$符號
A <javascript>
B <script>
C <scripting>
D <js>
A var s = 'heloe'
B var n = 20
C var x = document.getElementsByTagName('box')
D var y = document.querySelectorAll('ul li')
A document.createElement
B document.createTextNode
C document.getElementById
B document.querySelector
A ele.innerText
B ele.innerHTML
C ele.textContent
D ele.htmlContent
插入排序的演算法描述的是一種簡單直觀的排序演算法，它的工作原理是通過構建有序序列，對於未排序的數據，在已排序序列中從後向前掃描，找到對應位置並插入
A.對數組里數據的排序可以用sort函數，如果排序效果非預期，可以給sort函數加一個排序的參數
B.reverse用於對數組數據的倒序排列
C.向數組的最後位置加一個新元素，可以用pop方法
D.unshift方法用於向數組刪除第一個元素
A.window.status = "已經選中該文本框"
B.document.status = '已經選中該文本框'
C.window.screen = '已經選中該文本框'
D.document.screen = '已經選中該文本框'
A <input type="button" value="new" onclick="open('new.html','_blank')" />
B. <input type="button" value="new" onclick="window.location = 'new.html'" />
C.<input type="button" value="new " onclick = "location.assign('new.html)">
D. <form target = "_blank" action="new.html">
<input type="submit" value="new" />
</form>
A.<script type="text/javascript">document.write(<h1>hello</h1>)</script>
B.<script type="text/javascript">document.write("<h1>hello</h1>")</script>
C.<script type="text/javascript"><h1>hello</h1></script>
D.<h1><script type="text/javascript">document.write("hello")</script></h1>
以下說法中正確的是（AD）
A.在頁面的第二個文本框中輸入內容後，當目標離開第二個文本框時，第一個文本框的內容不變
B.在頁面的第一個文本框中輸入內容後，當滑鼠離開第一個文本框時，將在第二個文本框中復制第一個文本框的內容
C.在頁面的第二個文本框中輸入內容後，當滑鼠離開第二個文本框時候，將在第一個文本框中復制第二個文本框的內容
D.在頁面的第一個文本框中輸入內容後，當滑鼠離開第一個文本框時，第二個文本框的內容不變
8. JS 燒腦面試題大賞
答案
2、1
解析
首先基本類型數據是按值傳遞的，所以執行b函數時，b的參數a接收的值為1，參數a相當於函數內部的變數，當本作用域有和上層作用域同名的變數時，無法訪問到上層變數，所以函數內無論怎麼修改a，都不影響上層，所以函數內部列印的a是2，外面列印的仍是1。
答案
報錯
解析
給函數多個參數設置默認值實際上跟按順序定義變數一樣，所以會存在暫時性死區的問題，即前面定義的變數不能引用後面還未定義的變數，而後面的可以訪問前面的。
答案
10、20
解析
答案
undefined、{n: 2}
解析
恕筆者不才，這道題筆者做一次錯一次。
反正按照網上大部分的解釋是因為.運算符優先順序最高，所以會先執行a.x，此時a、b共同指向的{n: 1}變成了{n: 1, x: undefined}，然後按照連等操作從右到左執行代碼，a = {n: 2}，顯然，a現在指向了一個新對象，然後a.x = a，因為a.x最開始就執行過了，所以這里其實等價於：({n: 1, x: undefined}).x = b.x = a = {n: 2}。
答案
[]
解析
這題比較簡單，arr[10]=10，那麼索引3到9位置上都是undefined，arr[3]等列印出來也確實是undefined，但是，這里其實涉及到ECMAScript版本不同對應方法行為不同的問題，ES6之前的遍歷方法都會跳過數組未賦值過的位置，也就是空位，但是ES6新增的for of方法就不會跳過。
答案
Goodbye Jack
解析
答案
NaN、13、NaN、1、1[object Object]、1、[object Object]
解析
這道題考察的顯然是+號的行為：
1.如果有一個操作數是字元串，那麼把另一個操作數轉成字元串執行連接
2.如果有一個操作數是對象，那麼調用對象的valueOf方法轉成原始值，如果沒有該方法或調用後仍是非原始值，則調用toString方法
3.其他情況下，兩個操作數都會被轉成數字執行加法操作
答案
456
解析
對象有兩種方法設置和引用屬性，obj.name和obj['name']，方括弧里可以字元串、數字和變數設置是表達式等，但是最終計算出來得是一個字元串，對於上面的b和c，它們兩個都是對象，所以會調用toString()方法轉成字元串，對象轉成字元串和數組不一樣，和內容無關，結果都是[object Obejct]，所以a[b]=a[c]=a['[object Object]']。
答案
25、20、20、25
解析
這道題考察的是this指向問題：
1.逗號操作符會返回表達式中的最後一個值，這里為inner.func對應的函數，注意是函數本身，然後執行該函數，該函數並不是通過對象的方法調用，而是在全局環境下調用，所以this指向window，列印出來的當然是window下的out
2.這個顯然是以對象的方法調用，那麼this指向該對象
3.加了個括弧，看起來有點迷惑人，但實際上(inner.func)和inner.func是完全相等的，所以還是作為對象的方法調用
4.賦值表達式和逗號表達式相似，都是返回的值本身，所以也相對於在全局環境下調用函數
答案
1、2、3
解析
這題考察的是變數解構賦值的問題，數組解構賦值是按位置對應的，而對象只要變數與屬性同名，順序隨意。
答案
[4, 5, 3]
解析
是不是從來沒有用assign方法合並過數組？assign方法可以用於處理數組，不過會把數組視為對象，比如這里會把目標數組視為是屬性為0、1、2的對象，所以源數組的0、1屬性的值覆蓋了目標對象的值。
答案
4
解析
這題考查的是自增運算符的前綴版和後綴版，以及switch的語法，後綴版的自增運算符會在語句被求值後才發生，所以x會仍以1的值去匹配case分支，那麼顯然匹配到為1的分支，此時，x++生效，x變成2，再執行++x，變成3，因為沒有break語句，所以會進入當前case後面的分支，所以再次++x，最終變成4。
答案
true、true
解析
2.typeof對函數使用返回'function'，class只是es6新增的語法糖，本質上還是函數，所以兩者相等
答案
true、false
解析
1.沒啥好說的，typeof對數字類型返回'number'。
2.這題考查的是運算符優先順序的問題，邏輯非!的優先順序比全等===高，所以先執行!!typeof count，結果為true，然後執行true === 'number'，結果當然為false，可以點擊這里查看優先順序列表： 點我 [1] 。
答案
2、2
解析
答案
1
解析
這道題考察的是作用域的問題，作用域其實就是一套變數的查找規則，每個函數在執行時都會創建一個執行上下文，其中會關聯一個變數對象，也就是它的作用域，上面保存著該函數能訪問的所有變數，另外上下文中的代碼在執行時還會創建一個作用域鏈，如果某個標識符在當前作用域中沒有找到，會沿著外層作用域繼續查找，直到最頂端的全局作用域，因為js是詞法作用域，在寫代碼階段就作用域就已經確定了，換句話說，是在函數定義的時候確定的，而不是執行的時候，所以a函數是在全局作用域中定義的，雖然在b函數內調用，但是它只能訪問到全局的作用域而不能訪問到b函數的作用域。
答案
undefined
解析
這道題考察的是this的指向問題，箭頭函數執行的時候上下文是不會綁定this的，所以它裡面的this取決於外層的this，這里函數執行的時候外層是全局作用域，所以this指向window，window對象下沒有name屬性，所以是undefined。
答案
{a: {b: 1}}
解析
這道題很簡單，因為assign方法執行的是淺拷貝，所以源對象的a屬性會直接覆蓋目標對象的a屬性。
答案
undefined、1、2
解析
答案
undefined
解析
答案
列印出arr數組本身
解析
函數作為某個對象的方法調用，this指向該對象，數組顯然也是對象，只不過我們都習慣了對象引用屬性的方法：obj.fn，但是實際上obj['fn']引用也是可以的。
答案
1、b函數本身、b函數本身
解析
2.和第一題類似，只是b沒有賦值操作，那麼執行到這兩行相當於都沒有操作，b當然是函數。
答案
2、4、1、1、2、3、3
解析
1.執行Foo函數的靜態方法，列印出2。
2.執行getName，當前getName是列印出4的那個函數。
3.執行Foo函數，修改了全局變數getName，賦值成了列印1的函數，然後返回this，因為是在全局環境下執行，所以this指向window，因為getName已經被修改了，所以列印出1。
4.因為getName沒有被重新賦值，所以再執行仍然列印出1。
5.new操作符是用來調用函數的，所以new Foo.getName()相當於new (Foo.getName)()，所以new的是Foo的靜態方法getName，列印出2。
6.因為點運算符（.）的優先順序和new是一樣高的，所以從左往右執行，相當於(new Foo()).getName()，對Foo使用new調用會返回一個新創建的對象，然後執行該對象的getName方法，該對象本身並沒有該方法，所以會從Foo的原型對象上查找，找到了，所以列印出3。
7.和上題一樣，點運算符（.）的優先順序和new一樣高，另外new是用來調用函數的，所以new new Foo().getName()相當於new ((new Foo()).getName)()，括弧裡面的就是上一題，所以最後找到的是Foo原型上的方法，無論是直接調用，還是通過new調用，都會執行該方法，所以列印出3。
答案
it's Matthew, from England
it's Bob, from England
解析
Object.create方法會創建一個對象，並且將該對象的__proto__屬性指向傳入的對象，所以p1和p2兩個對象的原型對象指向了同一個對象，接著給p1添加了一個name屬性，然後調用了p1的setCountry方法，p1本身是沒有這個方法的，所以會沿著原型鏈進行查找，在它的原型上，也就是person對象上找到了這個方法，執行這個方法會給address對象的country屬性設置傳入的值，p1本身也是沒有address屬性的，但是和name屬性不一樣，address屬性在原型對象上找到了，並且因為是個引用值，所以會成功修改它的country屬性，接著對p2的操作也是一樣，然後因為原型中存在引用值會在所有實例中共享，所以p1和p2它們引用的address也是同一個對象，一個實例修改了，會反映到所有實例上，所以p2的修改會覆蓋p1的修改，最終country的值為England。
答案
2、3、5、4、1
解析
這道題顯然考察的是事件循環的知識點。
js是一門單線程的語言，但是為了執行一些非同步任務時不阻塞代碼，以及避免等待期間的資源浪費，js存在事件循環的機制，單線程指的是執行js的線程，稱作主線程，其他還有一些比如網路請求的線程、定時器的線程，主線程在運行時會產生執行棧，棧中的代碼如果調用了非同步api的話則會把事件添加到事件隊列里，只要該非同步任務有了結果便會把對應的回調放到【任務隊列】里，當執行棧中的代碼執行完畢後會去讀取任務隊列里的任務，放到主線程執行，當執行棧空了又會去檢查，如此往復，也就是所謂的事件循環。
非同步任務又分為【宏任務】（比如setTimeout、setInterval）和【微任務】（比如promise），它們分別會進入不同的隊列，執行棧為空完後會優先檢查微任務隊列，如果有微任務的話會一次性執行完所有的微任務，然後去宏任務隊列里檢查，如果有則取出一個任務到主線程執行，執行完後又會去檢查微任務隊列，如此循環。
回到這題，首先整體代碼作為一個宏任務開始執行，遇到setTimeout，相應回調會進入宏任務隊列，然後是promise，promise的回調是同步代碼，所以會列印出2，for循環結束後調用了resolve，所以then的回調會被放入微任務隊列，然後列印出3，最後列印出5，到這里當前的執行棧就空了，那麼先檢查微任務隊列，發現有一個任務，那麼取出來放到主線程執行，列印出4，最後檢查宏任務隊列，把定時器的回調放入主線程執行，列印出1。
答案
1、7、6、8、2、4、9、11、3、10、5、12