let
åºçº¿
广æ³å¯ç¨
èª 2016å¹´9æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
let 声æç¨äºå£°æå¯éæ°èµå¼çå级ä½ç¨åå±é¨åéï¼å¹¶ä¸å¯ä»¥éæ©å°å
¶åå§å为ä¸ä¸ªå¼ã
å°è¯ä¸ä¸
let x = 1;
if (x === 1) {
let x = 2;
console.log(x);
// Expected output: 2
}
console.log(x);
// Expected output: 1
è¯æ³
let name1;
let name1 = value1;
let name1 = value1, name2 = value2;
let name1, name2 = value2;
let name1 = value1, name2, /* â¦, */ nameN = valueN;
åæ°
nameN-
è¦å£°æçåéçåç§°ãå¿ é¡»æ¯åæ³ç JavaScript æ è¯ç¬¦æè§£æç»å®æ¨¡å¼ã
valueNå¯é-
åéçåå§å¼ãå¯ä»¥æ¯ä»»æåæ³ç表达å¼ãé»è®¤å¼ä¸º
undefinedã
æè¿°
ç¨ let 声æçåéçä½ç¨åæ¯æé è¿å¹¶å
å« let 声æç以ä¸è±æ¬å·éåè¯æ³ç»æçä¸ä¸ªï¼
- åè¯å¥
switchè¯å¥try...catchè¯å¥letä½äºå ¶å¼å¤´çforè¯å¥ä¹ä¸ç主ä½- 彿°ä¸»ä½
- ç±»éæåå§åå
妿䏿¯ä»¥ä¸è¿äºæ åµåæ¯ï¼
- å½ä»£ç ä»¥æ¨¡åæ¨¡å¼è¿è¡æ¶ï¼ä½ç¨åæ¯å½å模åã
- å½ä»£ç ä»¥èæ¬æ¨¡å¼è¿è¡æ¶ï¼ä½ç¨åæ¯å ¨å±ä½ç¨åã
ç¸è¾äº varï¼let 声ææä»¥ä¸ä¸åç¹ï¼
-
let声æçä½ç¨åæ¯åæå½æ°ã -
let声æçåéåªè½å¨æ§è¡å°å£°ææå¨çä½ç½®ä¹åæè½è¢«è®¿é®ï¼åè§ææ¶æ§æ»åºï¼ãå æ¤ï¼let声æé常被è§ä¸ºæ¯éæåçã -
let声æå¨èæ¬ç顶级ä½ç¨åä¸å£°æåéæ¶ä¸ä¼å¨å ¨å±å¯¹è±¡ä¸åå»ºå±æ§ã -
let声æçåéä¸è½è¢«åä¸ä¸ªä½ç¨åä¸çä»»ä½å ¶ä»å£°æéå¤å£°æã -
letæ¯å£°æï¼è䏿¯è¯å¥çå¼å¤´ãè¿æå³çï¼ä½ ä¸è½å°åç¬çlet声æå½ååç主ä½ä½¿ç¨ï¼å ä¸ºè¿æ ·åä¼è®©åéæ æ³è¢«è®¿é®ï¼ãjsif (true) let a = 1; // SyntaxError: Lexical declaration cannot appear in a single-statement context
注æï¼å¨éä¸¥æ ¼æ¨¡å¼ä¸å
è®¸å° let ä½ä¸º var æè
function çæ è¯ç¬¦åç§°ï¼ä½ä½ åºå½é¿å
å° let ç¨ä½æ è¯ç¬¦ä»¥é²æ¢åçæå¤çè¯æ³æ··æ·ã
许å¤é£æ ¼æåï¼å
æ¬ MDN çï¼æ¨èåªè¦åéæ²¡æå¨å
¶ä½ç¨åä¸è¢«éæ°èµå¼ï¼å°±åºè¯¥ä½¿ç¨ const è䏿¯ letãè¿æ ·è½æ´æ¸
æ¥å°è¡¨æåéçç±»åï¼æå¼ï¼å¦æå
¶ä¸ºåå§å¼ï¼æ°¸è¿ä¸ä¼æ¹åãæ¤å¤ä¹æ¨èç¨ let åæ¾å¯åçéåå§å¼ã
let å
³é®ååæ¹çå表å«åç»å®å表ï¼ä½¿ç¨éå·åéï¼å
¶ä¸çéå·ä¸æ¯éå·è¿ç®ç¬¦ï¼å¹¶ä¸ = 符å·ä¹ä¸æ¯èµå¼è¿ç®ç¬¦ãååå§åçåéè½å¤å¼ç¨å表ä¸ä¹ååå§åçåéã
ææ¶æ§æ»åº
ç¨ letãconst æ class 声æçåéå¯ä»¥ç§°å
¶ä»ä»£ç åçå¼å§ä¸ç´å°ä»£ç æ§è¡å°åé声æçä½ç½®å¹¶è¢«åå§ååï¼é½å¤äºä¸ä¸ªâææ¶æ§æ»åºâï¼Temporal dead zoneï¼TDZï¼ä¸ã
å½åéå¤äºææ¶æ§æ»åºä¹ä¸æ¶ï¼å
¶å°æªè¢«åå§åï¼å¹¶ä¸ä»»ä½è®¿é®å
¶çå°è¯é½å°å¯¼è´æåº ReferenceErrorãå½ä»£ç æ§è¡å°åé被声æçä½ç½®æ¶ï¼åéä¼è¢«åå§å为ä¸ä¸ªå¼ã妿åé声æä¸æªæå®åå§å¼ï¼ååéå°è¢«åå§å为 undefinedã
è¿ä¸ var 声æçåéä¸åï¼å¦æå¨å£°æä½ç½®åè®¿é® var 声æçåéä¼è¿å undefinedã以ä¸ä»£ç æ¼ç¤ºäºå¨å£°æä½ç½®åè®¿é® let å var 声æçåéçä¸åç»æã
{
// ææ¶æ§æ»åºå§äºä½ç¨åå¼å¤´
console.log(bar); // "undefined"
console.log(foo); // ReferenceError: Cannot access 'foo' before initialization
var bar = 1;
let foo = 2; // ææ¶æ§æ»åºç»æï¼å¯¹ foo èè¨ï¼
}
使ç¨âææ¶æ§âä¸è¯æ¯å 为è¿ä¸ªåºååå³äºä»£ç æ§è¡çæ¶é´ç¹ï¼è䏿¯ä»£ç ç¼åç顺åºãä¾å¦ï¼ä¸é¢ç代ç è½å¤è¿è¡ï¼æ¯å 为è½ç¶ä½¿ç¨ let åéç彿°åå¨åé声æä¹åï¼ä½å½æ°æ¯å¨ææ¶æ§æ»åºå¤é¢è¢«è°ç¨çã
{
// ææ¶æ§æ»åºå§äºä½ç¨åå¼å¤´
const func = () => console.log(letVar); // 没é®é¢
// å¨ææ¶æ§æ»åºå
è®¿é® letVar ä¼æåº `ReferenceError`
let letVar = 3; // ææ¶æ§æ»åºç»æï¼å¯¹ letVar èè¨ï¼
func(); // å¨ææ¶æ§æ»åºå¤è°ç¨
}
å¨ææ¶æ§æ»åºå
对 let 声æçåéä½¿ç¨ typeof è¿ç®ç¬¦ä¹ä¼æåº ReferenceErrorï¼
typeof i; // ReferenceError: Cannot access 'i' before initialization
let i = 10;
è¿ä¸å¯¹æªå£°æçåéååæ¾ undefined å¼çåéä½¿ç¨ typeof è¿ç®ç¬¦ä¸åï¼
console.log(typeof undeclaredVariable); // "undefined"
夿³¨ï¼let å const 声æä»
å¨å½åèæ¬è¢«å¤çæ¶æä¼è¢«å¤çã妿å¨ä¸ä¸ª HTML ä¸æä¸¤ä¸ªä»¥èæ¬æ¨¡å¼è¿è¡ç <script> å
ç´ ï¼é£ä¹ç¬¬ä¸ä¸ªèæ¬ä¸ä¼åå°ç¬¬äºä¸ªèæ¬ä¸é¡¶å± let æ const åéçææ¶æ§æ»åºéå¶ï¼å°½ç®¡å¦æä½ å¨ç¬¬ä¸ä¸ªèæ¬ä¸å£°æäºä¸ä¸ª let æ const åéï¼å¨ç¬¬äºä¸ªèæ¬ä¸å次声æå®å°ä¼å¯¼è´éå¤å£°æé误ã
éå¤å£°æ
let 声æçåéä¸è½è¢«åä¸ä¸ªä½ç¨åä¸çä»»ä½å
¶ä»å£°æéå¤å£°æï¼å
æ¬ letãconstãclassãfunctionãvar å import 声æã
{
let foo;
let foo; // SyntaxError: Identifier 'foo' has already been declared
}
å¨å½æ°ä¸»ä½ä¸ç¨ let 声æçåéä¸è½ä¸åæ°ååï¼å¨ catch åä¸ç¨ let 声æçåéä¸è½ä¸è¢« catch ç»å®çæ è¯ç¬¦ååã
function foo(a) {
let a = 1; // SyntaxError: Identifier 'a' has already been declared
}
try {
} catch (e) {
let e; // SyntaxError: Identifier 'e' has already been declared
}
å¦æä½ å¨äº¤äºå¼è§£éå¨ä¸å®éªï¼æ¯å¦ Firefox web æ§å¶å°ï¼æ´å¤å·¥å
· > Web å¼åè
å·¥å
· > æ§å¶å°ï¼ï¼å½ä½ åå¼ä¸¤æ¬¡è¾å
¥å¹¶è¿è¡å«æåä¸ä¸ªåç§°ç let å£°ææ¶ï¼ä½ ä¼å¾å°åä¸çéå¤å£°æé误ãæå
³æ´è¿ä¸æ¥ç讨论åè§è¿ä¸ªè®®é¢ï¼Firefox bug 1580891ãChrome çæ§å¶å°åå
许å¨ä¸å次çè¾å
¥ä¸éå¤å£°æ let åéã
ä½ æè®¸ä¼å¨ switch è¯å¥ä¸éå°é误ï¼å 为è¯å¥åªæä¸ä¸ªä»£ç åã
let x = 1;
switch (x) {
case 0:
let foo;
break;
case 1:
let foo; // SyntaxError: Identifier 'foo' has already been declared
break;
}
è¦é¿å
è¿ä¸ªé误ï¼ç¨æ°çåè¯å¥å°æ¯ä¸ª case å°éã
let x = 1;
switch (x) {
case 0: {
let foo;
break;
}
case 1: {
let foo;
break;
}
}
示ä¾
>ä½ç¨åè§å
let 声æçåéçä½ç¨ååªå¨å
¶å£°æçåæååå
é¨ï¼å¨è¿ä¸ç¹ä¸ï¼å®ä¸ var é常ç¸ä¼¼ãäºè
ä¹é´ä¸»è¦çåºå«å¨äº var 声æçåéçä½ç¨åæ¯æ´ä¸ªéåç彿°ã
function varTest() {
var x = 1;
{
var x = 2; // åä¸ä¸ªåéï¼
console.log(x); // 2
}
console.log(x); // 2
}
function letTest() {
let x = 1;
{
let x = 2; // ä¸åçåé
console.log(x); // 2
}
console.log(x); // 1
}
å¨ç¨åºç顶级ä½ç¨åå彿°ä½ç¨åä¸ï¼let åå var ä¸ä¸æ ·ï¼å®ä¸ä¼å¨å
¨å±å¯¹è±¡ä¸åå»ºå±æ§ãä¾å¦ï¼
var x = "global";
let y = "global";
console.log(this.x); // "global"
console.log(this.y); // undefined
ææ¶æ§æ»åºåè¯æ³ä½ç¨å
以ä¸ä»£ç ä¼å¯¼è´ ReferenceErrorï¼
function test() {
var foo = 33;
if (foo) {
let foo = foo + 55; // ReferenceError
}
}
test();
ç±äºå¤é¨åé var foo æå¼ï¼å æ¤ä¼æ§è¡ if è¯å¥åï¼ä½æ¯ç±äºè¯æ³ä½ç¨åï¼è¯¥å¼å¨åå
ä¸å¯ç¨ï¼if åå
çæ è¯ç¬¦ foo æ¯ let fooãè¡¨è¾¾å¼ foo + 55 ä¼æåº ReferenceError å¼å¸¸ï¼å 为 let foo è¿æ²¡å®æåå§åââå®ä»å¤äºææ¶æ§æ»åºå
ã
å¨ä¸é¢çæ
åµä¸ï¼è¿ç§ç°è±¡å¯è½ä¼ä½¿ä½ æå°å°æãæä»¤ let n of n.a å·²ç»å¤äº for...of 循ç¯åçä½ç¨åå
ï¼å æ¤ï¼æ è¯ç¬¦ n.a 被解æä¸ºä½äºæä»¤ï¼let nï¼æ¬èº«ç n 对象ç屿§ aãå 为 n ç声æå°æªæ§è¡ç»æï¼å®ä»ç¶å¤äºææ¶æ§æ»åºå
ã
function go(n) {
// n 卿¤å¤è¢«å®ä¹ï¼
console.log(n); // { a: [1, 2, 3] }
for (let n of n.a) {
// ^ ReferenceError
console.log(n);
}
}
go({ a: [1, 2, 3] });
å ¶ä»æ åµ
å½ let 被ç¨å¨å䏿¶ï¼let å°åéçä½ç¨åéå¶å¨åå
ãè¿ä¸åäº varï¼var çä½ç¨å为å
¶è¢«å£°æç彿°å
ã
var a = 1;
var b = 2;
{
var a = 11; // ä½ç¨å为å
¨å±
let b = 22; // ä½ç¨å为åå
console.log(a); // 11
console.log(b); // 22
}
console.log(a); // 11
console.log(b); // 2
ç¶èï¼ä¸é¢ç var ä¸ let è¿æºçå£°ææ¹å¼ä¼æåº SyntaxErrorï¼å 为 var å¹¶ä¸éå¶å¨åä½ç¨åå
ï¼å¯¼è´å®ä»¬å¤äºåä¸ä½ç¨åãè¿ä¼å¯¼è´éå¼å°éå¤å£°æåéã
let x = 1;
{
var x = 2; // éå¤å£°æçè¯æ³é误
}
带æè§£æç声æ
æ¯ä¸ª = ç左侧é½å¯ä»¥æ¯ä¸ä¸ªç»å®æ¨¡æ¿ï¼è¿ä½¿å¾è½å¤ä¸æ¬¡æ§å建å¤ä¸ªåéã
const result = /(a+)(b+)(c+)/.exec("aaabcc");
let [, a, b, c] = result;
console.log(a, b, c); // "aaa" "b" "cc"
æ´å¤ä¿¡æ¯ï¼åè§è§£æã
è§è
| è§è |
|---|
| ECMAScript® 2027 Language Specification> # sec-let-and-const-declarations> |
æµè§å¨å ¼å®¹æ§
åè§
varconst- åéæå
- æ·±å
¥ ES6ï¼
letåconstââhacks.mozilla.orgï¼2015ï¼ - Firefox 44 ä¸
letåconstçç ´åæ§åæ´ââblog.mozilla.orgï¼2015ï¼ - ä½ ä¸æ JSï¼ä½ç¨ååéå 第ä¸ç« ï¼å½æ°å¯¹å³åä½ç¨åââKyle Simpson
- ä»ä¹æ¯ææ¶æ§æ»åºï¼ââStack Overflow
letåvarå¨ç¨æ³ä¸æä»ä¹ä¸åï¼ââStack Overflow- 为ä»ä¹âletâ被éä¸ºäº JavaScript åä½ç¨ååé声æçååï¼ââStack Overflow