首頁 > web前端 > js教程 > JavaScript--ES6講解

JavaScript--ES6講解

巴扎黑
發布: 2017-07-22 15:24:08
原創
1191 人瀏覽過

第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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板