JavaScript--ES6講解

第1節let

// ES6 — let

let a = 1;

if (1 === a) {
let b = 2;
}

for (let c = 0; c < 3; c++) {
// …
}

function letsDeclareAnotherOne() {
let d = 4;
}

console.log(a); // 1
console.log(b); // ReferenceError: b is not defined
console.log (c); // ReferenceError: c is not defined
console.log(d); // ReferenceError: d is not defined

// window
console.log(window.a) ; // 1
console.log(window.b); // undefined
console.log(window.c); // undefined
console.log(window.d); // undefined
As we can see, this time only variable a is declared as a global. let gives us a way to declare block scoped variables, which is undefined outside it.

##//todo

//todo

let和const這兩個的用途與var類似，都是用來宣告變數的，但在實際運用上他倆都有各自的特殊用途。

demo1

var name = 'shitu91'

if(true) {

var name = 'shituketang'
console.log(name) //shituketang
}

console.log(name) //shituketang

使用var 兩次輸出都是shituketang，你現在看到的內層變數覆蓋外層變數, 這是因為ES5只有全域作用域(scope)和函數作用域，沒有區塊級作用域。

而let實際上為JavaScript新增了區塊級作用域。用它所宣告的變量，只在let指令所在的程式碼區塊內有效。

let name = 'shitu91'

if (true) {
let name = 'shituketang'
console.log(name) //shituketang
#}

console.log(name) //shitu91

demo2 計數的循環變數洩漏為全域變數
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a6; // 10
在上面程式碼中，變數i是var聲明的，在全域範圍內都有效。所以每一次循環，新的i值都會覆蓋舊值，導致最後輸出的是最後一輪的i的值。
而使用let則不會出現這個問題。

var a = [];

for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i );
};
}
a6; // 6
demo3
var clickBoxs = document.querySelectorAll('.clickBox')
for (var i = 0; i < ; clickBoxs.length; i++){
clickBoxs[i].onclick = function(){
console.log(i)
}

#我們本來希望的是點擊不同的clickBox，顯示不同的i，但事實是無論我們點擊哪個clickBox，輸出的都是5。下面我們來看下，如何用閉包搞定它。

function iteratorFactory(i){
var onclick = function(e){
console.log(i)
}
return onclick;
}
var clickBoxs = document .querySelectorAll('.clickBox')
for (var i = 0; i < clickBoxs.length; i++){
clickBoxs[i].onclick = iteratorFactory(i)
}
const也用來聲明變量，但是聲明的是常數。一旦聲明，常量的值就不能改變。
const PI = Math.PI

PI = 23 //Module build failed: SyntaxError: /es6/app.js: "PI" is read-only

當我們試著去改變用const聲明的常數時，瀏覽器就會報錯。 const有一個很好的應用場景，就是當我們引用第三方函式庫的時宣告的變量，用const來宣告可以避免未來不小心重命名而導致出現bug：+

const monent = require( 'moment')

// todo

let 關鍵字宣告的變數不具備變數提升（hoisting）特性

let 和const 宣告只在最靠近的一個區塊中（花括號內）有效
當使用常數const 宣告時，請使用大寫變量，如：CAPITAL_CASING
const 在宣告時必須被賦值
Let:

New keywords added by ES6 that allow us to change the way we work with variables. JavaScript:

var name = 'Max';

console.log(name;

let new_name = 'Max';

console.log (new_name);
Console:

"Max"

"Max"
Here we see that both let and var do the same thing So what is the difference?

Using let allows us to control variable scoping. JavaScript:

if(true) {

let age = 24; // in the scope of the 'if' statment
}
console .log(age); // not in scope of the 'if' statement
Console:

"error"

"Reference Error: age is not defined
As another example, when using variables in a for loop, the index won't be used outside of the loop anymore!

以上是JavaScript--ES6講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！