ES6 | const、var、let的使用

原创已于 2025-04-17 02:46:15 修改 · 345 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#es6 #javascript #前端

于 2025-04-17 02:41:09 首次发布

ES6 专栏收录该内容

11 篇文章

订阅专栏

let const var

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

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); 
// 报错ReferenceError
let bar = 2;

暂时性死区

在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

if (true) {
  tmp = 'abc'; // ReferenceError  
  let tmp;
}
// tmp在let声明前使用了

typeof 不再是百分百不会报错

// typeof在声明这个变量前就使用变量
typeof x; // ReferenceError
let x;

// typeof单独使用,在后面这个变量也没有被let声明,不会报错
typeof uuu

let x = x

不允许重复声明

// 全局的
    var x = 1;
    let x = 2;
// 报错


// 函数内部

function get(){
        var b =1;
        let b =6;
}

function get(b){
       let b 
}

块级作用域

为什么要有块级作用域?
ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景

第一种场景，内层变量可能会覆盖外层变量。

var tmp = new Date();
function f() {
console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }}
f(); // undefined

第二种场景，用来计数的循环变量泄露为全局变量

var s = [1,2,3,4,5];
for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}
console.log(i); // 5
// 因为es5没有块级作用域,所以声明在for循环中的i，相当于是在全局声明了
// 此时的i就已经泄露给了全局变量

// 上面的代码实际执行过程相当于下面这样
var i = 0;
for (; i < s.length;) {
  console.log(s[i]);
  i++
}

特点：允许块级作用域的任意嵌套

每一层都是一个单独的作用域。每一層中的数据是不互通的

{
        {
            let a = 123;
        }
        console.log(a) // 报错
}


// 里面可以访问外面
{
        {
            let a = 123;
            {
                console.log(a)
            }
        }
        
    }

对比es5之前的代码块

 let a = '全局';
 {
     let a = '局部'
     console.log(a);// 局部
 }
 console.log(a);// 全局
// 大括号是一个块，里面就是块级作用域

 var aa = '全局';
 (function(){
     var aa = '局部'
     console.log(aa);
        
  })()
  console.log(aa);
// 这是es5的语法，想要像上面那样里外互不影响
// 只能使用这种 函数立即调用 的形式

const特殊的地方

const声明一个只读的常量。一旦声明，常量的值就不能改变

const PI = 3.1415;
PI // 3.1415
PI = 3;

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值

const foo;
// SyntaxError: Missing initializer in const declaration

上面代码表示，对于const来说，只声明不赋值，就会报错。

如果用const声明的是引用数据类型

内存地址不变、里面的东西可以变

const foo = {};
// 为 foo 添加一个属性，可以成功foo.prop = 123;
foo.prop // 123
// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

下面是另一个例子。

const a = [];
a.push('Hello'); // 可执行a.length = 0;    // 可执行
a = ['Dave'];    // 报错
// 上面代码中，常量a是一个数组，这个数组本身是可写的，但是如果将另一个数组赋值给a，就会报错。
// 如果真的想将对象冻结，应该使用Object.freeze方法。
const foo = Object.freeze({});
// 常规模式时，下面一行不起作用；
foo.prop = 123;// {}不报错但是没作用，因为对象被冻结了

// 严格模式时，会报错
'use strict';
const foo = Object.freeze({});
foo.prop = 123; // 报错

上面代码中，常量foo指向一个冻结的对象，所以添加新属性不起作用，严格模式时还会报错。

案例 for循环的计数器，就很合适使用let命令。

for (let i = 0; i < 10; i++) {
  // ...}

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

上面代码中，计数器i只在for循环体内有效，在循环体外引用就会报错。
下面的代码如果使用var，最后输出的是10。

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

上面代码中，变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i。每一次循环，变量i的值都会发生改变，而循环内被赋给数组a的函数内部的console.log(i)，里面的i指向的就是全局的i。也就是说，所有数组a的成员里面的i，指向的都是同一个i，导致运行时输出的是最后一轮的i的值，也就是 10。
如果使用let，声明的变量仅在块级作用域内有效，最后输出的是 6。

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

上面代码中，变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是6。你可能会问，如果每一轮循环的变量i都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。
另外，for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc// abc// abc

上面代码正确运行，输出了 3 次abc。这表明函数内部的变量i与循环变量i不在同一个作用域，有各自单独的作用域。