前端面試題整理—ES6篇

轉(zhuǎn)自https://www.cnblogs.com/theblogs/p/10575845.html

一稚补、es5和es6的區(qū)別新啼，說一下你所知道的es6

ECMAScript5叫搁，即ES5，是ECMAScript的第五次修訂，于2009年完成標(biāo)準(zhǔn)化
ECMAScript6搓茬，即ES6芽突，是ECMAScript的第六次修訂试浙，于2015年完成，也稱ES2015
ES6是繼ES5之后的一次改進(jìn)寞蚌，相對于ES5更加簡潔田巴，提高了開發(fā)效率

ES6新增的一些特性：

1. let聲明變量和const聲明常量，兩個(gè)都有塊級作用域
   ES5中是沒有塊級作用域的挟秤，并且var有變量提升壹哺，在let中，使用的變量一定要進(jìn)行聲明

2. 箭頭函數(shù)
   ES6中的函數(shù)定義不再使用關(guān)鍵字function()艘刚，而是利用了()=>來進(jìn)行定義

3. 模板字符串
   模板字符串是增強(qiáng)版的字符串管宵，用反引號（`）標(biāo)識，可以當(dāng)作普通字符串使用攀甚，也可以用來定義多行字符串

4. 解構(gòu)賦值
   ES6 允許按照一定模式箩朴，從數(shù)組和對象中提取值，對變量進(jìn)行賦值

5. for of循環(huán)
   for...of循環(huán)可以遍歷數(shù)組秋度、Set和Map結(jié)構(gòu)炸庞、某些類似數(shù)組的對象、對象荚斯，以及字符串

6. import埠居、export導(dǎo)入導(dǎo)出
   ES6標(biāo)準(zhǔn)中查牌，Js原生支持模塊(module)。將JS代碼分割成不同功能的小塊進(jìn)行模塊化滥壕，將不同功能的代碼分別寫在不同文件中纸颜，各模塊只需導(dǎo)出公共接口部分，然后通過模塊的導(dǎo)入的方式可以在其他地方使用

7. set數(shù)據(jù)結(jié)構(gòu)
   Set數(shù)據(jù)結(jié)構(gòu)绎橘，類似數(shù)組胁孙。所有的數(shù)據(jù)都是唯一的，沒有重復(fù)的值金踪。它本身是一個(gè)構(gòu)造函數(shù)

8. ... 展開運(yùn)算符
   可以將數(shù)組或?qū)ο罄锩娴闹嫡归_浊洞；還可以將多個(gè)值收集為一個(gè)變量

9. 修飾器 @
   decorator是一個(gè)函數(shù)，用來修改類甚至于是方法的行為胡岔。修飾器本質(zhì)就是編譯時(shí)執(zhí)行的函數(shù)

10. class 類的繼承
    ES6中不再像ES5一樣使用原型鏈實(shí)現(xiàn)繼承法希，而是引入Class這個(gè)概念

11. async、await
    使用 async/await, 搭配promise,可以通過編寫形似同步的代碼來處理異步流程, 提高代碼的簡潔性和可讀性
    async 用于申明一個(gè) function 是異步的靶瘸，而 await 用于等待一個(gè)異步方法執(zhí)行完成

12. promise
    Promise是異步編程的一種解決方案苫亦，比傳統(tǒng)的解決方案（回調(diào)函數(shù)和事件）更合理、強(qiáng)大

13. Symbol
    Symbol是一種基本類型怨咪。Symbol 通過調(diào)用symbol函數(shù)產(chǎn)生屋剑，它接收一個(gè)可選的名字參數(shù)，該函數(shù)返回的symbol是唯一的

14. Proxy代理
    使用代理（Proxy）監(jiān)聽對象的操作诗眨，然后可以做一些相應(yīng)事情

二唉匾、var、let匠楚、const之間的區(qū)別

1. var聲明變量可以重復(fù)聲明巍膘，而let不可以重復(fù)聲明
2. var是不受限于塊級的，而let是受限于塊級
3. var會(huì)與window相映射（會(huì)掛一個(gè)屬性）芋簿，而let不與window相映射
4. var可以在聲明的上面訪問變量峡懈，而let有暫存死區(qū)，在聲明的上面訪問變量會(huì)報(bào)錯(cuò)
5. const聲明之后必須賦值与斤，否則會(huì)報(bào)錯(cuò)
6. const定義不可變的量肪康，改變了就會(huì)報(bào)錯(cuò)
7. const和let一樣不會(huì)與window相映射、支持塊級作用域撩穿、在聲明的上面訪問變量會(huì)報(bào)錯(cuò)

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

1. 用了箭頭函數(shù)食寡，this就不是指向window齐唆，而是父級（指向是可變的）
2. 不能夠使用arguments對象
3. 不能用作構(gòu)造函數(shù)，這就是說不能夠使用new命令冻河，否則會(huì)拋出一個(gè)錯(cuò)誤
4. 不可以使用yield命令箍邮，因此箭頭函數(shù)不能用作 Generator 函數(shù)

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

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

let name = 'web';
let age = 10;
let str = '你好味滞，${name} 已經(jīng) ${age}歲了';
console.log(str);// 你好，web 已經(jīng) 10歲了  

五钮呀、介紹下 Set剑鞍、Map的區(qū)別？

應(yīng)用場景Set用于數(shù)據(jù)重組爽醋，Map用于數(shù)據(jù)儲(chǔ)存

Set:

1. 成員不能重復(fù)
2. 只有鍵值沒有鍵名蚁署，類似數(shù)組
3. 可以遍歷，方法有add, delete,has

Map:

1. 本質(zhì)上是健值對的集合蚂四，類似集合
2. 可以遍歷光戈，可以跟各種數(shù)據(jù)格式轉(zhuǎn)換

六、ECMAScript 6 怎么寫 class 遂赠，為何會(huì)出現(xiàn) class久妆？

ES6的class可以看作是一個(gè)語法糖，它的絕大部分功能ES5都可以做到跷睦，新的class寫法只是讓對象原型的寫法更加清晰筷弦、更像面向?qū)ο缶幊痰恼Z法

//定義類
class Point { 
  constructor(x,y) { 
      //構(gòu)造方法
       this.x = x; //this關(guān)鍵字代表實(shí)例對象
       this.y = y; 
  } toString() {
       return '(' + this.x + ',' + this.y + ')'; 
  }
}

七、Promise構(gòu)造函數(shù)是同步執(zhí)行還是異步執(zhí)行抑诸，那么 then 方法呢烂琴？

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

八哼鬓、setTimeout监右、Promise、Async/Await 的區(qū)別

1. 事件循環(huán)中分為宏任務(wù)隊(duì)列和微任務(wù)隊(duì)列异希。
2. 其中setTimeout的回調(diào)函數(shù)放到宏任務(wù)隊(duì)列里健盒，等到執(zhí)行棧清空以后執(zhí)行。
3. promise.then里的回調(diào)函數(shù)會(huì)放到相應(yīng)宏任務(wù)的微任務(wù)隊(duì)列里称簿，等宏任務(wù)里面的同步代碼執(zhí)行完再執(zhí)行扣癣。
4. async函數(shù)表示函數(shù)里面可能會(huì)有異步方法，await后面跟一個(gè)表達(dá)式憨降。
5. async方法執(zhí)行時(shí)父虑，遇到await會(huì)立即執(zhí)行表達(dá)式，然后把表達(dá)式后面的代碼放到微任務(wù)隊(duì)列里授药，讓出執(zhí)行棧讓同步代碼先執(zhí)行士嚎。

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

1莱衩、三個(gè)狀態(tài)：pending爵嗅、fulfilled、reject
2笨蚁、兩個(gè)過程：padding -> fulfilled睹晒、padding -> rejected
3、當(dāng)pending為rejectd時(shí)括细，會(huì)進(jìn)入catch

十伪很、下面的輸出結(jié)果是多少

const promise = new Promise((resolve, reject) => {
    console.log(1);
    resolve();
    console.log(2);
})

promise.then(() => {
    console.log(3);
})

console.log(4);

1 2 4 3
Promise 新建后立即執(zhí)行，所以會(huì)先輸出 1奋单，2锉试，而 Promise.then() 內(nèi)部的代碼在 當(dāng)次 事件循環(huán)的 結(jié)尾 立刻執(zhí)行 ，所以會(huì)繼續(xù)輸出4辱匿，最后輸出3

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

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

十二匾七、設(shè)計(jì)一個(gè)對象絮短，鍵名的類型至少包含一個(gè)symbol類型，并且實(shí)現(xiàn)遍歷所有key

 let name = Symbol('name');
 let product = {
    [name]:"洗衣機(jī)",    
    "price":799
  };
  Reflect.ownKeys(product);

十三昨忆、下面Set結(jié)構(gòu)丁频，打印出的size值是多少

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

答案：2
兩個(gè)數(shù)組[1]并不是同一個(gè)值，它們分別定義的數(shù)組邑贴，在內(nèi)存中分別對應(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è)回調(diào)

十五躁染、使用class 手寫一個(gè)promise

//創(chuàng)建一個(gè)Promise的類
class Promise
{
    //構(gòu)造函數(shù)constructor里面是個(gè)執(zhí)行器
    constructor(executer)
    {
        this.status = 'pending';//默認(rèn)的狀態(tài) pending
        this.value = undefined//成功的值默認(rèn)undefined
        this.reason = undefined//失敗的值默認(rèn)undefined
        //狀態(tài)只有在pending時(shí)候才能改變
        let resolveFn = value =>
        {
            //判斷只有等待時(shí)才能resolve成功
            if(this.status == pending)
            {
                this.status = 'resolve';
                this.value = value;
            }
        }
        
        //判斷只有等待時(shí)才能reject失敗
        let rejectFn = reason =>
        {
            if(this.status == pending)
            {
                this.status = 'reject';
                this.reason = reason;
            }
        }
            
        try
        {
            // 把resolve和reject兩個(gè)函數(shù)傳給執(zhí)行器executer
            executer(resolve,reject);
        }
        catch(e)
        {
            reject(e);//失敗的話進(jìn)catch
        }
    }
    then(onFufilled,onReject)
    {
        //如果狀態(tài)成功調(diào)用onFufilled
        if(this.status = 'resolve')
        {
            onFufilled(this.value);
        }
        //如果狀態(tài)失敗調(diào)用onReject
        if(this.status = 'reject')
        {
            onReject(this.reason);
        }
    }
} 

十六、如何使用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以及對Generator的優(yōu)勢

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

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

十九、forEach荔烧、for in吱七、for of三者區(qū)別

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

二十踊餐、說一下es6的導(dǎo)入導(dǎo)出模塊

導(dǎo)入通過import關(guān)鍵字

// 只導(dǎo)入一個(gè)
import {sum} from "./example.js"

// 導(dǎo)入多個(gè)
import {sum,multiply,time} from "./exportExample.js"

// 導(dǎo)入一整個(gè)模塊
import * as example from "./exportExample.js"

導(dǎo)出通過export關(guān)鍵字

//可以將export放在任何變量,函數(shù)或類聲明的前面
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

//也可以使用大括號指定所要輸出的一組變量
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};

//使用export default時(shí)，對應(yīng)的import語句不需要使用大括號
let bosh = function crs(){}
export default bosh;
import crc from 'crc';

//不使用export default時(shí)臀稚，對應(yīng)的import語句需要使用大括號
let bosh = function crs(){}
export bosh;
import {crc} from 'crc';