今天開始一起來(lái)了解下Es6這個(gè)技術(shù)知識(shí)點(diǎn),這樣我們自己也可以總結(jié)和學(xué)習(xí),也算一個(gè)好的開始和堅(jiān)持。ECMAScript 6(以下簡(jiǎn)稱ES6)是JavaScript語(yǔ)言的下一代標(biāo)準(zhǔn)。因?yàn)楫?dāng)前版本的ES6是在2015年發(fā)布的,所以又稱ECMAScript 2015。也就是說,ES6就是ES2015。
雖然目前并不是所有瀏覽器都能兼容ES6全部特性,但越來(lái)越多的程序員在實(shí)際項(xiàng)目當(dāng)中已經(jīng)開始使用ES6了。所以就算你現(xiàn)在不打算使用ES6,但為了看懂別人寫的代碼你也必須要懂ES6的語(yǔ)法了...之前用的,你所熟悉的js語(yǔ)法是es5標(biāo)準(zhǔn),現(xiàn)在是es6標(biāo)準(zhǔn),恩就這么多。
ES6 常見語(yǔ)法
let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments
這些是ES6最常用的幾個(gè)語(yǔ)法,基本上學(xué)會(huì)它們,我們就可以走遍天下都不怕啦!我會(huì)用最通俗易懂的語(yǔ)言和例子來(lái)講解它們,保證一看就懂,一學(xué)就會(huì)。
但是ES6那么多那么多特性,我們需要全部都掌握嗎?秉著二八原則,掌握好常用的,有用的這個(gè)可以讓我們快速掌握。今天跟蘇州網(wǎng)絡(luò)公司小編來(lái)學(xué)最基礎(chǔ)的 也是最有特點(diǎn)的 let, const
1.變量聲明 const 和 let
我們都是知道在ES6以前,var關(guān)鍵字聲明變量。無(wú)論聲明在何處,都會(huì)被視為聲明在函數(shù)的最頂部(不在函數(shù)內(nèi)即在全局作用域的最頂部)。這就是函數(shù)變量提升例如:
function aa() {
if(bool) {
var test = 'hello man'
} else {
console.log(test)
}
}
以上的代碼實(shí)際上是:
function aa() { var test // 變量提升
if(bool) {
test = 'hello man'
} else {
//此處訪問test 值為undefined
console.log(test)
} //此處訪問test 值為undefined
}
所以不用關(guān)心bool是否為true or false。實(shí)際上,無(wú)論如何test都會(huì)被創(chuàng)建聲明。
接下來(lái)ES6主角登場(chǎng):
我們通常用let和const來(lái)聲明,let表示變量、const表示常量。let和const都是塊級(jí)作用域。怎么理解這個(gè)塊級(jí)作用域?
在一個(gè)函數(shù)內(nèi)部
在一個(gè)代碼塊內(nèi)部
說白了 {}大括號(hào)內(nèi)的代碼塊即為let 和 const的作用域。
看以下代碼:
function aa() {
if(bool) {
let test = 'hello man'
} else { //test 在此處訪問不到
console.log(test)
}
}
let的作用域是在它所在當(dāng)前代碼塊,但不會(huì)被提升到當(dāng)前函數(shù)的最頂部。
再來(lái)說說const。
const name = 'lux'
name = 'joe' //再次賦值此時(shí)會(huì)報(bào)錯(cuò)
說一道面試題
var funcs = []
for (var i = 0; i < 10; i++) {
funcs.push(function() { console.log(i) })
}
funcs.forEach(function(func) {
func()
})
這樣的面試題是大家常見,很多同學(xué)一看就知道輸出 10 十次
但是如果我們想依次輸出0到9呢??jī)煞N解決方法。直接上代碼。
// ES5告訴我們可以利用閉包解決這個(gè)問題
var funcs = []
for (var i = 0; i < 10; i++) {
func.push((function(value) {
return function() {
console.log(value)
}
}(i)))
}
// es6
for (let i = 0; i < 10; i++) {
func.push(function() {
console.log(i)
})
}
達(dá)到相同的效果,es6簡(jiǎn)潔的解決方案是不是更讓你心動(dòng)!??!想要了解的更多可以去莫度上去找哦,你懂的。