DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript6 let 新語法優勢介紹
JavaScript6 let 新語法優勢介紹
編輯:關於JavaScript     

最近看國外的前端代碼時,發現ES6的新特性已經相當普及,尤其是 let,應用非常普遍

雖然 let 的用法與 var 相同,但不管是語法語義上,還是性能上,都提升了很多,下面就從這兩方面對比一下

語法>>

for ( var i=0; i<2; i++){
console.log( 'outer i: ' + i);
for ( var i=0; i<2; i++){
console.log( 'inner i: ' +i);
}
}

這是一個常見的嵌套循環,都定義了變量 i 來計數,執行結果如下:

outer i: 0
inner i: 0
inner i: 1

可以看到,外層循環被打斷了,因為 i 的值被內層循環修改了,通常的解決方法是內層循環中使用其他的變量,但有可能一不小心就出錯了

現在把 var 換成 let

for ( let i=0; i<2; i++){
console.log( 'outer i: ' + i);
for ( let i=0; i<2; i++){
console.log( 'inner i: ' +i);
}
}

輸出結果為:

outer i: 0
inner i: 0
inner i: 1outer i: 1
inner i: 0
inner i: 1

很正常,內外層沒有任何影響,因為 let 使變量的作用域只在自己所在塊兒之內

示例2

console.log(a);
var a = 'hi' ;

輸出結果為 undefined,執行 log(a) 是在聲明變量之前,為什麼沒有報錯?因為這兩行代碼實際的效果是:

var a;console.log(a);
a = 'hi';

在解析JS代碼時,會把變量的聲明提示到開始位置,這個方式也比較讓人迷惑

改用 let 後,就沒有這個問題了,會直接報錯

console.log(a); // Uncaught ReferenceError: a is not definedlet 
a = 'hi' ;

性能做一個簡單的測試

var start = + new Date();
for ( var i = 0;i<1000000;i++){
var num = 123;
var str = 'abc' ;
var obj = {key: 'value' };
var arr = [ 'bill' , 'dell' ];
}
var end = + new Date();
console.log(end - start);

在Firefox下的執行結果平均為 53ms

改為 let

'use strict'
var start = + new Date();
for ( var i = 0;i<1000000;i++){
let num = 123;
let str = 'abc' ;
let obj = {key: 'value' };
let arr = [ 'bill' , 'dell' ];
}
var end = + new Date();
console.log(end - start);

結果平均為 5ms ,提速很明顯

以上所述是小編給大家介紹的JavaScript6 let 新語法優勢,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved