JavaScript中变量声明var、let、const的区别

简介: JavaScript中变量声明var、let、const的区别

在说这三个关键字之前我们先说说变量的作用域,在ES5之前,我们变量的作用域分为全局作用域和函数作用域,


1 全局作用域

var x = 0
console.log(window.x)  // 0
console.log(x);        // 0

复制

函数外面使用var声明的变量,会挂在到window上,我们使用window点就可以访问到声明的变量,类似

window.x = 0

复制

这种方式声明的变量,我们全局都可以访问,所以在最外层使用var声明的变量的作用域是全局作用域。


2 函数作用域

function func(){
    var x = 0
}
func()
console.log(x)

复制

函数内部声明的变量,我们只能在函数内部使用,函数外部是无法访问的,访问会报错

ReferenceError: x is not defined

复制

如果函数内部声明变量时,我们不使用关键字,此时变量会自动成为全局变量

function func(){
   x = 0
}
func()
console.log(x) // 0

复制

使用var声明的变量,是不具备块级作用域的特性,

{ 
    var x = 2; 
}
console.log(x)     // 2

复制

我们在外面依然可以获取x的值。因此在ES6引入了块级作用域


3 块级作用域

ES6 可以使用 let、const关键字来实现块级作用域。

var x = 10;
{ 
    let x = 2;
    console.log(x)  // 2
}
console.log(x)      // 10

复制

通过打印我们可以看出,let声明的x只在花括号内使用,不影响最最外层的x变量,如果花括号内我们用var,结果如何?

var x = 10;
{ 
    var x = 2;
    console.log(x)  // 2
}
console.log(x)      // 2

复制

显而易见,里面的x赋值会直接影响外面的。那我们接下来就详细说下var、let、const区别。


4 var 关键

var声明的变量支持全局作用域和函数作用域,上面的例子可以解释这点。

var x = 10;
function func(){ 
    var x = 2;
    console.log(x)  // 2
}
func()
console.log(x)      // 10

复制

可以对同一个变量进行多次声明和赋值。

var x = 10;
var x = 20;
x = 30;
var x = 40;
console.log(x)

复制

变量出现变量提升

console.log(x)  // undefined
var x = 10;
console.log(x)  // 10

复制

我们在未声明前使用变量,会提示undefined,因为var声明的变量会存在变量提升,就是变量名会提升到作用域的顶端,值留在原地。类似下面代码

var x ;
console.log(x)  // undefined
x = 10;
console.log(x)  // 10

复制


5 let 关键

let不允许在相同作用域内重复声明同一个变量

let x = 1
let x = 2 // Identifier 'x' has already been declared

复制

变量不存在提升,

console.log(x)  // x is not defined
let x = 10;
console.log(x)

复制

我们看下面这段代码有什么问题?

var x = 123;
if (true) {
    x = 'abc';
    let x;
}

复制

x 赋值失败,提示

ReferenceError: Cannot access 'x' before initialization

复制

这是为什么?ES6明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。可以说在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称TDZ)。


6 const 关键字

const 和 let 相同,声明也只在当前的块级作用域生效。同样也不会声明提升,也存在暂时死区,只能在声明之后使用,且和 let 一样不得重复声明。区别是const声明常量

const x = 1;
x     // 1
x = 2 // TypeError: Assignment to constant variable.;

复制

const 所不能改变的并不是值,而是变量指向的内存地址所保存的值不能变动,下面看图

image.png

对于简单类型(数值、字符串、布尔值),值就保存在变量所指向的内存地址中。而对于复合类型(数组、对象),变量指向的内存地址,保存的只是一个指向实际数据的指针,const 只能保证这个指针是固定的(即总指向一个固定的地址)。至于它指向的数据结构则是不能控制的 ,如下:

const foo = {};
// 为 foo 添加一个属性,可以成功
foo.prop = 123;
foo.prop   // 123
// 将 foo 指向另一个对象,就会报错
foo = {};  // TypeError: "foo" is read-only
相关文章
|
20天前
|
JavaScript 前端开发 索引
问js的forEach和map的区别
JavaScript中的`forEach`和`map`都是数组迭代方法。`forEach`遍历数组但不修改原数组,无返回值;它接受回调函数处理元素。`map`则遍历数组并返回新数组,新数组元素为回调函数处理后的结果。两者都接收元素、索引和数组作为回调函数参数。
20 7
|
21天前
|
JavaScript
变量和函数提升(js的问题)
变量和函数提升(js的问题)
|
1天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
11 3
|
2天前
|
JavaScript 前端开发
js开发:请解释同步和异步编程的区别。
同步编程按顺序执行,易阻塞;异步编程不阻塞,提高效率。同步适合简单操作,异步适合并发场景。示例展示了JavaScript中同步和异步函数的使用。
12 0
|
6天前
|
算法
Swiper库和Glide.js库的性能有何区别
Swiper和Glide.js是两个流行的响应式轮播图库。Swiper功能强大且灵活,支持多方向滑动,拥有丰富的配置和切换效果,适合复杂需求,其高性能得益于优化的算法和惰性加载。Glide.js则轻量级、快速,专注于基础功能,适合简洁需求。两者各有侧重,选择应基于项目具体需求和性能考虑。
|
10天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
15 0
|
13天前
|
JavaScript 前端开发
JQuery和JS的区别有哪些?
JQuery和JS的区别有哪些?
12 0
|
13天前
|
JavaScript 前端开发
js中浅拷贝和深拷贝的区别
js中浅拷贝和深拷贝的区别
19 1
|
16天前
|
JavaScript 前端开发 算法
JavaScript 中前置自增与后置自增:区别、应用场景
【4月更文挑战第6天】JavaScript中的前置自增`++a`先增后用,返回新值,适合复合赋值和循环计数;后置自增`a++`先用后增,返回原值,适用于保留变量原值的操作。二者差异在于运算时机和返回值,选择时要考虑递增时机和表达式中使用的值。在复杂表达式中应避免混用,注重代码清晰度和一致性。理解这些差异能提高代码效率,避免逻辑错误。
18 1
|
23天前
|
JavaScript 前端开发
JavaScript中call()与apply()的作用与区别?
JavaScript中call()与apply()的作用与区别?
22 2