[Vue中文社區(qū)](javascript:void(0);) 今天

圖片

作者：StevenLikeWatermelon

https://juejin.cn/post/6844903734464495623

近期在復(fù)習(xí)ES6，針對(duì)ES6新的知識(shí)點(diǎn)，以問答形式整理一個(gè)全面知識(shí)和問題匯總任连。

一、問：ES6是什么例诀，為什么要學(xué)習(xí)它随抠，不學(xué)習(xí)ES6會(huì)怎么樣?

答：ES6是新一代的JS語言標(biāo)準(zhǔn)，對(duì)分JS語言核心內(nèi)容做了升級(jí)優(yōu)化余佃，規(guī)范了JS使用標(biāo)準(zhǔn)暮刃，新增了JS原生方法，使得JS使用更加規(guī)范爆土，更加優(yōu)雅椭懊，更適合大型應(yīng)用的開發(fā)。學(xué)習(xí)ES6是成為專業(yè)前端正規(guī)軍的必經(jīng)之路步势。不學(xué)習(xí)ES6也可以寫代碼打鬼子氧猬，但是最多只能當(dāng)個(gè)游擊隊(duì)長(zhǎng)。

二坏瘩、問：ES5盅抚、ES6和ES2015有什么區(qū)別?

答：ES2015特指在2015年發(fā)布的新一代JS語言標(biāo)準(zhǔn)，ES6泛指下一代JS語言標(biāo)準(zhǔn)倔矾，包含ES2015妄均、ES2016柱锹、ES2017、ES2018等》岚現(xiàn)階段在絕大部分場(chǎng)景下禁熏，ES2015默認(rèn)等同ES6。ES5泛指上一代語言標(biāo)準(zhǔn)邑彪。ES2015可以理解為ES5和ES6的時(shí)間分界線瞧毙。

三、問：babel是什么寄症，有什么作用?

答：babel是一個(gè) ES6 轉(zhuǎn)碼器宙彪，可以將 ES6 代碼轉(zhuǎn)為 ES5 代碼，以便兼容那些還沒支持ES6的平臺(tái)有巧。

四释漆、問：let有什么用，有了var為什么還要用let剪决？

答：在ES6之前灵汪，聲明變量只能用var，var方式聲明變量其實(shí)是很不合理的柑潦，準(zhǔn)確的說，是因?yàn)镋S5里面沒有塊級(jí)作用域是很不合理的峻凫，甚至可以說是一個(gè)語言層面的bug(這也是很多c++渗鬼、java開發(fā)人員看不懂，也瞧不起JS語言的劣勢(shì)之一)荧琼。沒有塊級(jí)作用域會(huì)帶來很多難以理解的問題譬胎，比如for循環(huán)var變量泄露，變量覆蓋等問題命锄。let 聲明的變量擁有自己的塊級(jí)作用域堰乔，且修復(fù)了var聲明變量帶來的變量提升問題。

五脐恩、問：舉一些ES6對(duì)String字符串類型做的常用升級(jí)優(yōu)化?

答：

1镐侯、優(yōu)化部分：

ES6新增了字符串模板，在拼接大段字符串時(shí)驶冒，用反斜杠(`)取代以往的字符串相加的形式苟翻，能保留所有空格和換行，使得字符串拼接看起來更加直觀骗污，更加優(yōu)雅崇猫。

2、升級(jí)部分:

ES6在String原型上新增了includes()方法需忿，用于取代傳統(tǒng)的只能用indexOf查找包含字符的方法(indexOf返回-1表示沒查到不如includes方法返回false更明確诅炉，語義更清晰), 此外還新增了startsWith(), endsWith(), padStart(),padEnd(),repeat()等方法蜡歹，可方便的用于查找，補(bǔ)全字符串涕烧。

六月而、問：舉一些ES6對(duì)Array數(shù)組類型做的常用升級(jí)優(yōu)化?

答：

1、優(yōu)化部分：

a. 數(shù)組解構(gòu)賦值澈魄。ES6可以直接以let [a,b,c] = [1,2,3]形式進(jìn)行變量賦值景鼠，在聲明較多變量時(shí)，不用再寫很多l(xiāng)et(var),且映射關(guān)系清晰痹扇，且支持賦默認(rèn)值铛漓。

b. 擴(kuò)展運(yùn)算符。ES6新增的擴(kuò)展運(yùn)算符(...)(重要),可以輕松的實(shí)現(xiàn)數(shù)組和松散序列的相互轉(zhuǎn)化鲫构，可以取代arguments對(duì)象和apply方法浓恶，輕松獲取未知參數(shù)個(gè)數(shù)情況下的參數(shù)集合。（尤其是在ES5中结笨，arguments并不是一個(gè)真正的數(shù)組包晰，而是一個(gè)類數(shù)組的對(duì)象，但是擴(kuò)展運(yùn)算符的逆運(yùn)算卻可以返回一個(gè)真正的數(shù)組）炕吸。擴(kuò)展運(yùn)算符還可以輕松方便的實(shí)現(xiàn)數(shù)組的復(fù)制和解構(gòu)賦值（let a = [2,3,4]; let b = [...a]）伐憾。

2、升級(jí)部分:

ES6在Array原型上新增了find()方法赫模，用于取代傳統(tǒng)的只能用indexOf查找包含數(shù)組項(xiàng)目的方法,且修復(fù)了indexOf查找不到NaN的bug([NaN].indexOf(NaN) === -1).此外還新增了copyWithin(), includes(), fill(),flat()等方法树肃，可方便的用于字符串的查找，補(bǔ)全,轉(zhuǎn)換等瀑罗。

七胸嘴、問：舉一些ES6對(duì)Number數(shù)字類型做的常用升級(jí)優(yōu)化?

答：

1、優(yōu)化部分：

ES6在Number原型上新增了isFinite(), isNaN()方法斩祭，用來取代傳統(tǒng)的全局isFinite(), isNaN()方法檢測(cè)數(shù)值是否有限、是否是NaN摧玫。ES5的isFinite(), isNaN()方法都會(huì)先將非數(shù)值類型的參數(shù)轉(zhuǎn)化為Number類型再做判斷耳奕，這其實(shí)是不合理的，最造成isNaN('NaN') === true的奇怪行為--'NaN'是一個(gè)字符串席赂，但是isNaN卻說這就是NaN吮铭。而Number.isFinite()和Number.isNaN()則不會(huì)有此類問題(Number.isNaN('NaN') === false)。（isFinite()同上）

2颅停、升級(jí)部分:

ES6在Math對(duì)象上新增了Math.cbrt()谓晌，trunc()，hypot()等等較多的科學(xué)計(jì)數(shù)法運(yùn)算方法癞揉，可以更加全面的進(jìn)行立方根纸肉、求和立方根等等科學(xué)計(jì)算溺欧。

八、問：舉一些ES6對(duì)Object類型做的常用升級(jí)優(yōu)化?(重要)

答：

1柏肪、優(yōu)化部分：

a. 對(duì)象屬性變量式聲明姐刁。ES6可以直接以變量形式聲明對(duì)象屬性或者方法，烦味。比傳統(tǒng)的鍵值對(duì)形式聲明更加簡(jiǎn)潔聂使，更加方便，語義更加清晰谬俄。

let [apple, orange] = ['red appe', 'yellow orange'];let myFruits = {apple, orange};    // let myFruits = {apple: 'red appe', orange: 'yellow orange'};

尤其在對(duì)象解構(gòu)賦值(見優(yōu)化部分b.)或者模塊輸出變量時(shí)柏靶，這種寫法的好處體現(xiàn)的最為明顯:

let {keys, values, entries} = Object;let MyOwnMethods = {keys, values, entries}; // let MyOwnMethods = {keys: keys, values: values, entries: entries}

可以看到屬性變量式聲明屬性看起來更加簡(jiǎn)潔明了。方法也可以采用簡(jiǎn)潔寫法：

let es5Fun = {    method: function(){}}; let es6Fun = {    method(){}}

b. 對(duì)象的解構(gòu)賦值溃论。ES6對(duì)象也可以像數(shù)組解構(gòu)賦值那樣屎蜓，進(jìn)行變量的解構(gòu)賦值：

let {apple, orange} = {apple: 'red appe', orange: 'yellow orange'};

c. 對(duì)象的擴(kuò)展運(yùn)算符(...)。ES6對(duì)象的擴(kuò)展運(yùn)算符和數(shù)組擴(kuò)展運(yùn)算符用法本質(zhì)上差別不大钥勋，畢竟數(shù)組也就是特殊的對(duì)象炬转。對(duì)象的擴(kuò)展運(yùn)算符一個(gè)最常用也最好用的用處就在于可以輕松的取出一個(gè)目標(biāo)對(duì)象內(nèi)部全部或者部分的可遍歷屬性，從而進(jìn)行對(duì)象的合并和分解算灸。

let {apple, orange, ...otherFruits} = {apple: 'red apple', orange: 'yellow orange', grape: 'purple grape', peach: 'sweet peach'}; // otherFruits  {grape: 'purple grape', peach: 'sweet peach'}// 注意: 對(duì)象的擴(kuò)展運(yùn)算符用在解構(gòu)賦值時(shí)扼劈，擴(kuò)展運(yùn)算符只能用在最后一個(gè)參數(shù)(otherFruits后面不能再跟其他參數(shù))let moreFruits = {watermelon: 'nice watermelon'};let allFruits = {apple, orange, ...otherFruits, ...moreFruits};

d. super 關(guān)鍵字。ES6在Class類里新增了類似this的關(guān)鍵字super菲驴。同this總是指向當(dāng)前函數(shù)所在的對(duì)象不同测僵，super關(guān)鍵字總是指向當(dāng)前函數(shù)所在對(duì)象的原型對(duì)象。

2谢翎、升級(jí)部分:

a. ES6在Object原型上新增了is()方法，做兩個(gè)目標(biāo)對(duì)象的相等比較沐旨，用來完善'==='方法森逮。'==='方法中NaN === NaN //false其實(shí)是不合理的，Object.is修復(fù)了這個(gè)小bug磁携。(Object.is(NaN, NaN) // true)

b. ES6在Object原型上新增了assign()方法褒侧，用于對(duì)象新增屬性或者多個(gè)對(duì)象合并。

const target = { a: 1 };const source1 = { b: 2 };const source2 = { c: 3 };Object.assign(target, source1, source2);target // {a:1, b:2, c:3}

注意: assign合并的對(duì)象target只能合并source1谊迄、source2中的自身屬性闷供，并不會(huì)合并source1、source2中的繼承屬性统诺，也不會(huì)合并不可枚舉的屬性歪脏，且無法正確復(fù)制get和set屬性（會(huì)直接執(zhí)行g(shù)et/set函數(shù)，取return的值）粮呢。

c. ES6在Object原型上新增了getOwnPropertyDescriptors()方法婿失，此方法增強(qiáng)了ES5中g(shù)etOwnPropertyDescriptor()方法钞艇，可以獲取指定對(duì)象所有自身屬性的描述對(duì)象。結(jié)合defineProperties()方法豪硅，可以完美復(fù)制對(duì)象哩照，包括復(fù)制get和set屬性。

d. ES6在Object原型上新增了getPrototypeOf()和setPrototypeOf()方法懒浮，用來獲取或設(shè)置當(dāng)前對(duì)象的prototype對(duì)象飘弧。這個(gè)方法存在的意義在于，ES5中獲取設(shè)置prototype對(duì)像是通過proto屬性來實(shí)現(xiàn)的砚著，然而proto屬性并不是ES規(guī)范中的明文規(guī)定的屬性次伶，只是瀏覽器各大產(chǎn)商“私自”加上去的屬性，只不過因?yàn)檫m用范圍廣而被默認(rèn)使用了赖草，再非瀏覽器環(huán)境中并不一定就可以使用学少，所以為了穩(wěn)妥起見，獲取或設(shè)置當(dāng)前對(duì)象的prototype對(duì)象時(shí)秧骑，都應(yīng)該采用ES6新增的標(biāo)準(zhǔn)用法版确。

e. ES6在Object原型上還新增了Object.keys()，Object.values()乎折，Object.entries()方法绒疗，用來獲取對(duì)象的所有鍵、所有值和所有鍵值對(duì)數(shù)組骂澄。

九吓蘑、問：舉一些ES6對(duì)Function函數(shù)類型做的常用升級(jí)優(yōu)化?(重要)

答：

1、優(yōu)化部分：

a. 箭頭函數(shù)(核心)坟冲。箭頭函數(shù)是ES6核心的升級(jí)項(xiàng)之一磨镶，箭頭函數(shù)里沒有自己的this,這改變了以往JS函數(shù)中最讓人難以理解的this運(yùn)行機(jī)制。主要優(yōu)化點(diǎn):

Ⅰ. 箭頭函數(shù)內(nèi)的this指向的是函數(shù)定義時(shí)所在的對(duì)象健提，而不是函數(shù)執(zhí)行時(shí)所在的對(duì)象琳猫。ES5函數(shù)里的this總是指向函數(shù)執(zhí)行時(shí)所在的對(duì)象，這使得在很多情況下this的指向變得很難理解私痹，尤其是非嚴(yán)格模式情況下脐嫂，this有時(shí)候會(huì)指向全局對(duì)象，這甚至也可以歸結(jié)為語言層面的bug之一紊遵。ES6的箭頭函數(shù)優(yōu)化了這一點(diǎn)账千，它的內(nèi)部沒有自己的this,這也就導(dǎo)致了this總是指向上一層的this，如果上一層還是箭頭函數(shù)暗膜，則繼續(xù)向上指匀奏，直到指向到有自己this的函數(shù)為止，并作為自己的this桦山。

Ⅱ. 箭頭函數(shù)不能用作構(gòu)造函數(shù)攒射，因?yàn)樗鼪]有自己的this醋旦，無法實(shí)例化。

Ⅲ. 也是因?yàn)榧^函數(shù)沒有自己的this,所以箭頭函數(shù) 內(nèi)也不存在arguments對(duì)象会放。（可以用擴(kuò)展運(yùn)算符代替）

b. 函數(shù)默認(rèn)賦值饲齐。ES6之前，函數(shù)的形參是無法給默認(rèn)值得咧最，只能在函數(shù)內(nèi)部通過變通方法實(shí)現(xiàn)捂人。ES6以更簡(jiǎn)潔更明確的方式進(jìn)行函數(shù)默認(rèn)賦值。

function es6Fuc (x, y = 'default') {    console.log(x, y);}es6Fuc(4) // 4, default

2矢沿、升級(jí)部分:

ES6新增了雙冒號(hào)運(yùn)算符滥搭，用來取代以往的bind，call,和apply捣鲸。(瀏覽器暫不支持瑟匆，Babel已經(jīng)支持轉(zhuǎn)碼)

foo::bar;// 等同于bar.bind(foo);foo::bar(...arguments);// 等同于bar.apply(foo, arguments);復(fù)制代碼

十、問：Symbol是什么栽惶，有什么作用愁溜？

答：Symbol是ES6引入的第七種原始數(shù)據(jù)類型（說法不準(zhǔn)確，應(yīng)該是第七種數(shù)據(jù)類型外厂，Object不是原始數(shù)據(jù)類型之一冕象，已更正），所有Symbol()生成的值都是獨(dú)一無二的汁蝶，可以從根本上解決對(duì)象屬性太多導(dǎo)致屬性名沖突覆蓋的問題渐扮。對(duì)象中Symbol()屬性不能被for...in遍歷，但是也不是私有屬性掖棉。

十一墓律、問：Set是什么，有什么作用幔亥？

答：Set是ES6引入的一種類似Array的新的數(shù)據(jù)結(jié)構(gòu)只锻，Set實(shí)例的成員類似于數(shù)組item成員，區(qū)別是Set實(shí)例的成員都是唯一紫谷，不重復(fù)的。這個(gè)特性可以輕松地實(shí)現(xiàn)數(shù)組去重捐寥。

十二笤昨、問：Map是什么，有什么作用握恳？

答：Map是ES6引入的一種類似Object的新的數(shù)據(jù)結(jié)構(gòu)瞒窒，Map可以理解為是Object的超集，打破了以傳統(tǒng)鍵值對(duì)形式定義對(duì)象乡洼，對(duì)象的key不再局限于字符串崇裁，也可以是Object匕坯。可以更加全面的描述對(duì)象的屬性拔稳。

十三葛峻、問：Proxy是什么，有什么作用巴比？

答：Proxy是ES6新增的一個(gè)構(gòu)造函數(shù)术奖，可以理解為JS語言的一個(gè)代理，用來改變JS默認(rèn)的一些語言行為轻绞，包括攔截默認(rèn)的get/set等底層方法采记，使得JS的使用自由度更高，可以最大限度的滿足開發(fā)者的需求政勃。比如通過攔截對(duì)象的get/set方法唧龄，可以輕松地定制自己想要的key或者value。下面的例子可以看到奸远，隨便定義一個(gè)myOwnObj的key,都可以變成自己想要的函數(shù)既棺。

function createMyOwnObj() { //想把所有的key都變成函數(shù)，或者Promise,或者anything return new Proxy({}, {  get(target, propKey, receiver) {   return new Promise((resolve, reject) => {    setTimeout(() => {     let randomBoolean = Math.random() > 0.5;     let Message;     if (randomBoolean) {      Message = `你的${propKey}運(yùn)氣不錯(cuò)然走，成功了`;      resolve(Message);     } else {      Message = `你的${propKey}運(yùn)氣不行援制，失敗了`;      reject(Message);     }    }, 1000);   });  } });}let myOwnObj = createMyOwnObj();myOwnObj.hahaha.then(result => { console.log(result) //你的hahaha運(yùn)氣不錯(cuò)，成功了}).catch(error => { console.log(error) //你的hahaha運(yùn)氣不行芍瑞，失敗了})myOwnObj.wuwuwu.then(result => { console.log(result) //你的wuwuwu運(yùn)氣不錯(cuò)晨仑，成功了}).catch(error => { console.log(error) //你的wuwuwu運(yùn)氣不行，失敗了})

十四拆檬、問：Reflect是什么洪己，有什么作用？

答：Reflect是ES6引入的一個(gè)新的對(duì)象竟贯，他的主要作用有兩點(diǎn)答捕，一是將原生的一些零散分布在Object、Function或者全局函數(shù)里的方法(如apply屑那、delete拱镐、get、set等等)持际，統(tǒng)一整合到Reflect上沃琅，這樣可以更加方便更加統(tǒng)一的管理一些原生API。其次就是因?yàn)镻roxy可以改寫默認(rèn)的原生API蜘欲，如果一旦原生API別改寫可能就找不到了益眉，所以Reflect也可以起到備份原生API的作用，使得即使原生API被改寫了之后，也可以在被改寫之后的API用上默認(rèn)的API郭脂。

十五年碘、問：Promise是什么，有什么作用展鸡？

答：Promise是ES6引入的一個(gè)新的對(duì)象屿衅，他的主要作用是用來解決JS異步機(jī)制里，回調(diào)機(jī)制產(chǎn)生的“回調(diào)地獄”娱颊。它并不是什么突破性的API傲诵，只是封裝了異步回調(diào)形式，使得異步回調(diào)可以寫的更加優(yōu)雅箱硕，可讀性更高拴竹，而且可以鏈?zhǔn)秸{(diào)用。

附錄：15道ES6 Promise實(shí)戰(zhàn)練習(xí)題

十六剧罩、問：Iterator是什么栓拜，有什么作用？(重要)

答：Iterator是ES6中一個(gè)很重要概念惠昔，它并不是對(duì)象幕与，也不是任何一種數(shù)據(jù)類型。因?yàn)镋S6新增了Set镇防、Map類型啦鸣，他們和Array、Object類型很像来氧，Array诫给、Object都是可以遍歷的，但是Set啦扬、Map都不能用for循環(huán)遍歷中狂，解決這個(gè)問題有兩種方案，一種是為Set扑毡、Map單獨(dú)新增一個(gè)用來遍歷的API胃榕，另一種是為Set、Map瞄摊、Array勋又、Object新增一個(gè)統(tǒng)一的遍歷API，顯然换帜，第二種更好赐写，ES6也就順其自然的需要一種設(shè)計(jì)標(biāo)準(zhǔn)，來統(tǒng)一所有可遍歷類型的遍歷方式膜赃。Iterator正是這樣一種標(biāo)準(zhǔn)∪嗤或者說是一種規(guī)范理念跳座。

就好像JavaScript是ECMAScript標(biāo)準(zhǔn)的一種具體實(shí)現(xiàn)一樣端铛，Iterator標(biāo)準(zhǔn)的具體實(shí)現(xiàn)是Iterator遍歷器。Iterator標(biāo)準(zhǔn)規(guī)定疲眷，所有部署了key值為[Symbol.iterator]禾蚕，且[Symbol.iterator]的value是標(biāo)準(zhǔn)的Iterator接口函數(shù)(標(biāo)準(zhǔn)的Iterator接口函數(shù): 該函數(shù)必須返回一個(gè)對(duì)象，且對(duì)象中包含next方法狂丝，且執(zhí)行next()能返回包含value/done屬性的Iterator對(duì)象)的對(duì)象换淆，都稱之為可遍歷對(duì)象，next()后返回的Iterator對(duì)象也就是Iterator遍歷器几颜。

//obj就是可遍歷的倍试，因?yàn)樗裱薎terator標(biāo)準(zhǔn)，且包含[Symbol.iterator]方法蛋哭，方法函數(shù)也符合標(biāo)準(zhǔn)的Iterator接口規(guī)范县习。//obj.[Symbol.iterator]() 就是Iterator遍歷器let obj = {  data: [ 'hello', 'world' ],  [Symbol.iterator]() {    const self = this;    let index = 0;    return {      next() {        if (index < self.data.length) {          return {            value: self.data[index++],            done: false          };        } else {          return { value: undefined, done: true };        }      }    };  }};

ES6給Set、Map谆趾、Array躁愿、String都加上了[Symbol.iterator]方法，且[Symbol.iterator]方法函數(shù)也符合標(biāo)準(zhǔn)的Iterator接口規(guī)范沪蓬，所以Set彤钟、Map、Array跷叉、String默認(rèn)都是可以遍歷的逸雹。

//Arraylet array = ['red', 'green', 'blue'];array[Symbol.iterator]() //Iterator遍歷器array[Symbol.iterator]().next() //{value: "red", done: false}//Stringlet string = '1122334455';string[Symbol.iterator]() //Iterator遍歷器string[Symbol.iterator]().next() //{value: "1", done: false}//setlet set = new Set(['red', 'green', 'blue']);set[Symbol.iterator]() //Iterator遍歷器set[Symbol.iterator]().next() //{value: "red", done: false}//Maplet map = new Map();let obj= {map: 'map'};map.set(obj, 'mapValue');map[Symbol.iterator]().next()  {value: Array(2), done: false}

十七、問：for...in 和for...of有什么區(qū)別性芬？

答：如果看到問題十六峡眶，那么就很好回答。問題十六提到了ES6統(tǒng)一了遍歷標(biāo)準(zhǔn)植锉，制定了可遍歷對(duì)象辫樱，那么用什么方法去遍歷呢？答案就是用for...of俊庇。ES6規(guī)定狮暑，有所部署了載了Iterator接口的對(duì)象(可遍歷對(duì)象)都可以通過for...of去遍歷，而for..in僅僅可以遍歷對(duì)象辉饱。

這也就意味著搬男，數(shù)組也可以用for...of遍歷，這極大地方便了數(shù)組的取值彭沼，且避免了很多程序用for..in去遍歷數(shù)組的惡習(xí)缔逛。

上面提到的擴(kuò)展運(yùn)算符本質(zhì)上也就是for..of循環(huán)的一種實(shí)現(xiàn)。

十八、Generator函數(shù)是什么褐奴，有什么作用按脚？

答：如果說JavaScript是ECMAScript標(biāo)準(zhǔn)的一種具體實(shí)現(xiàn)、Iterator遍歷器是Iterator的具體實(shí)現(xiàn)敦冬，那么Generator函數(shù)可以說是Iterator接口的具體實(shí)現(xiàn)方式辅搬。

執(zhí)行Generator函數(shù)會(huì)返回一個(gè)遍歷器對(duì)象，每一次Generator函數(shù)里面的yield都相當(dāng)一次遍歷器對(duì)象的next()方法脖旱，并且可以通過next(value)方法傳入自定義的value,來改變Generator函數(shù)的行為堪遂。

Generator函數(shù)可以通過配合Thunk 函數(shù)更輕松更優(yōu)雅的實(shí)現(xiàn)異步編程和控制流管理。

十九萌庆、async函數(shù)是什么溶褪，有什么作用？

答：async函數(shù)可以理解為內(nèi)置自動(dòng)執(zhí)行器的Generator函數(shù)語法糖踊兜，它配合ES6的Promise近乎完美的實(shí)現(xiàn)了異步編程解決方案竿滨。

附錄：手寫async await的最簡(jiǎn)實(shí)現(xiàn)（20行搞定）！阿里字節(jié)面試必考

二十捏境、Class于游、extends是什么，有什么作用垫言？

答：ES6 的class可以看作只是一個(gè)ES5生成實(shí)例對(duì)象的構(gòu)造函數(shù)的語法糖贰剥。它參考了java語言，定義了一個(gè)類的概念筷频，讓對(duì)象原型寫法更加清晰蚌成，對(duì)象實(shí)例化更像是一種面向?qū)ο缶幊獭lass類可以通過extends實(shí)現(xiàn)繼承凛捏。它和ES5構(gòu)造函數(shù)的不同點(diǎn)：

a. 類的內(nèi)部定義的所有方法担忧，都是不可枚舉的。

///ES5function ES5Fun (x, y) { this.x = x; this.y = y;}ES5Fun.prototype.toString = function () {  return '(' + this.x + ', ' + this.y + ')';}var p = new ES5Fun(1, 3);p.toString();Object.keys(ES5Fun.prototype); //['toString']//ES6class ES6Fun { constructor (x, y) {  this.x = x;  this.y = y; } toString () {  return '(' + this.x + ', ' + this.y + ')'; }}Object.keys(ES6Fun.prototype); //[]

b.ES6的class類必須用new命令操作坯癣，而ES5的構(gòu)造函數(shù)不用new也可以執(zhí)行瓶盛。

c.ES6的class類不存在變量提升，必須先定義class之后才能實(shí)例化示罗，不像ES5中可以將構(gòu)造函數(shù)寫在實(shí)例化之后惩猫。

d.ES5 的繼承，實(shí)質(zhì)是先創(chuàng)造子類的實(shí)例對(duì)象this蚜点，然后再將父類的方法添加到this上面轧房。ES6 的繼承機(jī)制完全不同，實(shí)質(zhì)是先將父類實(shí)例對(duì)象的屬性和方法绍绘，加到this上面（所以必須先調(diào)用super方法）奶镶，然后再用子類的構(gòu)造函數(shù)修改this迟赃。

二十一、module厂镇、export捺氢、import是什么，有什么作用剪撬？

答：module、export悠反、import是ES6用來統(tǒng)一前端模塊化方案的設(shè)計(jì)思路和實(shí)現(xiàn)方案残黑。export、import的出現(xiàn)統(tǒng)一了前端模塊化的實(shí)現(xiàn)方案斋否，整合規(guī)范了瀏覽器/服務(wù)端的模塊化方法梨水，用來取代傳統(tǒng)的AMD/CMD、requireJS茵臭、seaJS疫诽、commondJS等等一系列前端模塊不同的實(shí)現(xiàn)方案，使前端模塊化更加統(tǒng)一規(guī)范旦委，JS也能更加能實(shí)現(xiàn)大型的應(yīng)用程序開發(fā)奇徒。

import引入的模塊是靜態(tài)加載（編譯階段加載）而不是動(dòng)態(tài)加載（運(yùn)行時(shí)加載）。

import引入export導(dǎo)出的接口值是動(dòng)態(tài)綁定關(guān)系缨硝，即通過該接口摩钙，可以取到模塊內(nèi)部實(shí)時(shí)的值。

二十二查辩、日常前端代碼開發(fā)中胖笛，有哪些值得用ES6去改進(jìn)的編程優(yōu)化或者規(guī)范？

答：

1. 常用箭頭函數(shù)來取代var self = this;的做法宜岛。
2. 常用let取代var命令长踊。
3. 常用數(shù)組/對(duì)象的結(jié)構(gòu)賦值來命名變量，結(jié)構(gòu)更清晰萍倡，語義更明確身弊，可讀性更好。
4. 在長(zhǎng)字符串多變量組合場(chǎng)合遣铝，用模板字符串來取代字符串累加佑刷，能取得更好地效果和閱讀體驗(yàn)。
5. 用Class類取代傳統(tǒng)的構(gòu)造函數(shù)酿炸，來生成實(shí)例化對(duì)象瘫絮。
6. 在大型應(yīng)用開發(fā)中，要保持module模塊化開發(fā)思維填硕，分清模塊之間的關(guān)系麦萤，常用import鹿鳖、export方法。

聲明：文章著作權(quán)歸作者所有壮莹，如有侵權(quán)翅帜，請(qǐng)聯(lián)系小編刪除。

<pre data-tool="mdnice編輯器" style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(0, 0, 0); font-size: 16px; text-align: left; letter-spacing: 0.544px; background-color: rgb(255, 255, 255);">推薦閱讀：

<pre style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; letter-spacing: 0.544px; caret-color: rgb(51, 51, 51); word-spacing: 2px; color: rgb(63, 63, 63);">

• Gitlab-ci:從零開始的前端自動(dòng)化部署

• 一文搞懂單點(diǎn)登錄三種情況的實(shí)現(xiàn)方式

• 14款前端常用的富文本編輯器插件

• 終于有人把 Nginx 說清楚了命满，圖文詳解涝滴！

• 推薦 130 個(gè)令你眼前一亮的網(wǎng)站，總有一個(gè)用得著

• 深入淺出 33 道 Vue 99% 出鏡率的面試題