ES6語法:var、let、const的區別詳解-有解無憂

今天來說說es6的語法，最基礎的也就是var，let，const 的用法與區別了，我們來看看他們之間的恩怨情仇，
首先來說說var，這個只要是學過js的都知道，它是用來宣告一個變數的，但是它在開發中也會遇到一些問題，比較難解決，先來看看下面的代碼：

var str="hello world";
?
function testVar(){
　　var str="hello";
}
testVar();
console.log(str);

這段代碼的結果是 "hello world"，這說明在var 申明的變數，即使是同樣的名字，在不同的塊中，在外層塊中的變數優先級更高，也就是說，在外層優先使用并且只能使用當前塊中的變數；而在他的內部塊中的變數，比如說這個函式里面的str，他其實也是優先使用塊內的str變數，會屏蔽掉外面的str變數，這是一點，再來看看下面一段代碼

function variableHoisting(){
　　if(condition){
　　　　var test="hello javaScript";
　　}else{
　　　　console.log(test)
　　　　//這里可以訪問到test，但是它是undefined，因為初始化為它賦值成了undefined
　　}
　　//這里也可以訪問到test
}

可能你會感到奇怪，我的var 申明的變數在if 代碼塊里面，為什么我的else里面也能訪問呢，其實上面這段代碼相當于下面這段代碼

function variableHoisting(){
　　var test;
　　if(condition){
　　　　test="hello javaScript";
　　}else{
　　　　console.log(test)
　　　　//這里可以訪問到test，但是它是undefined，因為初始化為它賦值成了undefined
　　}
　　　　//這里也可以訪問到test
}

現在知道了吧？這就是所謂的變數提升，我在if里面申明的變數，其實瀏覽器在預決議的時候就對var ，以及function關鍵字的變數或者方法進行了處理，處理后的代碼就是上面這段代碼（當然，我之前講過一篇函式宣告與函式運算式的區別，你可以看看，你會知道更多，）看到這里，也許你不會感覺var 有什么不好的地方，再往下看看:

```javascript

var funcs = [];
for (var i = 0; i < 10; i++) {
　　funcs.push(function() {
　　　　console.log(i); 
　　});
}
funcs.forEach(function(func) {
　　func(); // 輸出數值 "10" 十次
});

可能你想的是輸出0,1,2,3,4,5,6,7,8,9但是這不是正確答案，這只能輸出10個10，為什么呢？因為回圈完成過后，i已經是10了，再次呼叫的時候，這個i值在每次迭代程序中共享了，
下面我們就來引入一下let，以及const，let 也是用來申明變數的，但是他申明的變數是塊級作用域，什么意思呢，看下面

function testLet(){
　　if(condition){
　　　　let str="hello let"
　　}else{
　　　　//這里訪問不到str 
　　}
　　　　//這里也訪問不到str
}

看了上面，你也許就知道了什么是塊級作用域，也就是一個大括號嘛，括號里面就是一塊，用let申明的變數是沒有之前所說的變數提升這一說的，所以在外部塊里面是訪問不到let申明的變數的，這樣，之前說var缺陷的哪一塊代碼經過小小的改變就能正常輸出0..9了，你看看

var funcs = [];
for (let i = 0; i < 10; i++) {
    funcs.push(function () {
        console.log(i);
    });
}
funcs.forEach(function (func) {
    func(); // 輸出數值 0-9
});

這就是let，與var的一個小區別，當然如果說你申明變數的時候不指名是用的var，還是let，編譯的時候會將這個變數決議為var申明的變數，

不管是var，還是let，他們是不能重復申明的，比如像下面這樣

var str="var";
let str="let";

這樣是會報錯的，編譯的時候，不能重復定義，

然后就是const了，這個其實就是常量的單詞的英文縮寫（constant），沒錯，這是用來申明一個常量的，什么事常量呢，顧名思義，就是一旦賦值就不能再改變了，比如說：

const MAX=3.1415926;
MAX=3.14;

這樣是不行的，會報錯，常量不能改變的，來看看const的回圈，在最基礎的for -i的回圈里面，他是會報錯的，運行一次過后就會報錯，但是在for-in 回圈里面他是不會報錯的，當然在for-of回圈里面也不會

var funcs = [],
object = {
　　a: true,
　　b: true,
　　c: true
};
// 不會導致錯誤
for (const key in object) {
　　funcs.push(function () {
　　console.log(key);
　　});
}
funcs.forEach(function (func) {
　　func(); // 依次輸出 "a"、 "b"、 "c"
});

這樣是不會報錯的，來看看究竟是為什么呢？

上面說了，const申明的變數是不能改變的，但是，我們試試申明一個物件呢，然后改變物件里面的屬性的值，

const object={
name:"學習筆記",
age:18
}
console.log(object.name)
?
object.name="hello world"
console.log(object.name)

這段代碼，第一個會列印出來“學習筆記”，第二個會列印出來“hello world”，為什么呢？原因在這，其實，這段代碼改變的不是object這個物件變數，而是這個變數的屬性，知道了這個就不難理解為什么在for-in ，for-of回圈里面，const不會報錯了吧？如果對你有幫助的話，記得點個關注哦，如果你發現文中有錯誤，記得幫我指出來，

微信公眾號

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/143016.html

標籤：JavaScript

上一篇：js控制臺顯示[object Object]問題

下一篇：JS條件陳述句