2020了，初/中級前端面試你應該知道的（下）

26. Vue父子間如何雙向綁定

第一種：父——>子通過props傳遞數據，子——>父通過自定義事件通信

第二種：通過v-model實現父子間雙向數據綁定

第三種：使用.sync修飾符實現父子間的雙向數據綁定

 

27. 面向對象思想

javascript中的面向對象：ECMA標准定義JS中的對象：無序屬性的集合，其屬性可以包含基本值、對象或者函數。可以簡單理解為JS的對象是一組無序的值，其中的屬性或方法都有一個名字，根據這個名字可以訪問相映射的值（值可以是基本值/對象/方法）

面向對象三個基本特征是：封裝、繼承、多態

封裝：將對象運行所需的資源封裝在程序對象中——基本上，是方法和數據。對象是“公布其接口”。其他附加到這些接口上的對象不需要關心對象實現的方法即可使用這個對象。這個概念就是“不要告訴我你是怎么做的，只要做就可以了。”對象可以看作是一個自我包含的原子。對象接口包括了公共的方法和初始化數據。

繼承：說到繼承並不太陌生，繼承可以使得子類具有父類的各種的公有屬性和公有方法。而不需要再次編寫相同的代碼。在令子類別繼承父類別的同時，可以重新定義某些屬性，並重寫某些方法，即覆蓋父類別的原有屬性和方法，使其獲得與父類別不同的功能。

子類繼承父類后，子類具有父類屬性和方法，然而也同樣具備自己所獨有的屬性和方法，也就是說，子類的功能要比父類多或相同，不會比父類少。

多態：按字面的意思就是“多種狀態”，允許將子類類型的指針賦值給父類類型的指針。

說白了多態就是相同的事物，一個接口，多種實現，同時在最初的程序設定時，有可能會根據程序需求的不同，而不確定哪個函數實現，通過多態不需要修改源代碼，就可以實現一個接口多種解決方案。

多態的表現形式重寫與重載。

1、易維護
采用面向對象思想設計的結構，可讀性高，由於繼承的存在，即使改變需求，那么維護也只是在局部模塊，所以維護起來是非常方便和較低成本的。
2、質量高
在設計時，可重用現有的，在以前的項目的領域中已被測試過的類使系統滿足業務需求並具有較高的質量。
3、效率高
在軟件開發時，根據設計的需要對現實世界的事物進行抽象，產生類。使用這樣的方法解決問題，接近於日常生活和自然的思考方式，勢必提高軟件開發的效率和質量。
4、易擴展
由於繼承、封裝、多態的特性，自然設計出高內聚、低耦合的系統結構，使得系統更靈活、更容易擴展，而且成本較低。

28.  對jQuery傳統項目的看法

jQuery是使用選擇器（$）選取DOM對象，對其進行賦值、取值、事件綁定等操作，其實和原生的HTML的區別只在於可以更方便的選取和操作DOM對象，而數據和界面是在一起的。比如需要獲取label標簽的內容：$("lable").val();,它還是依賴DOM元素的值。

Vue則是通過Vue對象將數據和View完全分離開來了。對數據進行操作不再需要引用相應的DOM對象，可以說數據和View是分離的，他們通過Vue對象這個vm實現相互的綁定。這就是傳說中的MVVM。

vue適用的場景：復雜數據操作的后台頁面，表單填寫頁面

jquery適用的場景：比如說一些html5的動畫頁面，一些需要js來操作頁面樣式的頁面

然而二者也是可以結合起來一起使用的，vue側重數據綁定，jquery側重樣式操作，動畫效果等，則會更加高效率的完成業務需求。

 

29. 小程序如何獲取位置

一、獲取用戶地理位置信息  scope.userLocation自帶方法獲取經緯度

二、騰訊位置服務應用

 

30、說說彈性布局，如何分成四份

彈性布局，又稱“Flex布局”，是由W3C於2009年推出的一種布局方式。可以簡便、完整、響應式地實現各種頁面布局。

使用：

① 給父容器添加display: flex/inline-flex;屬性，即可使容器內容采用彈性布局顯示，而不遵循常規文檔流的顯示方式；

② 容器添加彈性布局后，僅僅是容器內容采用彈性布局，而容器自身在文檔流中的定位方式依然遵循常規文檔流；

③  display:flex;容器添加彈性布局后，顯示為塊級元素；

display:inline-flex;容器添加彈性布局后，顯示為行級元素；

④ 設為Flex布局后，子元素的float、clear和vertical-align屬性將失效。但是position屬性，依然生效。

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

分成四份： flex-grow：1； flex-shrink：1；

flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。

flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。

31、Vue路由傳參

1. 通過query的方式也就是？的方式路徑會顯示傳遞的參數
2. 通過params的方式，路徑不會顯示傳遞的參數
3. 通過 :/ 的的形式傳遞傳參

32、像素單位

px單位名稱為像素，相對長度單位，像素（px）是相對於顯示器屏幕分辨率而言的國內推薦；

em單位名稱為相對長度單位。相對於當前對象內文本的字體尺寸，國外使用比較多；擴展閱讀：html em標簽,html em強調標簽

pt單位名稱為點（Point），絕對長度單位一般老版本的table使用長度大小單位但是現在基本上沒有使用。

 

html單位簡短介紹：

 

Px 像素Pixel；相對長度單位。

Pt 點（Point）；絕對長度單位

Em 相對長度單位，這里em與html <em>標簽的"EM"拼寫完全相同，而這里em作為單獨文本單位。

 

33. 閉包

閉包是指有權訪問另一個函數作用域中的變量的函數 --《JavaScript高級程序設計》

函數對象可以通過作用域關聯起來，函數體內的變量都可以保存在函數作用域內，這在計算機科學文獻中稱為“閉包”,所有的javascirpt函數都是閉包 --《Javascript權威指南》

閉包的用途：

1. 保護變量的安全實現JS私有屬性和私有方法
2. 將處理結果緩存

閉包的缺點：

l 閉包將函數的活動對象維持在內存中，過度使用閉包會導致內存占用過多，所以在使用完后需要將保存在內存中的活動對象解除引用；

l 閉包只能取得外部函數中任何變量的最后一個值，在使用循環且返回的函數中帶有循環變量時會得到錯誤結果；

l 當返回的函數為匿名函數時，注意匿名函數中的this指的是window對象。

34. iframe標簽

iframe 元素會創建包含另外一個文檔的內聯框架（即行內框架）。

iframe常用屬性:

1. frameborder:是否顯示邊框，1(yes),0(no)
2. height:框架作為一個普通元素的高度，建議在使用css設置。
3. width:框架作為一個普通元素的寬度，建議使用css設置。
4. name:框架的名稱，window.frames[name]時專用的屬性。
5. scrolling:框架的是否滾動。yes,no,auto。
6. src：內框架的地址，可以使頁面地址，也可以是圖片的地址。
7. srcdoc , 用來替代原來HTML body里面的內容。但IE不支持, 不過也沒什么卵用
8. sandbox: 對iframe進行一些列限制，IE10+支持

35. 簡述vue生命周期

生命周期鈎子詳細

beforeCreate 在實例初始化之后，數據觀測(data observer) 和 event/watcher 事件配置之前被調用。

created 實例已經創建完成之后被調用。在這一步，實例已完成以下的配置：數據觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。

beforeMount 在掛載開始之前被調用：相關的 render 函數首次被調用。

mounted el 被新創建的 vm.$el 替換，並掛載到實例上去之后調用該鈎子。如果 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。

beforeUpdate 數據更新時調用，發生在虛擬 DOM 重新渲染和打補丁之前。你可以在這個鈎子中進一步地更改狀態，這不會觸發附加的重渲染過程。

updated 由於數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鈎子。當這個鈎子被調用時，組件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。

activated keep-alive 組件激活時調用。

deactivated keep-alive 組件停用時調用。

beforeDestroy 實例銷毀之前調用。在這一步，實例仍然完全可用。

destroyed Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。

（除了beforeCreate和created鈎子之外，其他鈎子均在服務器端渲染期間不被調用

36. webpack五大核心

1. 入口(entry)

入口起點 --> 入口文件以來的模塊和庫 --> 處理依賴

1. 輸出(output)

打包完畢 --> 輸出bundles(打完包的部分) --> 輸出文件命名(默認為./dist)

1. 加載器(loader)

用來將其他不同語言的文件(如:less、sass、typescript等)轉為js文件

1. 插件(plugins)

下載 --> require進配置文件中 --> 應用到配置數組plugins中

1. 模式

選擇development 或 production 之中的一個，來設置 mode 參數

37. 熟悉原生js開發

測試如下：

1，寫出一套自定義事件機制抄，要求可以實現對指定對象綁定多個自定義事件，拿到這個對象句柄的所有地方都可以觸發定義過的事件

2，模擬出瀏覽器的alert prompt confirm 要求可配置標知題、提示文本、按下確定\取消時的回調方法、處理搶占問題等等

3，解析出一個dom內部具有制定屬性的所有節點，例如：

<div id="test"><span attr="a"></span><span attr="b"></span></div>

對test一次性解析后，可以拿到test.a，test.b 等等

4，想一套頁面分模塊機制，要求一個模塊出道錯不影響其它模塊，模塊間可以通信

38. vue 定時器使用與清除

由於項目中難免會碰到需要實時刷新，無論是獲取短信碼，還是在支付完成后輪詢獲取當前最新支付狀態，這時就需要用到定時器。

但是，定時器如果不及時合理地清除，會造成業務邏輯混亂甚至應用卡死的情況，這個時就需要清除定時器。

某個頁面中啟動定時器后，一定要在頁面關閉時將定時器清除掉。即在頁面卸載（關閉）的生命周期函數里（beforeDestroy），清除定時器。

38. echarts載入在哪個生命周期

mounted里使用setEchart方法，初始化圖表組件，一定要在這里使用該方法，否則會找不到DOM。

updated周期里是響應參數變化的方法，首先檢測該實例有沒有生成（單頁應用因為用戶可能存在的誤操作，很可能導致實例沒有生成，這里檢測是很有必要的），接着在vue中的數據發生改變時運行chartChange方法，注意，我的選擇框是沒有綁定事件的，只是通過v-model改變了參數，然后opt動態響應了參數的變化。當opt的參數變化的時候，updated中的方法就會執行，echarts也會動態響應。這個就是使用基於數據驅動vue最精巧的地方，避免了通過事件調用echartChange方法。也是vue中使用echarts核心的一環。

39. vue3.0新增了哪些

Vue 3.0計划並已實現的主要架構改進和新功能：

l 編譯器（Compiler）

l 使用模塊化架構

l 優化 "Block tree"

l 更激進的 static tree hoisting 功能 （檢測靜態語法，進行提升）

l 支持 Source map

l 內置標識符前綴（又名"stripWith"）

l 內置整齊打印（pretty-printing）功能

l 移除 Source map 和標識符前綴功能后，使用 Brotli 壓縮的瀏覽器版本精簡了大約10KB

運行時（Runtime）

l 速度顯著提升

l 同時支持 Composition API 和 Options API，以及 typings

l 基於 Proxy 實現的數據變更檢測

l 支持 Fragments (允許組件有從多個根結點)

l 支持 Portals (允許在DOM的其它位置進行渲染)

l 支持 Suspense w/ async setup()

40. 前端安全問題

1、XSS（Cross-Site Scripting）腳本攻擊漏洞；

 

2、CSRF（Cross-sit request forgery）漏洞；

 

3、iframe安全隱患問題；

 

4、本地存儲數據問題；

 

5、第三方依賴的安全性問題；

 

6.HTTPS加密傳輸數據；

42. 性能優化

優化的目的:

優化的目的在於讓頁面加載的更快，對用戶操作響應更及時，為用戶帶來更好的用戶體驗，對於開發者來說優化能夠減少頁面請求數，能夠節省資源。

前端優化的方法有很多種，可以將其分為兩大類，第一類是頁面級別的優化如http請求數，內聯腳本的位置優化等，第二類為代碼級別的優化，例Javascript中的DOM 操作優化、CSS選擇符優化、圖片優化以及 HTML結構優化等等。

頁面級別優化

http請求數:

減少http請求數是最重要也是最有效的方法，可以通過以下方法來減少http請求

（1）合理的設置http緩存，恰當的緩存設置可以大大減少http請求。要盡可能地讓資源能夠在緩存中待得更久

（2）從設計實現層面簡化頁面，保持頁面簡潔、減少資源的使用時是最直接的。

（3）資源合並與壓縮，盡可能的將外部的腳本、樣式進行合並，多個合為一個。

（4）CSS Sprites，通過合並 CSS圖片，這是減少請求數的一個好辦法

內聯腳本的位置：

瀏覽器是並發請求的，而外鏈腳本在加載時卻常常阻塞其他資源，例如在腳本加載完成之前，它后面的圖片、樣式以及其他腳本都處於阻塞狀態，直到腳本加載完成后才會開始加載。如果將腳本放在比較靠前的位置，則會影響整個頁面的加載速度從而影響用戶體驗。所以說盡可能的將腳本往后挪，減少對並發下載的影響

代碼級別的優化

DOM操作優化

要避免在document上直接進行頻繁的DOM操作，可以使用classname代替大量的內聯樣式修改，對於復雜的UI元素，設置position為absolute或fixed，盡量使用css動畫，適當使用canvas盡量減少css表達式的使用，使用事件代理

圖片優化

通過對圖片的壓縮來起到優化前端性能的作用

CSS選擇符：

大多數人認為，瀏覽器對CSS的解析是從左往右的，事實上從右往左解析的效率更高，因為第一個id選擇基本上就把查找的范圍限定了

43. cookie與session

不要混淆 session 和 session 實現。

本來 session 是一個抽象概念，開發者為了實現中斷和繼續等操作，將 user agent 和 server 之間一對一的交互，抽象為“會話”，進而衍生出“會話狀態”，也就是 session 的概念。

而 cookie 是一個實際存在的東西，http 協議中定義在 header 中的字段。可以認為是 session 的一種后端無狀態實現。

而我們今天常說的 “session”，是為了繞開 cookie 的各種限制，通常借助 cookie 本身和后端存儲實現的，一種更高級的會話狀態實現。

所以 cookie 和 session，你可以認為是同一層次的概念，也可以認為是不同層次的概念。具體到實現，session 因為 session id 的存在，通常要借助 cookie 實現，但這並非必要，只能說是通用性較好的一種實現方案。

44. Vue與傳統MVC對比

1. MVC：Model模型+View視圖+controller控制器，主要是基於分層的目的，讓彼此的職責分開。View通過Controller來和Model聯系，Controller是View和Model的協調者，View和Model不直接聯系，基本聯系都是單向的。
   用戶通User過控制器Controller來操作模板Model從而達到視圖View的變化
2. MVP：是從MVC模式演變而來，都是通過Controller/Presenter負責邏輯的處理+Model提供數據+View負責顯示。
   在MVP中，Presenter和View是沒有直接關聯的，是通過定義好的借口進行交互，從而使得在變更View的時候可以保持Presenter不變。
   MVP模式的框架：Riot.js。
3. MVVM：MVVM是把MVC里的Controller和MVP里的Presenter改成了ViewModel。Model+View+ViewModel。
   View的變化會自動更新到ViewModel，ViewModel的變化也會自動同步到View上顯示。這種自動同步是因為ViewModel中的屬性實現了Observer，當屬性變更時都能觸發對應的操作。

MVVM模式的框架有：Angular.js + Vue.js和Konckout+Ember.js后兩種知名度較低以及是早起的框架模式。

45. await與promise

async-await是promise和generator的語法糖。只是為了讓我們書寫代碼時更加流暢，當然也增強了代碼的可讀性。簡單來說：async-await 是建立在 promise機制之上的，並不能取代其地位。

await 可以理解為是 async wait 的簡寫。await 必須出現在 async 函數內部，不能單獨使用。

await 后面可以跟任何的JS 表達式。雖然說 await 可以等很多類型的東西，但是它最主要的意圖是用來等待 Promise 對象的狀態被 resolved。如果await的是 promise對象會造成異步函數停止執行並且等待 promise 的解決,如果等的是正常的表達式則立即執行。

46. vue常用組件

核心組件 路由：vue-route

異步數據請求：axios

vuex 狀態管理

UI庫

焦點圖 / 輪播圖 swiper

圖表 vue-echarts

安全性 傳輸加密：sha256、md5、base64、rsa

性能優化 圖片懶加載 vue-lazyload 上傳圖片壓縮 lrz

47. Typescript是否了解

TypeScript具有類型系統，且是JavaScript的超集。它可以編譯成普通的JavaScript代碼。 TypeScript支持任意瀏覽器，任意環境，任意系統並且是開源的。Ts主要用於解決那些問題：

js木有編譯類型檢查，寫代碼的時候木有錯誤，在運行的時候就發現錯誤一大堆，ts具有類型系統，可以解決此類問題

js代碼非常靈活，同一團隊中，大神和小菜鳥寫的代碼各不相同，維護起來十分不便，統一采用ts開發js，使用相同的規則進行編碼，能夠比較好的解決此類問題

js發展十分迅速，存在各種各樣的版本和各種環境，在不同的環境中特性存在差異，為了滿足各種環境，需要編寫各異的代碼，js通過制定編譯環境可以將同一代碼編譯成對應環境的js腳本

js在編譯大型項目缺乏良好的模塊及文件的組織，需要支持有模塊及命名空間的概念，遵循CommonJs的規范，ts支持模塊及命名空間，同時支持。

48. Lodash框架

1.下載地址

https://www.bootcdn.cn/lodash.js/

 

2.開始使用

1.chunk方法

將數組進行切分

 

var arr = [1,2,3,4]

var newArr = _.chunk(arr,2)

console.log(newArr) //[1,2] [3,4]

1

2

3

2.compact方法

去除假值。（將所有的空值，0，NaN過濾掉）

 

_.compact(['1','2',' ',0])

// => ['1','2']

1

2

3.uniq方法

數組去重。（將數組中的對象去重，只能是數組去重，不能是對象去重。）

 

_.uniq([1,1,3])

// => [1,3]

1

2

4.reject方法

根據條件去除某個元素

 

var foo = [

    {id: 0, name: "aaa", age: 33},

    {id: 1, name: "bbb", age: 25}

]

var bar = _.reject(foo, ['id', 0])

 

//bar = [{id: 1, name: "bbb", age: 25}]

1

2

3

4

5

6

7

5.shuffle方法

無序化

 

_.shuffle([1,2,3,4]);// 無序化

1

6.pick方法

根據key來篩選數組

 

var foo = {id: 0, name: "aaa", age: 33}

var bar = _.pick(foo, ['name', 'age'])

//bar = {name: "aaa", age: 33}

1

2

3

7.keys方法

返回object中的所有key

 

var foo = {id: 0, name: "aaa", age: 33}

var bar = _.keys(foo)

//bar = ['id', 'name', 'age']

1

2

3

8.cloneDeep方法

深度拷貝

 

9.forEach方法

_.forEach(agent,function(n,key) {

 

    agent[key].agent_id= agent[key].agent_name

 

})

1

2

3

4

5

這是一個常見的forEach的數組遍歷，使用了lodash過后，_.forEach()這是一個值，而不是一個函數。就可以直接

 

const arr = _.forEach();

1

這時候arr就是新的數組agent

 

10.merge方法

merge 參數合並

遞歸的將源對象和繼承的可枚舉字符串監控屬性合並到目標對象中。源對象從左到右引用，后續來源將覆蓋以前來源的屬性分配。

 

var object = {

  'a': [{ 'b': 2 }, { 'd': 4 }]

};

 

var other = {

  'a': [{ 'c': 3 }, { 'e': 5 }]

};

 

_.merge(object, other);

// => { 'a': [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }]

1

2

3

4

5

6

7

8

9

10

在實際開發中，前端在接口的請求可以merge一下之前的query和現在改變的查詢的值，再去請求后端接口的數據

 

11.random方法

console.log(_.random(10, 20)); // 獲取隨機數

_.random(15, 20, true); // 隨機浮點

_.sample(["lisong", "heyan"], 1);// 隨機獲取數組中的某一項,attr2:隨機獲取的個數

1

2

注意一下如果沒找到的話，會返回undefined，要處理一下

 

13.keyBy方法

以某個屬性為鍵，將數組轉為對象

 

var foo = var foo = [

    {id: 0, name: "aaa", age: 33},

    {id: 1, name: "bbb", age: 25

3

12.find方法

find查找數組

 

var foo = [

    {id: 0, name: "aaa", age: 33},

    {id: 1, name: "bbb", age: 25}

]

var bar = _.find(foo, ['id', 0])

//bar = {id: 0, name: "aaa", age: 33}

1

2

3

4

5

6}

]

var bar = _.keyBy(foo, 'name')

//bar = {

//    aaa: {id: 0, name: "aaa", age: 33},

//    bbb: {id: 1, name: "bbb", age: 25}

//}

1

2

3

4

5

6

7

8

9

14.filter方法

根據條件過濾出符合條件的元素，返回新數組

 

var foo = var foo = [

    {id: 0, name: "aaa", age: 33},

    {id: 1, name: "bbb", age: 25}

]

var bar = _.filter(foo, ['name', "aaa"])

//bar = {

//    aaa: {id: 0, name: "aaa", age: 33}

//}

1

2

3

4

5

6

7

8

15.map方法

從集合中挑出一個key，將其值作為數組返回

 

var foo = var foo = [

    {id: 0, name: "aaa", age: 33},

    {id: 1, name: "bbb", age: 25}

]

var bar = _.map(foo, 'name')

//bar = ["aaa", "bbb"]

1

2

3

4

5

6

16.max/.min/_.sum方法

數組中最大值、最小值、數組求和

 

var foo = [1, 2, 3, 4]

var bar = _.max(foo)

//bar = 4

bar = _.min(foo)

//bar = 1

bar = _.sum(foo)

//bar = 10

1

2

3

4

5

6

7

17.pad/.padStart/_.padEnd方法

在兩端、開頭、末尾補齊字符

 

var foo = "helloworld"

var bar = _.pad(foo, 14, '-')

//bar = --helloworld--

bar = _.padStart(foo, 14, '-')

//bar = ----helloworld

bar = _.padEnd(foo, 14, '-')

//bar = helloworld----

1

2

3

4

5

6

7

選出json數組中id最大的一項

var foo = [

    {id: 0, name: "aaa", age: 33},

    {id: 1, name: "bbb", age: 25}

]

var bar = _.find(foo, ['id', _.max(_.map(foo, 'id'))])

// bar = {id: 1, name: "bbb", age: 25}

// ps:也可以用maxBy某個key來代替

1

2

3

4

5

6

7

更新json數組中某一項的值

var foo = [

    {id: 0, name: "aaa", age: 33},

    {id: 1, name: "bbb", age: 25}

]

let list = _.keyBy(foo, 'id')

list[0].name = "ccc"

var bar = _.map(list)

// bar = [

//    {id: 0, name: "ccc", age: 33},

//    {id: 1, name: "bbb", age: 25}

//]

1

2

3

4

5

6

7

8

9

10

11

flatten方法

var arr = [1,2,[3,4,[5],6]]

var a8 = _.flatten(arr)  //[ 1, 2, 3, 4, [ 5 ], 6 ]

var a9 = _.flattenDeep(arr)  //[ 1, 2, 3, 4, 5, 6 ]

var a10 = _.flattenDepth(arr,2)  //[ 1, 2, 3, 4, 5, 6 ]

1

2

3

4

數組去重

var arr2 = [12,14,11,12,12,1,14,16,17,22,2,11,12]

var a11 = Array.from(new Set(arr2))

var a12 = [...new Set(arr2)]

var a13 = _.uniq(arr2)  //[ 12, 14, 11, 1, 16, 17, 22, 2 ]

var arrObj = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 },{ 'x': 2, 'y': 1 }, { 'x': 1, 'y': 2 }];

var a14 = _.uniqWith(arrObj, _.isEqual)  //[ { x: 1, y: 2 }, { x: 2, y: 1 } ]

49. canvas畫布

HTML5 的 canvas 元素使用 JavaScript 在網頁上繪制圖像。

畫布是一個矩形區域，您可以控制其每一像素。

canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

50. websocekt

WebSocket是一種在單個TCP連接上進行全雙工通信的協議。

WebSocket API也被W3C定為標准。

WebSocket使得客戶端和服務器之間的數據交換變得更加簡單，允許服務端主動向客戶端推送數據。在WebSocket API中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，並進行雙向數據傳輸。

WebSocket 的優點:  開銷少、時時性高、二進制支持完善、支持擴展、壓縮更優。

 因為 HTTP 協議有一個缺陷：通信只能由客戶端發起。

51. vue的優勢，與傳統MVC的優勢

精力集中, 代碼結構, 操作性, 模塊化, 單頁面實現, 組件復用, 性能

52. 冒泡排序的原理

     算法原理：每次對相鄰的兩個元素進行比較，若前者大於后者則進行交換，如此一趟下來最后一趟的就是最大元素，重復以上的步驟，除了已經確定的元素。

53. hash和history的區別

    hash:  即地址欄 URL 中的 # 符號（此 hash 不是密碼學里的散列運算）。

比如這個 URL：http://www.aaa.com/#/hello，hash 的值為 #/hello。它的特點在於：hash 雖然出現在 URL 中，但不會被包括在 HTTP 請求中，對后端完全沒有影響，因此改變 hash 不會重新加載頁面。

      history:  利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定瀏覽器支持）

這兩個方法應用於瀏覽器的歷史記錄棧，在當前已有的 back、forward、go 的基礎之上，它們提供了對歷史記錄進行修改的功能。只是當它們執行修改時，雖然改變了當前的 URL，但瀏覽器不會立即向后端發送請求。

因此可以說，hash 模式和 history 模式都屬於瀏覽器自身的特性，Vue-Router 只是利用了這兩個特性（通過調用瀏覽器提供的接口）來實現前端路由。

54. 箭頭函數this指向

     箭頭函數沒有自己的this, 它的this是繼承而來; 默認指向在定義它時所處的對象(宿主對象)

55. 多接口傳入如何處理

把多個接口揉成一個接口：

var http = require('http');

var mysql      = require('mysql');

var connection = mysql.createConnection({

    host     : 'rm-bp1w72suk8pc5h6mk.mysql.rds.aliyuncs.com',

    user     : 'r85u40z94p',

    password : 'Mafeng11',

    database: 'r85u40z94p'

});

//開始你的mysql連接

connection.connect();

 

 

var server = http.createServer(function (req, res) {

    //如果你發一個GET到http://127.0.0.1:9000/test

    var url_info = require('url').parse(req.url, true);

    //檢查是不是給/test的request

    if(url_info.pathname === '/test'){

        res.writeHead(200, {'Content-Type': 'text/plain'});

         

 

 

                connection.query('SELECT * FROM `r85u40z94p`.`user`  order by rand()  LIMIT 5',function(err,rows,fields){

                    //處理你的結果e68a84e8a2ade79fa5e9819331333365633838

                   // res.end(rows.constructor);

                    // 輸出結果

                    res.end(JSON.stringify(rows));

 

 

                    console.log(rows.constructor);

                    console.log(typeof(rows));

                    res.end(rows.join);

                    console.log(err);

                    console.log(fields);

                });

    }

    //這個是用來回復上面那個post的，顯示post的數據以表示成功了。你要是有別的目標，自然不需要這一段。

    else{

        req.pipe(res);

    }

});

server.listen(9000, '127.0.0.1');

//在server關閉的時候也關閉mysql連接

server.on('close',function(){

    connection.end();

});

console.log('listening on port  9000');

56. 后端實時推送數據處理方式

     webSocket，Ajax輪詢，iframe

1. 原型與原型鏈

原型:  

①所有引用類型都有一個__proto__(隱式原型)屬性，屬性值是一個普通的對象

②所有函數都有一個prototype(原型)屬性，屬性值是一個普通的對象

③所有引用類型的__proto__屬性指向它構造函數的prototype

原型鏈: 當訪問一個對象的某個屬性時，會先在這個對象本身屬性上查找，如果沒有找到，則會去它的__proto__隱式原型上查找，即它的構造函數的prototype，如果還沒有找到就會再在構造函數的prototype的__proto__中查找，這樣一層一層向上查找就會形成一個鏈式結構，我們稱為原型鏈。

58. Vuex五大核心

     state => 基本數據

     getters => 從基本數據派生的數據

     mutations => 提交更改數據的方法，同步！

     actions => 像一個裝飾器，包裹mutations，使之可以異步。

     modules => 模塊化Vuex

59. 項目開發中常用插件

     bootstrap,swiper,vue,webpack

60. null與undifined區別 1+null 1+undifined

    (1)、Null類型，代表空值，代表一個空對象指針，使用typeof運算得到object，所以你可以認為它是一個特殊的對象值；

　　(2)、Undefined類型，當一個聲明了一個變量未初始化時，得到的就是undefined；

　　(3)、undefined是訪問一個未初始化的變量時返回的值，而null是訪問一個尚未存在的對象時所返回的值。因此，可以把undefined看作是空的變量，而null看作是空的對象。

     1+null=null     1+undefined=NaN

1. object.defineproperty缺點

    (1). 無法檢測到對象屬性的新增或刪除

    (2). 不能監聽數組的變化

63. js的執行機制

    (1). "任務隊列"是一個事件的隊列，只要事件指定過回調函數，這些事件完成任務時，就會向"任務隊列"添加一個事件，等待主線程讀取。

    (2). 當主線程執行完“執行棧”中的同步任務之后，去開始執行已經完成任務等待中的異步任務，執行的就是任務對應的回調函數

    (3). 主線程的讀取過程基本上是自動的，只要執行棧一清空，"任務隊列"上第一位的事件就自動進入主線程（定時器到了規定的時間，才能返回主線程）

    (4). 異步任務，意味着只有當前腳本的所有代碼執行完，系統才會去讀取"任務隊列

    (5). 先執行主線程（同步任務放置在主線程），主線程執行完，系統去讀取任務隊列（異步任務放置在任務隊列）

64. 深拷貝與淺拷貝

    深拷貝和淺拷貝最根本的區別在於是否真正獲取一個對象的復制實體，而不是引用。

    (1).  JSON方法實現

    (2). 用for…in…實現便歷和復制

    (3). 利用數組的Array.prototype.foreach進行copy