ES6常見面試題總結(jié) 2021-03-21

1、es5和es6的區(qū)別,說一下你所知道的es6
ECMAScript5,即ES5,是ECMAScript的第五次修訂,于2009年完成標(biāo)準(zhǔn)化ECMAScript6,即ES6,是ECMAScript的第六次修訂,于2015年完成,也稱ES2015ES6是繼ES5之后的一次改進(jìn),相對于ES5更加簡潔,提高了開發(fā)效率ES6新增的一些特性:
1)let聲明變量和const聲明常量,兩個都有塊級作用域ES5中是沒有塊級作用域的,并且var有變量提升,在let中,使用的變量一定要進(jìn)行聲明
2)箭頭函數(shù)ES6中的函數(shù)定義不再使用關(guān)鍵字function(),而是利用了()=>來進(jìn)行定義
3)模板字符串模板字符串是增強版的字符串,用反引號(`)標(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òu)造函數(shù)
8)... 展開運算符可以將數(shù)組或?qū)ο罄锩娴闹嫡归_;還可以將多個值收集為一個變量
9)修飾器 @decorator是一個函數(shù),用來修改類甚至于是方法的行為。修飾器本質(zhì)就是編譯時執(zhí)行的函數(shù)
10)class 類的繼承ES6中不再像ES5一樣使用原型鏈實現(xiàn)繼承,而是引入Class這個概念11)async、await使用 async/await, 搭配promise,可以通過編寫形似同步的代碼來處理異步流程, 提高代碼的簡潔性和可讀性async 用于申明一個 function 是異步的,而 await 用于等待一個異步方法執(zhí)行完成
12)promisePromise是異步編程的一種解決方案,比傳統(tǒng)的解決方案(回調(diào)函數(shù)和事件)更合理、強大
13)SymbolSymbol是一種基本類型。Symbol 通過調(diào)用symbol函數(shù)產(chǎn)生,它接收一個可選的名字參數(shù),該函數(shù)返回的symbol是唯一的
14)Proxy代理使用代理(Proxy)監(jiān)聽對象的操作,然后可以做一些相應(yīng)事情
2、var、let、const之間的區(qū)別
var聲明變量可以重復(fù)聲明,而let不可以重復(fù)聲明
var是不受限于塊級的,而let是受限于塊級
var會與window相映射(會掛一個屬性),而let不與window相映射
var可以在聲明的上面訪問變量,而let有暫存死區(qū),在聲明的上面訪問變量會報錯
const聲明之后必須賦值,否則會報錯
const定義不可變的量,改變了就會報錯
const和let一樣不會與window相映射、支持塊級作用域、在聲明的上面訪問變量會報錯
3、使用箭頭函數(shù)應(yīng)注意什么?
(1)用了箭頭函數(shù),this就不是指向window,而是父級(指向是可變的)
(2)不能夠使用arguments對象
(3)不能用作構(gòu)造函數(shù),這就是說不能夠使用new命令,否則會拋出一個錯誤
(4)不可以使用yield命令,因此箭頭函數(shù)不能用作 Generator 函數(shù)
4、ES6的模板字符串有哪些新特性?并實現(xiàn)一個類模板字符串的功能
基本的字符串格式化。
將表達(dá)式嵌入字符串中進(jìn)行拼接。
${}來界定在ES5時我們通過反斜杠()來做多行字符串或者字符串一行行拼接。
ES6反引號(``)就能解決類模板字符串的功能

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

5、介紹下 Set、Map的區(qū)別?
應(yīng)用場景Set用于數(shù)據(jù)重組,Map用于數(shù)據(jù)儲存Set: 
(1)成員不能重復(fù)
(2)只有鍵值沒有鍵名,類似數(shù)組
(3)可以遍歷,方法有add, delete,has
Map:
(1)本質(zhì)上是健值對的集合,類似集合
(2)可以遍歷,可以跟各種數(shù)據(jù)格式轉(zhuǎn)換
6、ECMAScript 6 怎么寫 class ,為何會出現(xiàn) class?
ES6的class可以看作是一個語法糖,它的絕大部分功能ES5都可以做到,新的class寫法只是讓對象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z法

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

7、Promise構(gòu)造函數(shù)是同步執(zhí)行還是異步執(zhí)行,那么 then 方法呢?
promise構(gòu)造函數(shù)是同步執(zhí)行的,then方法是異步執(zhí)行的
8、setTimeout、Promise、Async/Await 的區(qū)別
事件循環(huán)中分為宏任務(wù)隊列和微任務(wù)隊列
其中setTimeout的回調(diào)函數(shù)放到宏任務(wù)隊列里,等到執(zhí)行棧清空以后執(zhí)行promise.then里的回調(diào)函數(shù)會放到相應(yīng)宏任務(wù)的微任務(wù)隊列里,等宏任務(wù)里面的同步代碼執(zhí)行完再執(zhí)行async函數(shù)表示函數(shù)里面可能會有異步方法,await后面跟一個表達(dá)式
async方法執(zhí)行時,遇到await會立即執(zhí)行表達(dá)式,然后把表達(dá)式后面的代碼放到微任務(wù)隊列里,讓出執(zhí)行棧讓同步代碼先執(zhí)行
9、promise有幾種狀態(tài),什么時候會進(jìn)入catch?
三個狀態(tài):
pending、fulfilled、reject
兩個過程:
padding -> fulfilled、padding -> rejected當(dāng)pending為rejectd時,會進(jìn)入catch
10、下面的輸出結(jié)果是多少

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


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


console.log(4);

Promise 新建后立即執(zhí)行,所以會先輸出 1,2,而 Promise.then()內(nèi)部的代碼在 當(dāng)次 事件循環(huán)的 結(jié)尾 立刻執(zhí)行 ,所以會繼續(xù)輸出4,最后輸出3
11、使用結(jié)構(gòu)賦值,實現(xiàn)兩個變量的值的交換

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

12、設(shè)計一個對象,鍵名的類型至少包含一個symbol類型,并且實現(xiàn)遍歷所有key

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

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

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

答案:2
兩個數(shù)組[1]并不是同一個值,它們分別定義的數(shù)組,在內(nèi)存中分別對應(yīng)著不同的存儲地址,因此并不是相同的值都能存儲到Set結(jié)構(gòu)中,所以size為2
14、Promise 中reject 和 catch 處理上有什么區(qū)別
reject 是用來拋出異常,catch 是用來處理異常
reject 是 Promise 的方法,而 catch 是 Promise 實例的方法
reject后的東西,一定會進(jìn)入then中的第二個回調(diào),如果then中沒有寫第二個回調(diào),則進(jìn)入catch
網(wǎng)絡(luò)異常(比如斷網(wǎng)),會直接進(jìn)入catch而不會進(jìn)入then的第二個回調(diào)
15、使用class 手寫一個promise

//創(chuàng)建一個Promise的類
  class Promise{
    constructor(executer){//構(gòu)造函數(shù)constructor里面是個執(zhí)行器
      this.status = 'pending';//默認(rèn)的狀態(tài) pending
      this.value = undefined//成功的值默認(rèn)undefined
      this.reason = undefined//失敗的值默認(rèn)undefined
      //狀態(tài)只有在pending時候才能改變
      let resolveFn = value =>{
        //判斷只有等待時才能resolve成功
        if(this.status == pending){
          this.status = 'resolve';
          this.value = value;
        }
      }
      //判斷只有等待時才能reject失敗
      let rejectFn = reason =>{
        if(this.status == pending){
          this.status = 'reject';
          this.reason = reason;
        }
      }    
      try{
        //把resolve和reject兩個函數(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);
      }
    }
  }

16、如何使用Set去重

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

17、將下面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;
}

18、理解 async/await以及對Generator的優(yōu)勢
async await 是用來解決異步的,async函數(shù)是Generator函數(shù)的語法糖
使用關(guān)鍵字async來表示,在函數(shù)內(nèi)部使用 await 來表示異步
async函數(shù)返回一個 Promise 對象,可以使用then方法添加回調(diào)函數(shù)
當(dāng)函數(shù)執(zhí)行的時候,一旦遇到await就會先返回,等到異步操作完成,再接著執(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)用
19、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
20、說一下es6的導(dǎo)入導(dǎo)出模塊
導(dǎo)入通過import關(guān)鍵字

// 只導(dǎo)入一個
import {sum} from "./example.js"
// 導(dǎo)入多個
import {sum,multiply,time} from "./exportExample.js"
// 導(dǎo)入一整個模塊
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時,對應(yīng)的import語句不需要使用大括號
let bosh = function crs(){}
export default bosh;
import crc from 'crc';
//不使用export default時,對應(yīng)的import語句需要使用大括號
let bosh = function crs(){}
export bosh;
import {crc} from 'crc';
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容