返回

ES6 标准入门(二):let 和 const 命令——对日常命令的深入解读

前端

ES6 标准入门(二):let 和 const 命令——对日常命令的深入解读

1. 变量声明

在 ES6 之前,JavaScript 只有 var 一种变量声明方式。var 声明的变量具有函数作用域,这意味着变量在函数内部声明后,只能在该函数内部访问。一旦函数执行结束,变量就会被销毁。

function foo() {
  var x = 10;
  // x 可以访问
}

foo();
// x 不可以访问

ES6 引入了 let 和 const 两种新的变量声明方式。let 声明的变量具有块级作用域,这意味着变量只能在声明它的代码块内部访问。一旦代码块执行结束,变量就会被销毁。

if (true) {
  let x = 10;
  // x 可以访问
}

// x 不可以访问

const 声明的变量具有常量作用域,这意味着变量一旦声明,就不能被重新赋值。const 声明的变量也具有块级作用域。

const x = 10;
// x = 20; // 报错: 无法重新赋值常量

if (true) {
  const x = 20;
  // x 可以访问
}

// x = 30; // 报错: 无法重新赋值常量

2. 变量作用域

let 和 const 声明的变量具有块级作用域,这意味着变量只能在声明它的代码块内部访问。一旦代码块执行结束,变量就会被销毁。这与 var 声明的变量具有函数作用域不同。

function foo() {
  var x = 10;
  if (true) {
    var x = 20; // 重新声明变量 x
    // x 等于 20
  }
  // x 等于 20
}

foo();
// x 等于 20

在上面的示例中,var 声明的变量 x 在 if 语句块中被重新声明,导致函数内部的 x 等于 20。而 let 和 const 声明的变量只能在声明它的代码块内部访问,因此不会出现这种问题。

function foo() {
  let x = 10;
  if (true) {
    let x = 20; // 重新声明变量 x
    // x 等于 20
  }
  // x 等于 10
}

foo();
// x 等于 10

3. 变量赋值

let 和 const 声明的变量可以被赋值,但 const 声明的变量一旦赋值后就不能被重新赋值。

let x = 10;
x = 20; // 重新赋值

const y = 20;
y = 30; // 报错: 无法重新赋值常量

4. 变量类型

let 和 const 声明的变量可以是任何类型,包括数字、字符串、布尔值、数组、对象等。

let x = 10; // 数字
let y = "Hello"; // 字符串
let z = true; // 布尔值
let a = [1, 2, 3]; // 数组
let b = { name: "John", age: 30 }; // 对象

5. 实际应用场景

let 和 const 命令在实际开发中有很多应用场景。例如,可以使用 let 来声明循环变量,这样可以防止变量被循环体外的代码意外修改。

for (let i = 0; i < 10; i++) {
  // i 只在循环体内部有效
}

// i 不可以访问

可以使用 const 来声明常量,这样可以防止变量被意外修改。

const PI = 3.14159265;

PI = 3.14; // 报错: 无法重新赋值常量

总结

ES6 的 let 和 const 命令为 JavaScript 开发人员提供了更加灵活和强大的变量声明方式。let 声明的变量具有块级作用域,const 声明的变量具有常量作用域。let 和 const 声明的变量可以被赋值,但 const 声明的变量一旦赋值后就不能被重新赋值。let 和 const 命令在实际开发中有很多应用场景,例如,可以使用 let 来声明循环变量,可以使用 const 来声明常量。