日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

公告:魔扣目錄網(wǎng)為廣大站長提供免費(fèi)收錄網(wǎng)站服務(wù),提交前請做好本站友鏈:【 網(wǎng)站目錄:http://www.ylptlb.cn 】, 免友鏈快審服務(wù)(50元/站),

點(diǎn)擊這里在線咨詢客服
新站提交
  • 網(wǎng)站:51998
  • 待審:31
  • 小程序:12
  • 文章:1030137
  • 會(huì)員:747

前端程序員不可不知的ES6干貨知識點(diǎn)

 

ES6是什么,為什么要學(xué)習(xí)它,不學(xué)習(xí)ES6會(huì)怎么樣?

答:ES6是新一代的JS語言標(biāo)準(zhǔn),對分JS語言核心內(nèi)容做了升級優(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ì)長。

 

ES5、ES6和ES2015有什么區(qū)別?

答:ES2015特指在2015年發(fā)布的新一代JS語言標(biāo)準(zhǔn),

ES6泛指下一代JS語言標(biāo)準(zhǔn),包含ES2015、ES2016、ES2017、ES2018等。現(xiàn)階段在絕大部分場景下,ES2015默認(rèn)等同ES6。

ES5泛指上一代語言標(biāo)準(zhǔn)。ES2015可以理解為ES5和ES6的時(shí)間分界線。

 

babel是什么,有什么作用?

答:babel是一個(gè) ES6 轉(zhuǎn)碼器,可以將 ES6 代碼轉(zhuǎn)為 ES5 代碼,以便兼容那些還沒支持ES6的平臺。

 

let有什么用,有了var為什么還要用let?

答:在ES6之前,聲明變量只能用var,var方式聲明變量其實(shí)是很不合理的,準(zhǔn)確的說,是因?yàn)镋S5里面沒有塊級作用域是很不合理的,甚至可以說是一個(gè)語言層面的bug(這也是很多c++、JAVA開發(fā)人員看不懂,也瞧不起JS語言的劣勢之一)。

沒有塊級作用域回來帶很多難以理解的問題,比如for循環(huán)var變量泄露,變量覆蓋等問題。

let 聲明的變量擁有自己的塊級作用域,且修復(fù)了var聲明變量帶來的變量提升問題。

 

問:舉一些ES6對String字符串類型做的常用升級優(yōu)化?

答:

優(yōu)化部分:

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

升級部分:

ES6在String原型上新增了includes()方法,用于取代傳統(tǒng)的只能用indexOf查找包含字符的方法(indexOf返回-1表示沒查到不如includes方法返回false更明確,語義更清晰),

此外還新增了startsWith(), endsWith(), padStart(),padEnd(),repeat()等方法,可方便的用于查找,補(bǔ)全字符串。

 

舉一些ES6對Array數(shù)組類型做的常用升級優(yōu)化?

答:

優(yōu)化部分:

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

擴(kuò)展運(yùn)算符:ES6新增的擴(kuò)展運(yùn)算符(...)(重要),可以輕松的實(shí)現(xiàn)數(shù)組和松散序列的相互轉(zhuǎn)化,可以取代arguments對象和Apply方法,輕松獲取未知參數(shù)個(gè)數(shù)情況下的參數(shù)集合。

(尤其是在ES5中,arguments并不是一個(gè)真正的數(shù)組,而是一個(gè)類數(shù)組的對象,但是擴(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])。

升級部分:

ES6在Array原型上新增了find()方法,用于取代傳統(tǒng)的只能用indexOf查找包含數(shù)組項(xiàng)目的方法,且修復(fù)了indexOf查找不到NaN的bug([NaN].indexOf(NaN) === -1),

此外還新增了copyWithin(), includes(), fill(),flat()等方法,可方便的用于字符串的查找,補(bǔ)全,轉(zhuǎn)換等。

 

據(jù)一些ES6對Number數(shù)字類型做的常用升級優(yōu)化?

答:

優(yōu)化部分:

ES6在Number原型上新增了isFinite(), isNaN()方法,用來取代傳統(tǒng)的全局isFinite(), isNaN()方法檢測數(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()同上)

升級部分:

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

 

舉一些ES6對Object類型做的常用升級優(yōu)化?(重要)

答:

優(yōu)化部分:

1.對象屬性變量式聲明:ES6可以直接以變量形式聲明對象屬性或者方法,比傳統(tǒng)的鍵值對形式聲明更加簡潔,更加方便,語義更加清晰。

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

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

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

可以看到屬性變量式聲明屬性看起來更加簡潔明了。方法也可以采用簡潔寫法:

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

2.對象的解構(gòu)賦值:ES6對象也可以像數(shù)組解構(gòu)賦值那樣,進(jìn)行變量的解構(gòu)賦值:

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

3.對象的擴(kuò)展運(yùn)算符(...):ES6對象的擴(kuò)展運(yùn)算符和數(shù)組擴(kuò)展運(yùn)算符用法本質(zhì)上差別不大,畢竟數(shù)組也就是特殊的對象。

對象的擴(kuò)展運(yùn)算符一個(gè)最常用也最好用的用處就在于可以輕松的取出一個(gè)目標(biāo)對象內(nèi)部全部或者部分的可遍歷屬性,從而進(jìn)行對象的合并和分解。

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

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

 

升級部分:

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

2.ES6在Object原型上新增了assign()方法,用于對象新增屬性或者多個(gè)對象合并。

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合并的對象target只能合并source1、source2中的自身屬性,

并不會(huì)合并source1、source2中的繼承屬性,也不會(huì)合并不可枚舉的屬性,且無法正確復(fù)制get和set屬性(會(huì)直接執(zhí)行g(shù)et/set函數(shù),取return的值)。

3.ES6在Object原型上新增了getOwnPropertyDescriptors()方法,此方法增強(qiáng)了ES5中g(shù)etOwnPropertyDescriptor()方法,可以獲取指定對象所有自身屬性的描述對象。

結(jié)合defineProperties()方法,可以完美復(fù)制對象,包括復(fù)制get和set屬性。

4.ES6在Object原型上新增了getPrototypeOf()和setPrototypeOf()方法,用來獲取或設(shè)置當(dāng)前對象的prototype對象。

這個(gè)方法存在的意義在于,ES5中獲取設(shè)置prototype對象是通過__proto__屬性來實(shí)現(xiàn)的,

然而__proto__屬性并不是ES規(guī)范中的明文規(guī)定的屬性,只是瀏覽器各大廠商“私自”加上去的屬性,只不過因?yàn)檫m用范圍廣而被默認(rèn)使用了,在非瀏覽器環(huán)境中并不一定就可以使用,

所以為了穩(wěn)妥起見,獲取或設(shè)置當(dāng)前對象的prototype對象時(shí),都應(yīng)該采用ES6新增的標(biāo)準(zhǔn)用法。

5.ES6在Object原型上還新增了Object.keys(),Object.values(),Object.entries()方法,用來獲取對象的所有鍵、所有值和所有鍵值對數(shù)組。

舉一些ES6對Function函數(shù)類型做的常用升級優(yōu)化?(重要)

答:

1.箭頭函數(shù)(核心):箭頭函數(shù)是ES6核心的升級項(xiàng)之一,箭頭函數(shù)里沒有自己的this,這改變了以往JS函數(shù)中最讓人難以理解的this運(yùn)行機(jī)制。

主要優(yōu)化點(diǎn):

箭頭函數(shù)內(nèi)的this指向的是函數(shù)定義時(shí)所在的對象,而不是函數(shù)執(zhí)行時(shí)所在的對象。

ES5函數(shù)里的this總是指向函數(shù)執(zhí)行時(shí)所在的對象,這使得在很多情況下this的指向變得很難理解,尤其是非嚴(yán)格模式情況下,this有時(shí)候會(huì)指向全局對象,這甚至也可以歸結(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對象。(可以用擴(kuò)展運(yùn)算符代替)

2.函數(shù)默認(rèn)賦值:ES6之前,函數(shù)的形參是無法給默認(rèn)值的,只能在函數(shù)內(nèi)部通過變通方法實(shí)現(xiàn)。ES6以更簡潔更明確的方式進(jìn)行函數(shù)默認(rèn)賦值。

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

升級部分:

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

foo::bar;
// 等同于
bar.bind(foo);foo::bar(...arguments);// 等同于
bar.apply(foo, arguments);

 

喜歡的老鐵,加個(gè)關(guān)注!今后會(huì)分享更多的前端干貨,歡迎點(diǎn)贊轉(zhuǎn)發(fā)關(guān)注

 

作者丨StevenLikeWatermelon
https://juejin.im/post/5c061ed2f265da61357258ee

分享到:
標(biāo)簽:ES6
用戶無頭像

網(wǎng)友整理

注冊時(shí)間:

網(wǎng)站:5 個(gè)   小程序:0 個(gè)  文章:12 篇

  • 51998

    網(wǎng)站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會(huì)員

趕快注冊賬號,推廣您的網(wǎng)站吧!
最新入駐小程序

數(shù)獨(dú)大挑戰(zhàn)2018-06-03

數(shù)獨(dú)一種數(shù)學(xué)游戲,玩家需要根據(jù)9

答題星2018-06-03

您可以通過答題星輕松地創(chuàng)建試卷

全階人生考試2018-06-03

各種考試題,題庫,初中,高中,大學(xué)四六

運(yùn)動(dòng)步數(shù)有氧達(dá)人2018-06-03

記錄運(yùn)動(dòng)步數(shù),積累氧氣值。還可偷

每日養(yǎng)生app2018-06-03

每日養(yǎng)生,天天健康

體育訓(xùn)練成績評定2018-06-03

通用課目體育訓(xùn)練成績評定