js基礎之var與let

參考阮一峯老師的教程：http://es6.ruanyifeng.com/#docs/let。

一、先附圖，此部分爲阮老師教程內容。

下圖是因爲i只有一個，簡化理解：最後調用a[i]的時候爲輸出的consol.log(i)中的指向同一個內存，均爲10.

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

而如果使用let，聲明的變量僅在塊級作用域內有效，最後輸出的是6。簡化理解：a[i]和console.log(i)一一對應，這裏的每個i都不一樣。

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

上面代碼中，變量i是let聲明的，當前的i只在輪循環有效，所以每一次循環的其實都是一個新的變量，所以最後輸出的是6。你可能會問，如果每一輪循環的變量i都是重新聲明的，那它怎麼知道上一輪循環的值，從而計算出本輪循環的值？這是因爲 JavaScript 引擎內部會記住上一輪循環的值，初始化本輪的變量i時，就在上一輪循環的基礎上進行計算。

二、函數部分

上代碼：

var a = 1;
function func(a){
	a = 2;
	return a;
}
func(a);
console.log(a); //a爲1；

在給一個做對比:

var a = 1;
function func(a){
	console.log(a);  //a爲1
	a = 2;
	return a;
}
var c=func(a);
console.log(a);  //a爲1
console.log(c);  //c爲2

上面兩個代碼對比可發現函數內的a和函數外的a是兩個a，作用域不同。
再上一個代碼：

function func(a){
	a.a = 2;
}
func(a);
console.log(a); //輸出爲{a:2}

接着上對比代碼：

var a = {a:1};
function func(a){
	console.log(a);   //輸出{a:1}
	a.a = 2;
	console.log(a);   //輸出{a:2}
}
func(a);
console.log(a);     //輸出{a:2}

三、for中的var與let補充

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);  //共輸出三次‘abc’
}
for (var i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);  //共輸出三次‘abc’
}
for (let i = 0; i < 3; i++) {
  var i = 'abc';
  console.log(i);  //Uncaught SyntaxError: Identifier 'i' has already been declared
}
for (var i = 0; i < 3; i++) {   //這裏只有i=0被執行了
  var i = 'abc';
  console.log(i);  //共輸出一次‘abc’
}

以上所有代碼都在chrome中調試，如有問題歡迎留言！