目錄：

一． es5,es6平時工作用到了哪些新特性

二. 說說對作用域鏈的理解

三. 手寫ajax代碼

四. onclick和addEventListener綁定單擊事件的區(qū)別

五. async和await的作用

六. 箭頭函數(shù)和普通函數(shù)的區(qū)別

七. splice()和join()的用法

八. 如何理解閉包

九. 如何將類數(shù)組轉(zhuǎn)換為標(biāo)準(zhǔn)數(shù)組

十. apply,call和bind方法的區(qū)別

十一. 數(shù)組去重的方式，任意選一種實(shí)現(xiàn)

十二. box-sizing常用的屬性有哪些?請分別說明作用

十三. 瀏覽器內(nèi)核有哪些

十四. html5新特性有哪些，html和Html5的區(qū)別

十五. 簡述清除浮動的幾種方式

十六. 塊級元素水平居中的方式

十七. 什么是盒子模型

十八. bootstrap柵格系統(tǒng)用于屏幕適配的樣式有幾種

十九． vue的優(yōu)點(diǎn)和缺點(diǎn)

二十. vue生命周期函數(shù)的作用

二十一. vue父子組件傳值，兄弟組件傳值

二十二. v-if和v-show的區(qū)別

二十三. v-on為什么能綁定多個事件

二十四. 什么是vue過濾器，怎么使用

二十五. axios是什么，簡述使用它完成登錄的流程

二十六. 簡述提高小程序應(yīng)用程序速度的方法

二十七. vue-loader是什么，有哪些用途

二十八. 微信小程序頁面間傳值的方法

二十九. JavaScript的基本數(shù)據(jù)類型

三十. 什么是盒子模型？

一．es5,es6平時工作用到了哪些新特性

1.JSON.parse(),JSON.stringify()

2.let?const

3.箭頭函數(shù)

4.promise

5.（2個關(guān)于異步的方法：）async ,await

6.（9個關(guān)于數(shù)組的方法，其中5個f開頭的方法，some，map,every,includes,reduce可看出音樂句子：some map,every includes,reduce 一些map，每個?includes，reduce?。有時內(nèi)容看出句子記憶會更容易。forEach filter,find findIndex ：forEach?遍歷每個?filter，找到?findIndex）forEach,filter,find,findIndex,some，map,every,includes,reduce

7.解構(gòu)運(yùn)算符，展開運(yùn)算符(...)

8.剩余參數(shù)(...參數(shù)名)

9.es6模塊化

10.trim,startsWith,endsWith

多發(fā)現(xiàn)和記錄規(guī)律，增加記憶點(diǎn)。

二.?說說對作用域鏈的理解

作用域鏈的作用是保證執(zhí)行環(huán)境里有權(quán)訪問的變量和函數(shù)是有序的，作用域鏈的變量只能向上訪問，變量訪問到 window 對象即被終止，作用域鏈向下訪問變量是不被允許的。注意：JS沒有塊級作用域，若要形成塊級作用域，可通過（function（）｛｝）（）；立即執(zhí)行的形式實(shí)現(xiàn)。

(

函數(shù)作用域內(nèi)使用的變量，如果是在本作用域找不到定義，會往上一級查找，一層一層查找，直到找到全局作用域，如果都沒有找到，就返回undefined。這種一層一層類似鎖鏈的關(guān)系，叫作用域鏈。)

三.?手寫ajax代碼

let xhr = new?XMLHttpRequest();

xhr.open(“get”,”url”);

xhr.onreadystatechange=function(){

if(xhr.status==200&&xhr.readyState==4){

console.log(xhr.responseText);

}

}

xhr.send();

四.?onclick和addEventListener綁定單擊事件的區(qū)別

1. onclick可以寫在標(biāo)簽上，addEventListener只能寫在js代碼中

2.?onclick只能綁定點(diǎn)擊事件，addEventListener可以綁定多種事件

3.?兩者都可以綁定多個事件，onclick的方式后面的事件會覆蓋前面的事件，addEventListener則不會

4.?addEventListener可以精確控制事件觸發(fā)的階段，通過第三個參數(shù)控制，默認(rèn)是false也就是冒泡階段，如果是true就是捕獲階段觸發(fā)事件

5.?onclick只對html元素起作用，addEventListener對任何DOM元素都有用。

五.?async和await的作用

async?是一個修飾符，async 定義的函數(shù)會默認(rèn)的返回一個Promise對象，

因此對async函數(shù)可以直接進(jìn)行then操作,返回的值即為then方法的傳入函數(shù) ?

await 關(guān)鍵字 只能放在 async 函數(shù)內(nèi)部， await關(guān)鍵字的作用 就是獲取 Promise中返回的內(nèi)容，

獲取的是Promise函數(shù)中resolve或者reject的值

如果await 后面并不是一個Promise的返回值，則會按照同步程序返回值處理,為undefined

(把異步書寫代碼方式改為同步書寫代碼的方式，代碼結(jié)構(gòu)更清晰更簡潔，易于后期維護(hù)，解決回調(diào)地獄的問題。)

六.?箭頭函數(shù)和普通函數(shù)的區(qū)別

1. 定義寫法不同，箭頭函數(shù)寫法更簡潔,使用箭頭定義

2.?箭頭函數(shù)沒有arguments,只能使用剩余參數(shù),每一個普通函數(shù)調(diào)用后都具有一個arguments對象，用來存儲實(shí)際傳遞的參數(shù)。

3.?箭頭函數(shù)都是匿名函數(shù),普通函數(shù)可以有匿名函數(shù)，也可以有具名函數(shù)

4.?this指向不同,在普通函數(shù)中，this總是指向調(diào)用它的對象，或者，如果用作構(gòu)造函數(shù)，它指向創(chuàng)建的對象實(shí)例?！緜€人注釋：箭頭函數(shù)不綁定this，會捕獲其所在的上下文的this值，作為自己的this值】

5.?箭頭函數(shù)沒有構(gòu)造函數(shù)，不能new

6.?apply,call,bind不能修改箭頭函數(shù)的this指向，只能傳參。

7.?其它區(qū)別:

1）.箭頭函數(shù)不能當(dāng)做Generator函數(shù)?！緜€人注釋：箭頭函數(shù)不能當(dāng)做Generator函數(shù),不能使用yield關(guān)鍵字】

2）箭頭函數(shù)不具有prototype原型對象。

3）箭頭函數(shù)不具有super

4）箭頭函數(shù)不具有new.target

七.?splice()和join()的用法

1.splice(起始索引，個數(shù)，值1,值2...),可以對數(shù)組元素進(jìn)行添加刪除操作

2.?join(分隔符),可以把數(shù)組分隔，通過分隔符連接為一個字符串

八.?如何理解閉包

定義：閉包是有權(quán)限訪問其他函數(shù)作用域內(nèi)的變量的一個函數(shù)。

簡單說:其實(shí)閉包就是一個函數(shù)，一個外部函數(shù)通過調(diào)用函數(shù)并return返回出內(nèi)部函數(shù)，這里的內(nèi)部函數(shù)就是一個閉包，此時在內(nèi)部函數(shù)中是可以訪問到外部函數(shù)的變量的。

由于在JS中，變量的作用域?qū)儆诤瘮?shù)作用域，在函數(shù)執(zhí)行后作用域就會被清理、內(nèi)存也隨之回收。

但是由于閉包是建立在一個函數(shù)內(nèi)部的子函數(shù)，由于其可訪問上級作用域的原因，即使上級函數(shù)執(zhí)行完，作用域也不會隨之銷毀，這時的子函數(shù)——也就是閉包，便擁有了訪問上級作用域中的變量的權(quán)限，即使上級函數(shù)執(zhí)行完后作用域內(nèi)的值也不會被銷毀。

(

閉包是指可以訪問另一個函數(shù)中的變量的函數(shù)，也就是函數(shù)嵌套關(guān)系。

作用1: 可以創(chuàng)建一個封閉作用域

作用2：把函數(shù)作用域變量提升或延伸為全局作用域變量，不易銷毀)

九.?如何將類數(shù)組轉(zhuǎn)換為標(biāo)準(zhǔn)數(shù)組

1.[].slice.call(類數(shù)組)

2.?Array.from(類數(shù)組)

【

類數(shù)組的形式:

1.對象

?

2.?dom對象數(shù)組

3.?arguments數(shù)組

4.?字符串

【

個人理解：

聲明一個函數(shù)傳一個參數(shù)，直接控制臺打印arguments，就可以看出arguments是類數(shù)組。

用標(biāo)簽選擇器獲取多個p標(biāo)簽等等，會獲得一個數(shù)組，是dom對象數(shù)組。

字符串由一個一個的字符組成，所以可以看成類數(shù)組】

】

十.?apply,call和bind方法的區(qū)別

它們都是用來修改this指向的,第一個參數(shù)都是指定this綁定的對象，第二個參數(shù)是傳參

apply第二個參數(shù)是數(shù)組形式

call和bind第二個參數(shù)是參數(shù)列表形式

apply和call都是立即執(zhí)行函數(shù)

bind不會立即執(zhí)行而是返回新的函數(shù)

?

十一.?數(shù)組去重的方式，任意選一種實(shí)現(xiàn)

我的改進(jìn)：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<script>

//數(shù)組去重的方法一：

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

console.log(Array.from(new Set(arr)));

//數(shù)組去重的方法二：

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

var newArr = arr.filter(function(item, index){

return arr. indexOf(item,0) === index;

});

console. log(newArr);

//數(shù)組去重的方法三：

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

var tempArr=[];

for(let i=0;i<arr.length;i++){

if(!tempArr.includes(arr[i])){

tempArr.push(arr[i]);

}}

console.log(tempArr);?

</script>

</body>

</html>

十二.box-sizing常用的屬性有哪些?請分別說明作用

常用屬性:?content-box(默認(rèn)盒子模型),border-box(IE盒子模型或者叫怪異盒子)，inherit(繼承父級元素的盒子模型)

默認(rèn)盒子模型可見寬度=width+內(nèi)邊距+邊框(width就是內(nèi)容區(qū)寬度)

ie盒子模型可見寬度 = width(自動修改內(nèi)容區(qū)大小，保持可見寬度與width值一致)

ie盒子模型適用于移動端彈性盒子布局。

width

height

十三.?瀏覽器內(nèi)核有哪些

瀏覽器內(nèi)核通常指的是渲染引擎，用于解析html標(biāo)簽。

chrome瀏覽器內(nèi)核: 是谷歌的瀏覽器核心，谷歌瀏覽器早期用的是webkit,現(xiàn)在用的是blink,

代表瀏覽器:?google瀏覽器，360瀏覽器

trident: 是微軟開發(fā)的瀏覽器核心，也就是360瀏覽器中的兼容模式，代表瀏覽器: IE6-10瀏覽器，360極速瀏覽器

webkit: 蘋果公司自主研發(fā)的內(nèi)核，是一個開源項目，也是Safari瀏覽器使用的內(nèi)核。 Webkit引擎包含渲染引擎WebCore和javascript引擎JSCore。代表瀏覽器: 蘋果safari瀏覽器，早期Google Chrome、Opera及各種國產(chǎn)瀏覽器高速模式也使用Webkit作為內(nèi)核

gecko: 是火狐瀏覽器核心，最早是由網(wǎng)景公司開發(fā)的，老牌瀏覽器核心

Blink: 是webkit的一個分支，有Google和Opera?Software開發(fā)的渲染引擎，谷歌還自己開發(fā)了v8引擎用于解析js代碼。

十四.?html5新特性有哪些，html和Html5的區(qū)別

新特性:

1.音視頻標(biāo)簽: <video>,<audio>

2.?語義化標(biāo)簽:<header>,<article>

3.?畫布canvas

4.?地理定位

5.?增強(qiáng)型表單

6.?拖拽

7.?localStorage,sessionStorage

8.?websocket

9.?增加了一些新事件：ondrag,onresize,onplay,onpause

?

區(qū)別:

1? 文檔類型定義，h5簡潔

2?? html5增加了大量的語義標(biāo)簽

3?? 圖片，html5通過canvas可以直接在瀏覽器上繪圖

第十四題解析

十五.?簡述清除浮動的幾種方式

父級塊元素不浮動但是子元素浮動，就會父元素發(fā)生高度丟失，解決這個問題就需要清除浮動。

1.?在父元素內(nèi)最后一個位置加上一個空div，并且給空div加上clear:both樣式。

2.?給父元素也設(shè)置浮動。

3.?給父元素設(shè)置overflow:hidden樣式

4.?創(chuàng)建偽類樣式

.clearfix:after{

content:"";

display:block;

clear:both;

}

第十五題解析

::after表示法是在CSS3中引入的，::符號是指偽元素，:符號是指偽類。

? ? ? ? ? element:after? ? ? ? {style properties}? ? ? ? ? ? ? /*CSS2語法*/

? ? ? ? ? element::after? ? ? ?{style properties}? ? ? ? ? ? ? /*CSS3語法*/

用于向渲染的元素后添加內(nèi)容。

短元音/?/的發(fā)音方法

.clear:after { content: ""; display: block; clear: both; }




這里的.clearfix和.clear是類名，是自定義的。

fix?使固定 英[f?ks]

:after

:after 選擇器向選定元素的最后子元素后面插入內(nèi)容。

使用content?屬性來指定要插入的內(nèi)容。

（個人理解其作用是：在后面插內(nèi)容的）

CSS樣式.clear{clear:both;height:0;font-size:0px;overflow:hidden;}.clearfix:after{clear:both;content:".";display:block;height:0;visibility:hidden;}這兩個樣式，分別什么情況下使用？

這是兩種清除浮動的方式，.clear 就是在需要清除浮動的父元素內(nèi)部的所有浮動元素后面添加一個無意義的空標(biāo)簽來清除浮動，并且自定義其CSS為clear:both，加上其它屬于是為了讓這個標(biāo)簽不受其它因素的影響；.clearfix:after 就是利用after偽對象來清除浮動，該方法只適用于非IE瀏覽器，該方法中必須為需要清除浮動元素的偽對象中設(shè)置height:0，否則該元素會比實(shí)際高出若干像素。

content

clear和clearfix的區(qū)別

十六.?塊級元素水平居中的方式

1? 固定寬度，父子元素都不浮動，通過設(shè)置外邊距margin:0?auto;

2.?絕對定位，通過設(shè)置left:0;right:0;margin:auto;

3.?彈性盒子, justify-content:center(默認(rèn)主軸水平居中)

4.?父子元素都浮動的情況下，margin-left:50%,transform:translateX(-50%)

第十六題解析

十七.?什么是盒子模型

盒子模型是一種對于塊級元素特征的描述，主要用于對頁面進(jìn)行布局，包括4個特征:

margin(外邊距),padding(內(nèi)邊距),border(邊框),content(內(nèi)容區(qū))

padding

十八.?bootstrap柵格系統(tǒng)用于屏幕適配的樣式有幾種

1 手機(jī)屏幕:?col-xs?小于768px

2.?平板電腦屏幕:?col-sm?768-992px

3.?pc:?col-md?992-1200px

4.?大pc:?col-lg?1200px以上

柵格[shān gé]

柵格系統(tǒng)

?第十八題解析

十九．?vue的優(yōu)點(diǎn)和缺點(diǎn)

?vue 是一套構(gòu)建用戶界面的漸進(jìn)式框架（MVVM框架）。

?vue采用自底向上增量開發(fā)的設(shè)計。vue的核心只關(guān)注視圖層，是一個構(gòu)建數(shù)據(jù)驅(qū)動的Web頁面的庫。

優(yōu)點(diǎn):

1.?輕便易用

2.?雙向綁定

3.?組件化，模塊化，利用功能重復(fù)利用，便于團(tuán)隊協(xié)作

4.?指令，簡化了DOM操作

5.?虛擬DOM,利用diff算法提高DOM更新渲染的效率

缺點(diǎn):

1.?不支持ie8.0以下的瀏覽器

2.?比較適合開發(fā)單頁面應(yīng)用，不適合seo優(yōu)化

?第十九題解析

diff

二十. vue生命周期函數(shù)的作用

生命周期函數(shù)用于描述vue對象從創(chuàng)建到銷毀的一整個過程，在這個過程中，分為幾個階段，每個階段都有對應(yīng)的函數(shù)，這些函數(shù)就叫生命周期函數(shù)，也叫鉤子函數(shù)。生命周期函數(shù)用于開發(fā)人員在生命周期不同的時期進(jìn)行相應(yīng)的邏輯處理。

beforeCreate: 創(chuàng)建之前，el還沒有掛載DOM元素，data為undefined，都還沒初始化。

created: 對象創(chuàng)建完成，data就有了，通常在這個階段發(fā)送遠(yuǎn)程請求。

beforeMount: data數(shù)據(jù)已經(jīng)初始化完畢，但是都是虛擬狀態(tài)，還沒有更新到頁面中

mounted: vue實(shí)例掛載完成，更新的數(shù)據(jù)，就可以渲染到頁面上去。

beforeUpdate: data更新之前觸發(fā)

updated: data數(shù)據(jù)更新完成之后觸發(fā)，這個過程可以用watch監(jiān)控變量的變化

beforeDestroy: 對象銷毀之前

destroyed: 銷毀的時候觸發(fā)，這個時候組件的屬性方法都銷毀了。

?第二十題解析

destroy
徹底破壞

【英 【d??str??】 】

watch

觀看【英 [w?t?] 】

el

這道面試題的el我暫時理解為父級元素(和最外層的id為app的div有關(guān)）

【有些人說el是掛載點(diǎn)(可以理解為data數(shù)據(jù)生效的地方)】

二十一. vue父子組件傳值，兄弟組件傳值

1 父傳子，通過子組件的props屬性獲取父元素傳的值

2.?子傳父，通過指定事件傳值，用$emit(“函數(shù)名”,參數(shù))發(fā)送消息。

3.?兄弟間傳值:

a.?創(chuàng)建一個中間vue對象，通過這個對象的屬性來傳值

b.?使用$emit(“函數(shù)名”,參數(shù))發(fā)送數(shù)據(jù)，使用$on(“函數(shù)名”,function(參數(shù)){})

4.?本地存儲，比如，localStorage,sessionStorage

5.?Vuex,數(shù)據(jù)共享

第二十一題解析

二十二. v-if和v-show的區(qū)別

1.?兩個都可以控制元素的顯示和隱藏，v-if還可以分支控制

2.?v-if通過創(chuàng)建和銷毀元素來達(dá)到效果，v-show通過display來達(dá)到效果

3.?v-if創(chuàng)建的時候資源消耗較少，但是切換的時候消耗資源比較大，所以適合不頻繁切換的場合

4.?v-show切換的時候消耗的資源比較少，所以適合頻繁切換的場合

show

二十三. v-on為什么能綁定多個事件

原生js就支持綁定多個事件，是通過on事件名和addEventListener來綁定的，這兩個方式都支持綁定多個事件。

on事件名的方式綁定多個事件，只有最后一次綁定的起作用.

addEventListener方式綁定的多個事情，都能正常觸發(fā)。

二十四. 什么是vue過濾器，怎么使用

過濾器是用于給插值表達(dá)式的值做格式化處理的。分為全局過濾器和局部過濾器。在插值表達(dá)式中通過管道符來使用。

全局過濾器定義:

Vue.filter(“名稱”,function(參數(shù)1，參數(shù)2，參數(shù)3...){

});

局部過濾器定義:

new Vue({

filters:{

過濾器名:function(參數(shù)1，參數(shù)2，參數(shù)3...){}

}

})

?

使用:

{{值 | 過濾器名1( 參數(shù)) | 過濾器名2( 參數(shù))... }}

可以同時使用多個過濾器，前一個過濾器處理的結(jié)果可以傳遞給下一個過濾器繼續(xù)處理，直到所有過濾器全部執(zhí)行完畢。

?

二十五. axios是什么，簡述使用它完成登錄的流程

axios是一個基于promise的發(fā)送異步請求的庫

【特點(diǎn)(這個題可以不寫):

1 可以在服務(wù)端發(fā)送異步請求

2.?支持promiseAPI

3.?可以直接使用async?await

4.?有攔截器

5.?可以取消請求

6.?自動轉(zhuǎn)換json格式字符串

7.?防御xsrf(跨域腳本)攻擊】

登錄流程:

1. 獲取用戶名和密碼并進(jìn)行格式驗證

2.?使用axios的post方法發(fā)送登錄請求

3.?后臺把登錄成功與否的信息返回給前端

4.?前端在axios的then方法中獲取成功信息并且進(jìn)行相應(yīng)處理，在catch方法中獲取失敗信息進(jìn)行相應(yīng)處理

?

二十六. 簡述提高小程序應(yīng)用程序速度的方法

1 把本地資源如圖片等，做成外部鏈接

2.?減少data數(shù)據(jù)的大小，盡量只綁定用到的數(shù)據(jù)

3.?頁面上，減少無用標(biāo)簽的使用

4.?動態(tài)效果不使用css動畫，而使用外部加載gif圖片的方式

5.?不頻繁更新的數(shù)據(jù)可以使用本地緩存來保存

?

二十七. vue-loader是什么，有哪些用途

vue-loader是webpack的一個插件，負(fù)責(zé)把vue模板相關(guān)的語法文件轉(zhuǎn)換為瀏覽器能夠解析的語法文件。

1.?vue-loader解析.vue文件，把<template>,<style>,<script>三個部分，分別提取出來，把它們分別交給對應(yīng)的loader去進(jìn)行處理。

2.?有了vue-loader等一些loader插件，才可以使用.less和.scss這些預(yù)處理css文件。

.less文件一般交給css-loader處理

vue-template-compiler: 對template部分進(jìn)行轉(zhuǎn)換

less

?

二十八. 微信小程序頁面間傳值的方法

1.?使用navigator標(biāo)簽，通過url屬性按照get傳值方式進(jìn)行傳值。

2.?編程式導(dǎo)航,比如:wx.navigateTo({url:””})

3.?通過getCurrentPages()取得頁面棧進(jìn)行傳值

頁面棧

pages

?

二十九.?JavaScript的基本數(shù)據(jù)類型

Number、String 、Boolean?、Null、Undefined

Object 是 JavaScript 中所有對象的父對象

數(shù)據(jù)封裝類對象：Object、Array、Boolean、Number 和 String

其他對象：Function、Arguments、Math、Date、RegExp、Error

新類型：Symbol

?

Boolean

三十. 什么是盒子模型？

盒子模型是CSS中的一種布局模式，盒子模型包括content（內(nèi)容區(qū)）+padding（填充區(qū)）+border（邊框區(qū)）+margin（外邊界區(qū)），

可以分別理解為盒子里裝著的物品+物品與箱子之間的空隙+箱子+箱子外的區(qū)域。

?