本文详细介绍ES6引入的let和const两个关键字。let用于声明块级作用域变量，解决了var存在的变量提升和重复定义问题；const用于声明常量，要求初始化且保证引用地址不变。文章通过对比示例解析了两者在作用域、变量提升及数据类型处理上的核心差异。
ES6标准引入了两个关键的JavaScript声明关键字：let和const。
一、let关键字
使用let声明的变量，其有效范围仅限于该let语句所在的代码块内部。
1、基本语法
let a='123'2、let与var的区别
虽然var同样用于声明变量，但let与var存在显著差异，主要体现在以下三个方面：
2.1、同一作用域内let禁止重复定义同名变量，而var允许
参考以下代码示例：
// 同一个作用域内let不能重复定义同一个名称
let a='123';let a='456'; // 错误
// var可以重复定义
var a=10;
var a=20;2.2、作用域范围不同
let具有块级作用域特性，变量仅在当前代码块内生效。
var则具有全局作用域特性（在非函数环境中）。
具体示例如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ES6</title>
<meta charset="utf-8" />
<script>
window.onload=function(){
// 同一个作用域内let不能重复定义同一个名称
// let a='123';let a='456'; // 错误
// var可以重复定义
var a=10;
var a=20;
// 有着严格的作用域，变量隶属于当前作用域
// let块级作用域{}，var函数作用域
function testVar(){
if(true){
var str='123';
};
console.log(str);
}
// 调用函数
testVar(); // 输出123
// 定义函数
function testLet(){
if(true){
let str1='456';
}
console.log(str1);
};
// 调用函数
testLet(); // 报错
}
</script>
</head>
</html>运行效果：
尝试打印str1时会抛出错误，原因是访问超出了str1的作用域范围。
2.3、不存在变量提升机制
var声明的变量存在变量提升现象，即在声明前即可访问该变量，此时值为undefined；而let不存在变量提升，必须严格遵循先声明后使用的原则。示例如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ES6</title>
<meta charset="utf-8" />
<script>
window.onload=function(){
// 1、同一个作用域内let不能重复定义同一个名称
// let a='123';let a='456'; // 错误
// var可以重复定义
// var a=10;
// var a=20;
// 2、有着严格的作用域，变量隶属于当前作用域
// let块级作用域{}，var函数作用域
function testVar(){
if(true){
var str='123';
};
//console.log(str);
}
// 调用函数
testVar(); // 输出123
// 定义函数
function testLet(){
if(true){
let str1='456';
}
console.log(str1);
};
// 调用函数
//testLet(); // 报错
//3、不存在变量提升
// var命令会发生‘变量提升'（可以在声明前使用，值为undefined）
// let不存在变量提升
console.log(a); // undefined
var a=12;
console.log(b); // 报错:b is not defined
let b='123';
}
</script>
</head>
</html>运行效果：
二、const关键字
const与let的共同点在于两者均具备块级作用域。
主要区别在于：const用于声明只读常量，一旦声明便不可重新赋值，因此声明时必须进行初始化操作。示例如下：
const pi='3.1415926';
pi='3.1415927'控制台输出结果：
必须注意声明时需同时初始化，参考示例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ES6</title>
<meta charset="utf-8" />
<script>
window.onload=function(){
// 1、同一个作用域内let不能重复定义同一个名称
// let a='123';let a='456'; // 错误
// var可以重复定义
// var a=10;
// var a=20;
// 2、有着严格的作用域，变量隶属于当前作用域
// let块级作用域{}，var函数作用域
function testVar(){
if(true){
var str='123';
};
//console.log(str);
}
// 调用函数
testVar(); // 输出123
// 定义函数
function testLet(){
if(true){
let str1='456';
}
console.log(str1);
};
// 调用函数
//testLet(); // 报错
//3、不存在变量提升
// var命令会发生‘变量提升'（可以在声明前使用，值为undefined）
// let不存在变量提升
// console.log(a); // undefined
// var a=12;
// console.log(b); // 报错:b is not defined
// let b='123';
// const 只读常量
// 相同：与let都是块级作用域
// const pi='3.1415926';
// pi='3.1415927' // 不允许修改
const b; // 错误：声明的时候必须初始化
}
</script>
</head>
</html>控制台输出结果：
注意事项：
const如何确保声明后的值不可更改？实际上，const保证的是变量指向的内存地址中的数据不可修改。这涉及到简单类型与复合类型的存储差异：对于数值、字符串、布尔值等简单类型，值直接存储在变量指向的内存地址中，因此const声明的简单类型变量等同于常量；而对于对象、数组、函数等复杂类型，变量指向的是内存地址中的指针，const仅保证指针固定，不限制指针指向的数据结构内容变化，因此使用const声明复杂类型对象时需格外谨慎。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ES6</title>
<meta charset="utf-8" />
<script>
window.onload=function(){
// 1、同一个作用域内let不能重复定义同一个名称
// let a='123';let a='456'; // 错误
// var可以重复定义
// var a=10;
// var a=20;
// 2、有着严格的作用域，变量隶属于当前作用域
// let块级作用域{}，var函数作用域
function testVar(){
if(true){
var str='123';
};
//console.log(str);
}
// 调用函数
testVar(); // 输出123
// 定义函数
function testLet(){
if(true){
let str1='456';
}
console.log(str1);
};
// 调用函数
//testLet(); // 报错
//3、不存在变量提升
// var命令会发生‘变量提升'（可以在声明前使用，值为undefined）
// let不存在变量提升
// console.log(a); // undefined
// var a=12;
// console.log(b); // 报错:b is not defined
// let b='123';
// const 只读常量
// 相同：与let都是块级作用域
// const pi='3.1415926';
// pi='3.1415927' // 不允许修改
// const b; // 错误：声明的时候必须初始化
// 数组
const arr=[];
arr.push('123');
console.log(arr);
// 对象
const obj={};
obj.name='abc';
console.log(obj);
}
</script>
</head>
</html>控制台输出结果：
至此，关于ES6新增关键字let和const的介绍已完成。希望以上内容能对您的学习有所帮助，欢迎继续支持本站。