JavaScript ES6中var、let与const的区别详解
本文详解JavaScript ES6中var、let和const的区别。重点解析块级作用域概念,对比三者在作用范围、变量提升及重复声明上的差异。特别探讨const定义对象时属性可改但指针不可变的特性,帮助开发者避免常见误区。
首先需要明确一个基本概念:ECMAScript与JavaScript之间究竟存在何种关联?
ECMAScript是一项国际标准的脚本语言规范。而JavaScript则是基于该规范,并结合DOM(文档对象模型)与BOM(浏览器对象模型)共同构成的完整实现。简而言之,ECMAScript规定了语言的语法与核心逻辑,而JavaScript则是这一规范在浏览器环境中的具体落地与功能扩展。
时间回溯至2011年,ECMAScript 5.1版本正式发布。在此之前的很长一段时间里,开发者主要使用的都是基于ES5标准的代码环境。
到了2015年6月,ECMAScript 6(即ES6)正式成为国际标准,标志着JavaScript语言进入了现代化发展的新阶段。
1. 块级作用域的概念
在ES5标准中,作用域主要分为全局作用域和函数作用域两类,并不存在“块级作用域”这一概念。
ES6引入了块级作用域(Block Scope)。所谓块作用域,是指由花括号{}所包裹的代码区域。这不仅包括普通的代码块,还涵盖了if条件语句和for循环语句内部的花括号{},这些区域均被视为独立的块作用域。
<script type="text/javascript">
{
var a = 1;
console.log(a); // 1
}
console.log(a); // 1
// 通过var定义的变量可以跨块作用域访问到。
(function A() {
var b = 2;
console.log(b); // 2
})();
// console.log(b); // 报错,
// 可见,通过var定义的变量不能跨函数作用域访问到
if(true) {
var c = 3;
}
console.log(c); // 3
for(var i = 0; i < 4; i ++) {
var d = 5;
};
console.log(i); // 4 (循环结束i已经是4,所以此处i为4)
console.log(d); // 5
// if语句和for语句中用var定义的变量可以在外面访问到,
// 可见,if语句和for语句属于块作用域,不属于函数作用域。
</script>
2. var、let与const的核心区别
- 使用var声明的变量不具备块级作用域的概念。这意味着var定义的变量可以跨越花括号块进行访问,但它依然无法跨越函数作用域进行访问。
- 使用let声明的变量严格限制在块级作用域内。它既不能在块外部访问,也不能跨越函数作用域。
- const用于定义常量。在声明时必须进行初始化赋值,否则将报错。const定义的变量同样受限于块级作用域,且一旦赋值后,其值不可被重新修改。
<script type="text/javascript">
// 块作用域
{
var a = 1;
let b = 2;
const c = 3;
// c = 4; // 报错
var aa;
let bb;
// const cc; // 报错
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(aa); // undefined
console.log(bb); // undefined
}
console.log(a); // 1
// console.log(b); // 报错
// console.log(c); // 报错
// 函数作用域
(function A() {
var d = 5;
let e = 6;
const f = 7;
console.log(d); // 5
console.log(e); // 6
console.log(f); // 7
})();
// console.log(d); // 报错
// console.log(e); // 报错
// console.log(f); // 报错
</script>
3. const定义的对象属性是否可变?
这是一个在面试中常遇到的陷阱问题。虽然前文提到const定义的变量不可修改,但在实际测试中会发现,const定义的对象其属性是可以被修改的。这一现象值得深入记录与分析。
const person = {
name : 'jiuke',
sex : '男'
}
person.name = 'test'
console.log(person.name)
通过运行相关代码可以发现,person对象的name属性确实发生了改变。这背后的原理是什么呢?
原因在于对象属于引用数据类型。在变量person中,保存的仅仅是指向堆内存中对象的指针地址。const保证的是这个“指针地址”不发生指向改变。因此,修改对象内部的属性并不会改变指针地址,所以这种操作是被允许的。换句话说,只要const定义的引用类型的指针指向不变,对其内部属性的修改都是合法的。
如果我们尝试直接修改指针,即让person指向一个新的对象,此时程序将会抛出错误。
const person = {
name : 'jiuke',
sex : '男'
}
person = {
name : 'test',
sex : '男'
}
至此,关于JavaScript ES6中var、let以及const三者区别的案例详解已介绍完毕。如需了解更多相关内容,建议搜索本站过往文章或继续浏览后续系列教程,感谢大家的支持!
JS合并多个数组的三种方法:concat、spread与flat
2026-11-05 17:39:45
JavaScript怎么准确判断数据类型:typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么?
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
