当前位置：首页 > news >正文

ES6新特性：let关键字详解

news 2025/9/6 20:22:38

文章目录

1 声明提升
2 作用域
3 重复声明

在JavaScript中，let 和 var 都是声明变量的关键字，但在用法和作用域方面有一些区别。

let 是ES6引入的新的声明变量的关键字，它与 var 相比，更加严格，语法更加规范，并且可以避免一些常见的错误。

1 声明提升

let 不存在变量提升

使用var关键字声明的变量会被提升到当前作用域的顶部，而使用let声明的变量不会。所以，使用var声明的变量可以在声明之前使用，但是使用let声明的变量必须在声明之后使用。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ES6新特性：let关键字</title>
</head><body><script>console.log('myVar:', myVar);    //myVar: undefinedvar myVar = '我是var声明的变量';console.log('myVar:', myVar);    //myVar: 我是var声明的变量console.log('myLet:', myLet);    //报错，Cannot access 'myLet' before initializationlet myLet = '我是let声明的变量';console.log('myLet:', myLet);    //myLet: 我是let声明的变量</script>
</body></html>

2 作用域

let声明的变量具有块级作用域

使用var声明的变量有函数作用域或全局作用域，而使用let声明的变量有块级作用域。

块级作用域是指变量只在定义它们的块内部可见。这意味着，使用let声明的变量只能在声明它的块级作用域内使用，而不会影响外部作用域。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ES6新特性：let关键字</title>
</head><body><script>{var myVar = '我是var声明的变量';let myLet = '我是let声明的变量';}console.log('myVar:', myVar);    //myVar: 我是var声明的变量console.log('myLet:', myLet);    //报错：myLet is not defined</script>
</body></html>

3 重复声明

let 不允许重复声明变量

使用var声明的变量可以被重复声明，而使用let声明的变量不能被重复声明。

重复声明是指在同一个作用域内，使用相同的变量名再次声明变量。如果使用var声明同名变量，则会覆盖之前的声明。如果使用let声明同名变量，则会抛出下面的错误。
```
 Identifier 'myLet' has already been declared
```

在这里插入图片描述