es6面試題

• es5和es6的區(qū)別，說一下你所知道的es6
• var、let、const之間的區(qū)別
• es6實(shí)現(xiàn)代碼數(shù)組去重的方式？
• 使用箭頭函數(shù)應(yīng)注意什么？
• ES6的模板字符串有哪些新特性？并實(shí)現(xiàn)一個(gè)類模板字符串的功能
• 介紹下 Set、Map的區(qū)別？
• promise是什么？有幾種狀態(tài)，什么時(shí)候會(huì)進(jìn)入catch？
• promise構(gòu)造函數(shù)是同步執(zhí)行還是異步執(zhí)行，那么 then 方法呢？
• setTimeout、Promise、Async/Await 的區(qū)別
• 使用結(jié)構(gòu)賦值，實(shí)現(xiàn)兩個(gè)變量的值的交換
• 下面Set結(jié)構(gòu)，打印出的size值是多少
• Promise 中reject 和 catch 處理上有什么區(qū)別
• 如何使用Set去重
• 將下面for循環(huán)改成for of形式
• 理解 async/await以及對(duì)Generator的優(yōu)勢(shì)
• forEach、for in、for of三者區(qū)別
• 說一下es6的導(dǎo)入導(dǎo)出模塊
• 箭頭函數(shù)與普通函數(shù)區(qū)別？
• axios的特點(diǎn)有哪些？axios 攔截器
• ajax和axios區(qū)別
• 什么是Async/Await?

es6面試題解析

es5和es6的區(qū)別，說一下你所知道的es6

ECMAScript5，即ES5，是ECMAScript的第五次修訂，于2009年完成標(biāo)準(zhǔn)化
ECMAScript6，即ES6，是ECMAScript的第六次修訂，于2015年完成，也稱ES2015
ES6是繼ES5之后的一次改進(jìn)，相對(duì)于ES5更加簡(jiǎn)潔，提高了開發(fā)效率

ES6新增的一些特性：

• let聲明變量和const聲明常量，兩個(gè)都有塊級(jí)作用域
  　　ES5中是沒有塊級(jí)作用域的，并且var有變量提升，在let中，使用的變量一定要進(jìn)行聲明
• 箭頭函數(shù)
  　　ES6中的函數(shù)定義不再使用關(guān)鍵字function()，而是利用了()=>來進(jìn)行定義
• 模板字符串
  　　模板字符串是增強(qiáng)版的字符串，用反引號(hào)（`）標(biāo)識(shí)，可以當(dāng)作普通字符串使用，也可以用來定義多行字符串
• 解構(gòu)賦值
  　　ES6 允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值
• for of循環(huán)
  　　for...of循環(huán)可以遍歷數(shù)組、Set和Map結(jié)構(gòu)、某些類似數(shù)組的對(duì)象、對(duì)象，以及字符串
• import、export導(dǎo)入導(dǎo)出
  　　ES6標(biāo)準(zhǔn)中，Js原生支持模塊(module)。將JS代碼分割成不同功能的小塊進(jìn)行模塊化，將不同功能的代碼分別寫在不同文件中，各模塊只需導(dǎo)出公共接口部分，然后通過模塊的導(dǎo)入的方式可以在其他地方使用
• set數(shù)據(jù)結(jié)構(gòu)
  　　Set數(shù)據(jù)結(jié)構(gòu)，類似數(shù)組。所有的數(shù)據(jù)都是唯一的，沒有重復(fù)的值。它本身是一個(gè)構(gòu)造函數(shù)
• ... 展開運(yùn)算符
  　　可以將數(shù)組或?qū)ο罄锩娴闹嫡归_；還可以將多個(gè)值收集為一個(gè)變量
• 修飾器 @
  　　decorator是一個(gè)函數(shù)，用來修改類甚至于是方法的行為。修飾器本質(zhì)就是編譯時(shí)執(zhí)行的函數(shù)
• class 類的繼承
  　　ES6中不再像ES5一樣使用原型鏈實(shí)現(xiàn)繼承，而是引入Class這個(gè)概念
• async、await
  　　使用 async/await, 搭配promise,可以通過編寫形似同步的代碼來處理異步流程, 提高代碼的簡(jiǎn)潔性和可讀性
  　　async 用于申明一個(gè) function 是異步的，而 await 用于等待一個(gè)異步方法執(zhí)行完成
• promise
  　　Promise是異步編程的一種解決方案，比傳統(tǒng)的解決方案（回調(diào)函數(shù)和事件）更合理、強(qiáng)大
• Symbol
  　　Symbol是一種基本類型。Symbol 通過調(diào)用symbol函數(shù)產(chǎn)生，它接收一個(gè)可選的名字參數(shù)，該函數(shù)返回的symbol是唯一的
• Proxy代理
  　　使用代理（Proxy）監(jiān)聽對(duì)象的操作，然后可以做一些相應(yīng)事情

var、let、const之間的區(qū)別

• var聲明變量可以重復(fù)聲明，而let不可以重復(fù)聲明
• var是不受限于塊級(jí)的，而let是受限于塊級(jí)
• var會(huì)與window相映射（會(huì)掛一個(gè)屬性），而let不與window相映射
• var可以在聲明的上面訪問變量，而let有暫存死區(qū)，在聲明的上面訪問變量會(huì)報(bào)錯(cuò)
• const聲明之后必須賦值，否則會(huì)報(bào)錯(cuò)
• const定義不可變的量，改變了就會(huì)報(bào)錯(cuò)
• const和let一樣不會(huì)與window相映射、支持塊級(jí)作用域、在聲明的上面訪問變量會(huì)報(bào)錯(cuò)

es6實(shí)現(xiàn)代碼數(shù)組去重的方式？

...new Set()一行代碼去重

使用箭頭函數(shù)應(yīng)注意什么？

• 用了箭頭函數(shù)，this就不是指向window，而是父級(jí)（指向是可變的）
• 不能夠使用arguments對(duì)象
• 不能用作構(gòu)造函數(shù)，這就是說不能夠使用new命令，否則會(huì)拋出一個(gè)錯(cuò)誤
• 不可以使用yield命令，因此箭頭函數(shù)不能用作 Generator 函數(shù)

ES6的模板字符串有哪些新特性？并實(shí)現(xiàn)一個(gè)類模板字符串的功能

基本的字符串格式化。將表達(dá)式嵌入字符串中進(jìn)行拼接。用${}來界定
在ES5時(shí)我們通過反斜杠()來做多行字符串或者字符串一行行拼接。ES6反引號(hào)(``)就能解決

let name = '小明';
        let age = 10;
        let str = '你好，${name} 已經(jīng) ${age}歲了'
        str = str.replace(/\$\{([^}]*)\}/g,function(){
            return eval(arguments[1]);
        })
        console.log(str);//你好，小明 已經(jīng) 10歲了

介紹下 Set、Map的區(qū)別？

應(yīng)用場(chǎng)景Set用于數(shù)據(jù)重組，Map用于數(shù)據(jù)儲(chǔ)存
Set：　
?。?）成員不能重復(fù)
　（2）只有鍵值沒有鍵名，類似數(shù)組
　（3）可以遍歷，方法有add, delete,has
Map:
?。?）本質(zhì)上是健值對(duì)的集合，類似集合
?。?）可以遍歷，可以跟各種數(shù)據(jù)格式轉(zhuǎn)換

promise是什么？有幾種狀態(tài)，什么時(shí)候會(huì)進(jìn)入catch？

promise是異步編程的一種解決方案.用來解決異步操作問題
三個(gè)狀態(tài)：pending（等待中）、fulfilled（已成功）、reject（已失?。?br> 兩個(gè)過程：padding -> fulfilled、padding -> rejected
當(dāng)pending為rejectd時(shí)，會(huì)進(jìn)入catch

promise構(gòu)造函數(shù)是同步執(zhí)行還是異步執(zhí)行，那么 then 方法呢？

promise構(gòu)造函數(shù)是同步執(zhí)行的，then方法是異步執(zhí)行的

setTimeout、Promise、Async/Await 的區(qū)別

• 事件循環(huán)中分為宏任務(wù)隊(duì)列和微任務(wù)隊(duì)列
• 其中setTimeout的回調(diào)函數(shù)放到宏任務(wù)隊(duì)列里，等到執(zhí)行棧清空以后執(zhí)行
• promise.then里的回調(diào)函數(shù)會(huì)放到相應(yīng)宏任務(wù)的微任務(wù)隊(duì)列里，等宏任務(wù)里面的同步代碼執(zhí)行完再執(zhí)行
• async函數(shù)表示函數(shù)里面可能會(huì)有異步方法，await后面跟一個(gè)表達(dá)式
• async方法執(zhí)行時(shí)，遇到await會(huì)立即執(zhí)行表達(dá)式，然后把表達(dá)式后面的代碼放到微任務(wù)隊(duì)列里，讓出執(zhí)行棧讓同步代碼先執(zhí)行

使用結(jié)構(gòu)賦值，實(shí)現(xiàn)兩個(gè)變量的值的交換

 let a = 1;let b = 2;
[a,b] = [b,a];

下面Set結(jié)構(gòu)，打印出的size值是多少

let s = new Set();
s.add([1]);
s.add([1]);console.log(s.size);

console.log()答應(yīng)出來是2
兩個(gè)數(shù)組[1]并不是同一個(gè)值，它們分別定義的數(shù)組，在內(nèi)存中分別對(duì)應(yīng)著不同的存儲(chǔ)地址，因此并不是相同的值。 都能存儲(chǔ)到Set結(jié)構(gòu)中，所以size為2

Promise 中reject 和 catch 處理上有什么區(qū)別

• reject 是用來拋出異常，catch 是用來處理異常
• reject 是 Promise 的方法，而 catch 是 Promise 實(shí)例的方法
• reject后的東西，一定會(huì)進(jìn)入then中的第二個(gè)回調(diào)，如果then中沒有寫第二個(gè)回調(diào)，則進(jìn)入catch
• 網(wǎng)絡(luò)異常（比如斷網(wǎng)），會(huì)直接進(jìn)入catch而不會(huì)進(jìn)入then的第二個(gè)回

如何使用Set去重

let arr = [12,43,23,43,68,12];
let item = [...new Set(arr)];
console.log(item);//[12, 43, 23, 68]

將下面for循環(huán)改成for of形式

let arr = [11,22,33,44,55];
let sum = 0;
for(let i=0;i<arr.length;i++){
    sum += arr[i];
}

答案如下：

let arr = [11,22,33,44,55];
let sum = 0;
for(value of arr){
    sum += value;
}

理解 async/await以及對(duì)Generator的優(yōu)勢(shì)

async await 是用來解決異步的，async函數(shù)是Generator函數(shù)的語法糖
使用關(guān)鍵字async來表示，在函數(shù)內(nèi)部使用 await 來表示異步
async函數(shù)返回一個(gè) Promise 對(duì)象，可以使用then方法添加回調(diào)函數(shù)
當(dāng)函數(shù)執(zhí)行的時(shí)候，一旦遇到await就會(huì)先返回，等到異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語句

async較Generator的優(yōu)勢(shì)：

• 內(nèi)置執(zhí)行器。Generator 函數(shù)的執(zhí)行必須依靠執(zhí)行器，而 Aysnc 函數(shù)自帶執(zhí)行器，調(diào)用方式跟普通函數(shù)的調(diào)用一樣
• 更好的語義。async 和 await 相較于 * 和 yield 更加語義化
• 更廣的適用性。yield命令后面只能是 Thunk 函數(shù)或 Promise對(duì)象，async函數(shù)的await后面可以是Promise也可以是原始類型的值
• 返回值是 Promise。async 函數(shù)返回的是 Promise 對(duì)象，比Generator函數(shù)返回的Iterator對(duì)象方便，可以直接使用 then() 方法進(jìn)行調(diào)用

forEach、for in、for of三者區(qū)別

• forEach更多的用來遍歷數(shù)組
• for in 一般常用來遍歷對(duì)象或json
• for of數(shù)組對(duì)象都可以遍歷，遍歷對(duì)象需要通過和Object.keys()
• for in循環(huán)出的是key，for of循環(huán)出的是value

說一下es6的導(dǎo)入導(dǎo)出模塊

通過import導(dǎo)入 通過export導(dǎo)出

• 使用export default時(shí) 對(duì)應(yīng)的import語句不需要適用大括號(hào)
• 不適用export default時(shí) 對(duì)應(yīng)的import語句需要使用大括號(hào)

箭頭函數(shù)與普通函數(shù)區(qū)別？

• 寫法不一樣
• 普通函數(shù)存在變量提升的現(xiàn)象
• 箭頭函數(shù)不能作為構(gòu)造函數(shù)使用
• 兩者this的指向不同
• 箭頭函數(shù)的arguments指向它的父級(jí)函數(shù)所在作用域的arguments
• 箭頭函數(shù)沒有new.target

axios的特點(diǎn)有哪些？axios 攔截器

axios是一個(gè)基于promise的http庫 支持promise所有的api

它可以攔截請(qǐng)求和響應(yīng)
它可以轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù) 并對(duì)響應(yīng)回來的內(nèi)容自動(dòng)轉(zhuǎn)換成json類型的數(shù)據(jù)
安全性更高

常用方法有axios.get axios.delete axios.post axios.put

• 請(qǐng)求攔截器

請(qǐng)求攔截器的作用是在請(qǐng)求發(fā)送前進(jìn)行一些操作，例如在每個(gè)請(qǐng)求體里加上token，統(tǒng)一做了處理如果以后要改也非常容易。

• 響應(yīng)攔截器
  響應(yīng)攔截器的作用是在接收到響應(yīng)后進(jìn)行一些操作，例如在服務(wù)器返回登錄狀態(tài)失效，需要重新登錄的時(shí)候，跳轉(zhuǎn)到登錄頁。

ajax和axios區(qū)別

先來看一下代碼
ajax

　$.ajax({
　　　　url: '接口地址',
　　　　type: 'get', //或者post　　 請(qǐng)求類型
　　　　dataType: 'json',
　　　　data: { // 要發(fā)送的請(qǐng)求參數(shù)
　　　　　　'username' : 'hermit',
　　　　　　'password' : 'a123'
　　　　},
　　　　success : function (response) {
　　　　　　console.log(response); // 請(qǐng)求返回的數(shù)據(jù)
　　　　}
　　})

axios

　axios({
　　　　url: '接口地址',
　　　　method: 'get', //或者 post    請(qǐng)求類型
　　　　responseType: 'json', //默認(rèn)格式，如果就是 json 格式可以不寫
　　　　data: {
　　　　　　'username' : 'hermit',
　　　　　　'password' : 'a123'
　　　　}
　　}).then( function(response){ // 請(qǐng)求正確返回的數(shù)據(jù)
　　　　console.log(response);
　　　　console.log(response.data);
　　}).catch( function(error) { // 請(qǐng)求錯(cuò)誤返回的數(shù)據(jù)
　　　　console.log(error);n  
　　})

兩者其實(shí)并沒有太大的區(qū)別，在寫法上大致相同。
其實(shí)axios是通過 promise 實(shí)現(xiàn)對(duì) ajax 技術(shù)的一種封裝。就像 ajax 是 通過 jQuery 來封裝一樣。
也就是說，jQuery 將請(qǐng)求技術(shù)進(jìn)行了封裝 變成了 ajax , 而 通過 promise 又把 ajax 進(jìn)行封裝就成了 axios。

什么是Async/Await?

• async/await是寫異步代碼的新方式，以前的方法有回調(diào)函數(shù)和Promise。
• async/await是基于Promise實(shí)現(xiàn)的，它不能用于普通的回調(diào)函數(shù)。
• async/await與Promise一樣，是非阻塞的。
• async/await使得異步代碼看起來像同步代碼，這正是它的魔力所在。

持續(xù)更新中......