ES6系列——let和const命令

最新推荐文章于 2023-08-07 14:10:00 发布

原创最新推荐文章于 2023-08-07 14:10:00 发布 · 451 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #typescript

本文详细介绍了ES6中的let命令，包括其作用域特性，如块级作用域和不在全局作用域提升，以及在for循环中的应用。通过对比var，阐述了let如何避免变量冲突和作用域混淆。同时，提到了暂时性死区的概念，以及let不允许重复声明的规则。此外，文章还通过实例解释了let如何解决经典的面试题，展示了let在函数和循环中的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

let

一：作用域

基本使用
声明：ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

{
  let a = 10;
  var b = 12;
  console.log(a); // 10
}
console.log(a); // ReferenceError: a is not defined
console.log(b); // 12

for循环中的应用
下面我们来看一道经典面试题：为什么 i 打印的结果为10 ，怎么才能正确打印呢？

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

解析：上述代码中 i 是用var声明的是全局变量，每一次循环 i 都会进行变化。数组 a 里面的函数内部的 i 指向的是全局的 i ，所以 a 数据里面的 i 和for循环里面的都是同一个 i 从而导致运行时输入最后一轮 i 的值 10解决办法可以使用let。

var b = [];
for (let i = 0; i < 10; i++) {
  b[i] = function () {
    console.log(i);
  }
}
b[5]() // 5

解析：i 是使用let声明的，只在本次循环中有效，每次循环的 i都是一个新的变量，所以最后输入的是5

二：不能重复声明

let不允许在相同作用域内，重复声明同一个变量。

{
  var a = 10;
  let a = 8; // 报错
}

{
  let a = 10;
  let a = 20; // 报错
}

function func(fn) {
  let fn // 标识符“fn”已被声明
}

function func(fn) {
  {
    let fn // 没有报错
  }
}

四：不存在变量提升

var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。而在ES6中 let改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。

console.log(a); // undefined
var a = 10;

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 3;

ES6系列——let和const命令

let

一：作用域

二：不能重复声明

四：不存在变量提升

函数提升

五：暂时性死区

const