前言

前文我們介紹了ES6的相關(guān)知識點(diǎn)，關(guān)于ES6的學(xué)習(xí)也就要告一段落了，本人整理了一些相關(guān)面試題在這里分享給大家。

一、什么是ES6，以及引入ES6的原因

? ?ES6? ?

ES 的全稱是 ECMAScript , 它是由 ECMA 國際標(biāo)準(zhǔn)化組織,制定的一項(xiàng)腳本語言的標(biāo)準(zhǔn)化規(guī)范。

ES6 既是一個歷史名詞，也是一個泛指，含義是 5.1 版以后的 JavaScript 的下一代標(biāo)準(zhǔn)，涵蓋了 ES2015、ES2016、ES2017 等等，而 ES2015 則是正式名稱，特指該年發(fā)布的正式版本的語言標(biāo)準(zhǔn)。

? ?引入ES6的原因? ?

每一次標(biāo)準(zhǔn)的誕生都意味著語言的完善，功能的加強(qiáng)。JavaScript語言本身也有一些令人不滿意的地方。

- 變量提升特性增加了程序運(yùn)行時的不可預(yù)測性

- 語法過于松散，實(shí)現(xiàn)相同的功能，不同的人可能會寫出不同的代碼

二、let，var，const三者的區(qū)別。

? ? 不同點(diǎn)??? ?

• ?let? ?const 具有塊級作用域（所謂塊級作用域，簡單來說，花括號內(nèi)的區(qū)域就可以看作是塊級作用域），也不會有變量提升，
• ?let? 和 const 不可以重復(fù)賦值，也不可以未賦值先使用。（會造成暫時性死區(qū)）
• 作用域鏈，并不影響
• var 有變量提升的情況，可以未賦值先使用。用var聲明的變量具有頂級屬性（所謂頂級屬性，例如var聲明的變量是全局的也就是在window中的，此時這個變量就是一個頂級屬性），而let const是沒有的。

三、運(yùn)用ES6如何合并兩個對象？

 // 聲明一個名為student的對象
         const student ={
            name:'Tom',
            age: 18,
            height: 170
        }

 // 聲明一個名為person的對象
        const person = {
            name: 'Tom',
            age: 18,
            [key]: 180
        }

? 方法一? 使用Object.assign 的方法

let result = Object.assign(person,student);

? ??

? ?運(yùn)行結(jié)果? ?

?

? 方法二???使用三點(diǎn)運(yùn)算符

let result = {...person,...student};

? ?運(yùn)行結(jié)果? ?

四、for...in 和for...of有什么區(qū)別。

? ?不同點(diǎn)? ?

for…in 遍歷的是key也就是屬性名,for…of 遍歷的是值，for…in…多用于遍歷可枚舉(所謂可枚舉就是可列舉的意思)的數(shù)據(jù)類型，for…of…多用于遍歷擁有iterator接口的數(shù)據(jù)

五、?箭頭函數(shù)的this和普通函數(shù)的this的區(qū)別。

? ?不同點(diǎn)? ?

普通函數(shù)的this，是根據(jù)調(diào)用者來確定的。

箭頭函數(shù)的this，是根據(jù)作用域的上下文來確定的，且是靜態(tài)不可更改的。

? ?擴(kuò)展——不同情況下的this指向問題? ?

1. 聲明在全局的函數(shù)，this指代的是 window

2. 聲明在對象當(dāng)中的函數(shù)也就是這個函數(shù)的方法，this 是調(diào)用調(diào)用這個方法的對象

3. 構(gòu)造函數(shù)中的this，因?yàn)闃?gòu)造函數(shù)的使用需要 new 關(guān)鍵字，所以構(gòu)造函數(shù)中的 this 指代的是 new 出來的實(shí)例對象

?4. 箭頭函數(shù)中的this，當(dāng)前聲明箭頭函數(shù)的作用域中的this指代的是誰，箭頭函數(shù)的this就是誰。

六、Es6中如何定義模板字符串，有什么好處。

? ?定義模板字符串的方法? ?

模板字符串相當(dāng)于加強(qiáng)版的字符串，用反引號?`,除了作為普通字符串，還可以用來定義多行字符串，還可以在字符串中加入變量和表達(dá)式。

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

多行字符串:

let string1 = `Hey, can you stop angry now?`;

字符串插入變量和表達(dá)式。

變量名寫在 ${} 中，${} 中可以放入 JavaScript 表達(dá)式。

字符串中調(diào)用函數(shù)

function f(){ return "have fun!"; } let string2= `Game start,${f()}`;

七、Array的擴(kuò)展方法map和filter相同點(diǎn)與區(qū)別。

? ? 相同點(diǎn)? ?

不會對空數(shù)組進(jìn)行檢測，不會更改原始數(shù)組，都會返回一個新的數(shù)組。

? ? 不同點(diǎn)? ?

Map 用于對原始數(shù)組的元素進(jìn)行操作，filter 主要是針對需要通過篩選條件的元素。

八、?Promise中的then是同步的還是異步，簡單描述下執(zhí)行機(jī)制。

Promise中的then 是異步的

? ? 執(zhí)行機(jī)制? ?

then 是promise 中的一個方法，也就說是一個函數(shù)，有兩個參數(shù)，分別是成功的回調(diào)，失敗的回調(diào)，具體執(zhí)行哪一個要看 new Promise中執(zhí)行的是成功還是失敗的回調(diào)，從此也可以看出，then 是異步執(zhí)行的。

? ? 擴(kuò)展? ?setTimeout 是異步執(zhí)行的嗎？

Promise 在使用new關(guān)鍵字之后就是異步的，也就是說其中的then 方法也是異步執(zhí)行的，SetTimeout 是同步的，setTimeout 工作的本質(zhì)只是通過時間延遲將所要執(zhí)行事件放在了事件隊(duì)列最后面，給人是異步執(zhí)行的感覺，但本質(zhì)上還是同步執(zhí)行的。

九、 Symbol是什么，有什么作用。

? ? Symbol? ?

ES6引入了一種新的原始數(shù)據(jù)類型 Symbol，表示獨(dú)一無二的值。它是JavaScript語言的第七種數(shù)據(jù)類型，是一種類似于字符串的數(shù)據(jù)類型。

? ? Symbol特性? ?

• Symbol 數(shù)據(jù)類型不能與其他數(shù)據(jù)類型運(yùn)算
• Symbol定義的對象屬性不能使用for…in循環(huán)遍歷，但是可以使用Reflect.ownKeys來獲取對象的所有鍵名。(包括symbol類型的鍵)

十、?數(shù)組中reduce方法有什么作用。

? ?作用? ?

reduce() 方法接收一個函數(shù)作為累加器，數(shù)組中的每個值（從左到右）開始縮減，最終計(jì)算為一個值。

參數(shù)一： total 是初始值也是返回值

參數(shù)二： current 是當(dāng)前值

參數(shù)三： 也可以自定義初始值。（在語句塊的最后也可以自定義初始值）

十一、class類中super，get，set有什么作用。

? ?super? ?

Super的使用多用于在子類繼承父類的相關(guān)屬性時必須要使用super 關(guān)鍵字，否則會報錯，且必須在this之前,

? ?get 和? set? ?

get set 用來封裝屬性的，當(dāng)獲取數(shù)據(jù)時，get方法就會被調(diào)用， 當(dāng)設(shè)置數(shù)據(jù)時set方法就會被調(diào)用

十二、async/await優(yōu)缺點(diǎn)。

? ?async/await 的作用? ?

可以讓異步代碼看起來像同步一樣

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

async?和?await?相比直接使用?Promise?來講，優(yōu)點(diǎn)在于處理 then 的調(diào)用鏈，可以更清晰準(zhǔn)確的寫出代碼。

? 缺點(diǎn)? ?

缺點(diǎn)在于濫用?await?可能會致使性能問題，由于?await?會阻塞代碼，也許以后的異步代碼并不依賴于前者，但仍然須要等待前者完成，致使代碼失去了并發(fā)性。

十三、iterator的作用是什么，如何添加iterator接口。

? ?iterator的作用? ?

?為各種不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問機(jī)制

? ?添加iterator接口的方法? ?

模仿數(shù)組的iterator形式給對象 添加iterator接口,使得訪問對象中的數(shù)組時，可以直接遍歷對象

 const person = {
            title: 'whatever',
            name: ['Jack', 'Tom', 'Lucy'],
            [Symbol.iterator]() {
                let i = 0;
                return {
                    next: () => {
                        if (i < this.name.length) {
                            const obj = { value: this.name[i], done: false };
                            i++;
                            return obj;
                        } else {
                            return { vlaue: undefined, done: true };
                        }
                    }
                }
            }
        }

        let my = person[Symbol.iterator]();
        console.log(my.next());
        console.log(my.next());
        console.log(my.next());
        console.log(my.next());

        for (let i of person) {
            console.log(i);
        }

十四、本地存儲有哪些方式，他們有什么區(qū)別。

? ?localStorage? ?

瀏覽器關(guān)閉，數(shù)據(jù)不會丟失，除非手動清除，多個窗口可共享數(shù)據(jù)

? sessionStorage? ?

瀏覽器一旦關(guān)閉，數(shù)據(jù)立馬丟失，而sessionStorage只能是當(dāng)前窗口查看數(shù)據(jù)。

十五、?簡述下數(shù)組中find()和findindex()方法是干什么的。

find( ) findIndex( ) 是ES6中數(shù)組的內(nèi)置方法，

? find( )??

find( ) 用于查找數(shù)組中符合條件的第一個元素值

? findIndex( )??

findIndex( ) 用于查找數(shù)組中符合條件的第一個元素的位置，若無返回-1

十六、ES6中對象如何添加一個變量作為key值。

ES6中可以使用預(yù)先定義好的變量作為對象的屬性名。使用 【 】的形式在對象中直接添加預(yù)先定義好的變量

? 舉例

?let key = 'height';

? ? ? ? const person = {

? ? ? ? ? ? name: 'Tom',

? ? ? ? ? ? age: 18,

? ? ? ? ? ? [key]: 180

? ? ? ? }

十七、?什么是Json數(shù)據(jù)。

• JSON 指的是 JavaScript 對象表示法（JavaScript?Object?Notation）
• JSON 是輕量級的文本數(shù)據(jù)交換格式
• JSON 獨(dú)立于語言：JSON 使用 Javascript語法來描述數(shù)據(jù)對象，但是 JSON 仍然獨(dú)立于語言和平臺。JSON 解析器和 JSON 庫支持許多不同的編程語言。 目前非常多的動態(tài)（PHP，JSP，.NET）編程語言都支持JSON。
• JSON 具有自我描述性，更易理解

總結(jié)

就此停筆，如果是在準(zhǔn)備面試的小伙伴看到了這篇文章，祝你好運(yùn)哦~最后，依舊誠摯祝福屏幕前的你健康喜樂、平安喜樂。文章來源地址http://www.zghlxwxcb.cn/news/detail-617310.html

到了這里，關(guān)于ES6——ES6相關(guān)面試題分享的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！