ES6+ let定义

发布时间：2023-03-23 13:20:28 所属栏目：教程来源：

导读：本节我们一起学习下 ES6 中的 let，在 ES5 中变量的方法只有一个 var ，但是使用 var 来定义的变量存在很多缺陷和弊端，ES6 引入了 let 语句来声明变量，同时引入了很多概念，比如块级作用域、暂存死区等等。限制了任

本节我们一起学习下 ES6 中的 let，在 ES5 中变量的方法只有一个 var ，但是使用 var 来定义的变量存在很多缺陷和弊端，ES6 引入了 let 语句来声明变量，同时引入了很多概念，比如块级作用域、暂存死区等等。限制了任意声明变量，提升了程序的健壮性。

let 的使用方法类似于 var，并可以代替 var 来声明变量。

{
let name = 'imooc';
}
let 允许你声明一个作用域被限制在块级中的变量、语句或者表达式。与 var 关键字不同的是，var 声明的变量只能在全局或者整个函数块中。 var 和 let 的不同之处在于 let 是在编译时才初始化，也就是在同一个块级下不能重复地声明一个变量，否则会报错。

let 不会在全局声明时创建 window 对象的属性，但是 var 会。

{
var name = 'imooc' // imooc
var name = 'iimooc' // iimooc
}
console.log(window.name) // iimooc
{
let age = // 10
let age = // Uncaught SyntaxError: Identifier 'age' has already been declared
}
console.log(window.age) // undefined
上面的代码中，在一个块中分别使用 var 和 let 来声明变量对比他们之间的差异，从上面的代码操作可以看出，我们可以使用 var 多次对 name 声明，但是使用 let 声明的 age，后面再使用 let 对其声明是会报错的。
var 是没有块的概念的，声明的变量会是 window 对象上的属性，在最外层的 window 上可以取到。而 let 存在块的概念，不会添加到 window 对象上，这些是 let 和 var 之间的区别。从这里我们可以了解到为什么使用 let。

在深入了解 let 前，我们需要了解一下，在 JavaScript 中有哪些作用域：

全局作用域
函数作用域 / 局部作用域
块级作用域
上面是 JavaScript 中的三种作用域，那什么是作用域呢？首先要明白的是：几乎所有的编程语言都存在在变量中储值的能力，存储完就需要使用这些值。所以，作用域就是一套规则，按照这套规则可以方便地去存储和访问变量。

函数作用域就是在函数内部定义的变量，也就是局部作用域，在函数的外部是不能使用这个变量的，也就是对外是封闭的，从外层是无法直接访问函数内部的作用域的。

function bar() {
var name = 'imooc';
}
console.log(name); // undefined
在函数内部定义的 name 变量，在函数外部是访问不了的。要想在函数外部访问函数内部的变量可以通过 return 的方式返回出来。

function bar(value) {
var name = ' imooc';
return value + name;
}
console.log(bar('hello')); // hello imooc
借助 return 执行函数 bar 可以取到函数内部的变量 name 的值进行使用。

块级作用域是 ES6 的概念，它的产生是要有一定的条件的，在大括号（{}）中，使用 let 或 const 声明的变量，才会产生块级作用域。
这里需要注意的是，块级作用域的产生是 let 或 const 带来的，而不是大括号，大括号的作用是限制 let 或 const 的作用域范围。当不在大括号中声明时， let 或 const 的作用域范围是全局。

let name = ;
console.log(window.name) // undefined
上面的代码可以看到，使用 let 方式声明的变量在 window 下是取不到的。

var num = ;
{
var num = ;
console.log(num) // 20
}
console.log(num) // 20
在使用 var 声明的情况下，可以看出，外层的 num 会被 {} 中的 num 覆盖，所以没有块级作用域的概念，下面看下使用 let 方式声明：

let num = ;
{
console.log(num); // Uncaught ReferenceError: Cannot access 'num' before initialization
let num = ;
console.log(num) // 20
}
console.log(num) // 10
这里可以看出 {} 内外是互不干涉和影响的，如果在声明 num 的前面进行打印的话，还会报错，这个时候，num 处于暂存死区，是不能被使用的，下面我们会具体说明。

在低版本浏览器中不支持 ES6 语法，通常需要把 ES6 语法转换成 ES5，使用 babel 把上面的代码转换后得到如下结果：

var num = ;
{
console.log(_num); // num is not defined
var _num = ;
console.log(_num); // 20
}
console.log(num); // 10
从上面的代码中可以看出，虽然在 ES6 语法使用的是相同的变量名字，但是底层 JS 进行编译时会认为他们是不同的变量。也就是说即使大括号中声明的变量和外面的变量是相同的名字，但是在编译过程它们是没有关系的。

块级作用域可以任意嵌套，如下实例：

{{
let x = 'Hello imooc'
{
console.log(x); // Hello imooc
let y = 'Hello World'
}
console.log(y); // 引用错误 ReferenceError: y is not defined.
}};
上方代码每一层都是一个单独的作用域，内层作用域可以读取外层的变量，所以第一个会打印 Hello imooc, 而外层无法读取内层的变量，所以会报错。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!