?2016-2026 Matools All rights reserved,
粵ICP備17059708號
今天來說說es6的語法，最基礎(chǔ)的也就是var，let，const 的用法與區(qū)別了，我們來看看他們之間的恩怨情仇。
首先來說說var，這個只要是學(xué)過js的都知道，它是用來聲明一個變量的，但是它在開發(fā)中也會遇到一些問題，比較難解決。先來看看下面的代碼：
?
var str="hello world"; ? function testVar(){ var str="hello"; } testVar();
console.log(str);
這段代碼的結(jié)果是 "hello world"，這說明在var
申明的變量，即使是同樣的名字，在不同的塊中，在外層塊中的變量優(yōu)先級更高，也就是說，在外層優(yōu)先使用并且只能使用當(dāng)前塊中的變量；而在他的內(nèi)部塊中的變量，比如說這個函數(shù)里面的str，他其實也是優(yōu)先使用塊內(nèi)的str變量，會屏蔽掉外面的str變量，這是一點。再來看看下面一段代碼
function variableHoisting(){ if(condition){ var test="hello javaScript";
}else{ console.log(test) //
這里可以訪問到test，但是它是undefined，因為初始化為它賦值成了undefined } //這里也可以訪問到test }
可能你會感到奇怪，我的var 申明的變量在if 代碼塊里面，為什么我的else里面也能訪問呢，其實上面這段代碼相當(dāng)于下面這段代碼
?
function variableHoisting(){ var test; if(condition){ test="hello
javaScript"; }else{ console.log(test) //
這里可以訪問到test，但是它是undefined，因為初始化為它賦值成了undefined } //這里也可以訪問到test }
現(xiàn)在知道了吧？這就是所謂的變量提升，我在if里面申明的變量，其實瀏覽器在預(yù)解析的時候就對var
，以及function關(guān)鍵字的變量或者方法進行了處理，處理后的代碼就是上面這段代碼（當(dāng)然，我之前講過一篇函數(shù)聲明與函數(shù)表達式的區(qū)別，你可以看看，你會知道更多。）看到這里，也許你不會感覺var
有什么不好的地方，再往下看看:
```javascript
var funcs = []; for (var i = 0; i < 10; i++) { funcs.push(function() {
console.log(i); }); } funcs.forEach(function(func) { func(); // 輸出數(shù)值
"10" 十次 });
可能你想的是輸出0,1,2,3,4,5,6,7,8,9但是這不是正確答案，這只能輸出10個10，為什么呢？因為循環(huán)完成過后，i已經(jīng)是10了，再次調(diào)用的時候，這個i值在每次迭代過程中共享了。
下面我們就來引入一下let，以及const。let 也是用來申明變量的，但是他申明的變量是塊級作用域，什么意思呢，看下面
function testLet(){ if(condition){ let str="hello let" }else{ //
這里訪問不到str } //這里也訪問不到str }
?
看了上面，你也許就知道了什么是塊級作用域，也就是一個大括號嘛，括號里面就是一塊。用let申明的變量是沒有之前所說的變量提升這一說的，所以在外部塊里面是訪問不到let申明的變量的。這樣，之前說var缺陷的哪一塊代碼經(jīng)過小小的改變就能正常輸出0..9了，你看看
var funcs = []; for (let i = 0; i < 10; i++) { funcs.push(function () {
console.log(i); }); } funcs.forEach(function (func) { func(); // 輸出數(shù)值 0-9 });
?
這就是let，與var的一個小區(qū)別，當(dāng)然如果說你申明變量的時候不指名是用的var，還是let，編譯的時候會將這個變量解析為var申明的變量。
不管是var，還是let，他們是不能重復(fù)申明的，比如像下面這樣
var str="var"; let str="let";
這樣是會報錯的，編譯的時候，不能重復(fù)定義。
然后就是const了，這個其實就是常量的單詞的英文縮寫（constant），沒錯，這是用來申明一個常量的。什么事常量呢，顧名思義，就是一旦賦值就不能再改變了。比如說：
?
const MAX=3.1415926; MAX=3.14;
?
這樣是不行的，會報錯，常量不能改變的。來看看const的循環(huán)，在最基礎(chǔ)的for -i的循環(huán)里面，他是會報錯的，運行一次過后就會報錯，但是在for-in
循環(huán)里面他是不會報錯的，當(dāng)然在for-of循環(huán)里面也不會
?
var funcs = [], object = { a: true, b: true, c: true }; // 不會導(dǎo)致錯誤 for
(const keyin object) { funcs.push(function () { console.log(key); }); }
funcs.forEach(function (func) { func(); // 依次輸出 "a"、 "b"、 "c" });
?
這樣是不會報錯的，來看看究竟是為什么呢？
上面說了，const申明的變量是不能改變的，但是，我們試試申明一個對象呢，然后改變對象里面的屬性的值。
?
const object={ name:"學(xué)習(xí)筆記", age:18 } console.log(object.name) ? object.name
="hello world" console.log(object.name)
?
這段代碼，第一個會打印出來“學(xué)習(xí)筆記”，第二個會打印出來“hello
world”，為什么呢？原因在這，其實，這段代碼改變的不是object這個對象變量，而是這個變量的屬性，知道了這個就不難理解為什么在for-in
，for-of循環(huán)里面，const不會報錯了吧？如果對你有幫助的話，記得點個關(guān)注哦，如果你發(fā)現(xiàn)文中有錯誤，記得幫我指出來。
微信公眾號
熱門工具 換一換