let变量

Posted simon麦田

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了let变量相关的知识,希望对你有一定的参考价值。

let 声明了一个块级域的局部变量,并且可以给它一个初始化值。

语法

let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];

参数

var1, var2, …, varN
变量名。变量名可以定义为任何合法标识符。
value1, value2, …, valueN
变量的初始化值。该值可以为任何合法表达式。

描述

let 允许把变量的作用域限制在块级域中。与 var 不同处是:var 申明变量要么是全局的,要么是函数级的,而无法是块级的。

 

在块级域中用 let

用 let 在一个代码块中定义变量.

if (x > y) 
  let gamma = 12.7 + y;
  i = gamma * x;

在用到内部函数的时候,let 能够让代码更简洁,比如:

var list = document.getElementById("list");

for (var i = 1; i <= 5; i++) 
  var item = document.createElement("LI");
  item.appendChild(document.createTextNode("Item " + i));

  let j = i;
  item.onclick = function (ev) 
    console.log("Item " + j + " is clicked.");
  ;
  list.appendChild(item);

上面这段代码的意图是创建5个li,点击不同的li能够打印出当前li的序号。如果不用let,而改用var的话,将总是打印出 Item 5 is Clicked,因为 j 是函数级变量,5个内部函数都指向了同一个 j ,而 j 最后一次赋值是5。用了let后,j 变成块级域(也就是花括号中的块,每进入一次花括号就生成了一个块级域),所以 5 个内部函数指向了不同的 j 。

作用域规则

用 let 定义的变量的作用域是定义它们的块内,以及包含在这个块中的子块 ,这一点有点象var,只是var 定义的变量的作用域是定义它们的函数内 :

function varTest() 
  var x = 31;
  if (true) 
    var x = 71;  // same variable!
    console.log(x);  // 71
  
  console.log(x);  // 71


function letTest() 
  let x = 31;
  if (true) 
    let x = 71;  // different variable
    console.log(x);  // 71
  
  console.log(x);  // 31

在程序或者函数的顶层,let 的表现就象 var 一样:

var x = 'global';
let y = 'global';
console.log(this.x);
console.log(this.y);

上面这段代码的运行后会显示两次"global"。

注:在 Safari[版本 9.1.1 (9537.86.6.17)]与 chrome[ 版本50.0.2661.102 (64-bit)]中 y 将是 undefined

let 的暂存死区与错误

在同一个函数或同一个作用域中用let重复定义一个变量将引起 TypeError.

if (x) 
  let foo;
  let foo; // TypeError thrown.

在 ECMAScript  2015中,  let 将会提升这个变量到语句块的顶部。然而,在这个语句块中,在变量声明之前引用这个变量会导致一个 ReferenceError的结果, 因为let变量 在"暂存死区" (从块的开始到声明这段).

function do_something() 
  console.log(foo); // ReferenceError
  let foo = 2;

在 switch 声明中你可能会遇到这样的错误,因为一个switch只有一个作用块.

switch (x) 
  case 0:
    let foo;
    break;
    
  case 1:
    let foo; // TypeError for redeclaration.
    break;

循环定义中的let作用域

循环体中是可以引用在for申明时用let定义的变量,尽管let不是出现在大括号之间.

var i=0;
for ( let i=i ; i < 10 ; i++ ) 
  console.log(i);

注:以上 let 申明的 i 将会变成 undefined;chrome 版本50.0.2661.102 (64-bit);推荐以下写法:

var i=0;
for ( let l = i ; l < 10 ; l++ ) 
  console.log(l);

域作用规则

for (let expr1; expr2; expr3) statement

在这个例子中,expr2, expr3, 和 statement 都是包含中在一个隐含域块中,其中也包含了 expr1.

例子

let  对比 var

let的作用域是块,而var的作用域是函数

var a = 5;
var b = 10;

if (a === 5) 
  let a = 4; // The scope is inside the if-block
  var b = 1; // The scope is inside the function

  console.log(a);  // 4
  console.log(b);  // 1
 

console.log(a); // 5
console.log(b); // 1

let 在循环中

可以用 let 来代替 var ,在 for 定义块中使用块级变量.

for (let i = 0; i<10; i++) 
  console.log(i); // 0, 1, 2, 3, 4 ... 9


console.log(i); // i is not defined


更多详细信息:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/let

以上是关于let变量的主要内容,如果未能解决你的问题,请参考以下文章

258 关键字let

ES2015中let的暂时性死区(TDZ)

12.24 ES6浅谈--块级作用域,let

let const 暂时性死区问题

let const 暂时性死区问题

ECMAScript 6 入门学习笔记——let和const