北媽每日一學

《北媽每日一學》

我決定從今天開始，發布新欄目：“北媽每日一學”，每天發布一個或者一系列的技術知識點來給大家，這樣我們每天可以一起總結和學習，也算一個好的開始和堅持。
北媽每日一學用最短的篇幅 ，最好的排版，最簡潔的例子和大家一起學習、總結、入坑。

由于頭條文章比較寶貴，而且寫的太短不行，天天總寫技術又會很枯燥，而且時不時還要發一篇廣告，所以利用次條文章每日 學一個知識點我覺得是最合適不過的聰明之舉，而且我一直有這個想法，今天才決定付諸行動 - 因為拉到靠譜贊助商了。

這個欄目所有技術點，都是底部展示的機構協助提供，和我共同整理，供大家學習，覺得有幫助就支持下。

---

ES6 簡介

ECMAScript 6（以下簡稱ES6）是JavaScript語言的下一代標準。因為當前版本的ES6是在2015年發布的，所以又稱ECMAScript 2015。

也就是說，ES6就是ES2015。

雖然目前并不是所有瀏覽器都能兼容ES6全部特性，但越來越多的程序員在實際項目當中已經開始使用ES6了。所以就算你現在不打算使用ES6，但為了看懂別人寫的代碼你也必須要懂ES6的語法了...

北媽一句白話就是：之前用的，你所熟悉的js語法是es5標準，現在是es6標準，恩就這么多。

ES6 常見語法

let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments
這些是ES6最常用的幾個語法，基本上學會它們，我們就可以走遍天下都不怕啦！我會用最通俗易懂的語言和例子來講解它們，保證一看就懂，一學就會。

但是ES6那么多那么多特性，我們需要全部都掌握嗎？秉著二八原則，掌握好常用的，有用的這個可以讓我們快速掌握。今天跟北媽先來學最基礎的 也是最有特點的 ?let, const

1.變量聲明 const 和 let

我們都是知道在ES6以前，var關鍵字聲明變量。無論聲明在何處，都會被視為聲明在函數的最頂部(不在函數內即在全局作用域的最頂部)。這就是函數變量提升例如:

?function aa() { ? ?
?if(bool) { ? ? ?
?? ? ?var test = 'hello man'} else { ? ? ?
??? ? ?console.log(test)}}

以上的代碼實際上是：

?function aa() { ? ?var test // 變量提升if(bool) {test = 'hello man'} else { ? ? ? ?
?
?//此處訪問test 值為undefinedconsole.log(test)} ? ?//此處訪問test 值為undefined}

所以不用關心bool是否為true or false。實際上，無論如何test都會被創建聲明。

接下來ES6主角登場：
我們通常用let和const來聲明，let表示變量、const表示常量。let和const都是塊級作用域。怎么理解這個塊級作用域？

• 在一個函數內部

• 在一個代碼塊內部

說白了?{}大括號內的代碼塊即為let 和 const的作用域。

看以下代碼：

?function aa() { ? ?
? ? ?if(bool) { ? ? ?
? ? ? let test = 'hello man'} else { ? ? ? ?//test 在此處訪問不到console.log(test)}}

let的作用域是在它所在當前代碼塊，但不會被提升到當前函數的最頂部。

再來說說const。

? ?const name = 'lux'name = 'joe' //再次賦值此時會報錯

說一道面試題

? ?var funcs = [] ? ?
? ?for (var i = 0; i < 10; i++) {funcs.push(function() { console.log(i) })}funcs.forEach(function(func) {func()})

這樣的面試題是大家常見，很多同學一看就知道輸出 10 十次
但是如果我們想依次輸出0到9呢？兩種解決方法。直接上代碼。

? ?// ES5告訴我們可以利用閉包解決這個問題var funcs = [] ? ?
? ?for (var i = 0; i < 10; i++) {func.push((function(value) { ? ? ? ? ? ?
? ? ? ? ? ?return function() { ? ? ? ? ? ? ?
? ? ? ? ? ?
? ? ? ? ? ? ?console.log(value)}}(i)))} ? ?
? ?// es6for (let i = 0; i < 10; i++) {func.push(function() { ? ? ? ? ?
? ??console.log(i)})}

達到相同的效果，es6簡潔的解決方案是不是更讓你心動！！！

好今天先到這里，北媽每日一學用最短的篇幅 ，最好的排版，最簡潔的例子和大家一起學習、總結、入坑。

---

《感謝贊助者 - 必看》

以上所有技術點，都是以下機構協助提供，和我共同整理，供大家學習

他們有更多的資料和素材和時間整理這些，可以說比我還要專業，有需要資料的就識別二維碼咨詢他。

掃描或識別二維碼，備注?我想要資料

希望大家共同支持 和成長。

總結

以上是生活随笔為你收集整理的北妈每日一学：ES6语法入门 之开门见山的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。