01-varletconst的区别

Posted 2023-04-21 Full-Stack-python

title: 01-var、let、const的区别

var、let、const 的区别

1、var 声明的变量会挂载在 window 对象上，而 let 和 const 声明的变量不会

举例：

var a = \'我是a\';
console.log(a); // 打印结果：我是a
console.log(window.a); // 打印结果：我是a

let b = \'我是b\';
console.log(b); // 打印结果：我是b
console.log(window.b); // 打印结果：undefined

let c = \'我是c\';
console.log(c); // 打印结果：我是c
console.log(window.b); // 打印结果：undefined

var 的这一特性，会造成 window 全局变量的污染。举例如下：

var innerHeight = 100;
console.log(window.innerHeight); // 打印结果：永远都是100  ==> 会覆盖 window 自带的 innerHeight 属性

2、var 声明的变量存在变量提升，let 和 const 声明的变量不存在变量提升

举例：(先使用，再声明)

console.log(a); // 打印结果：undefined ==> a已经声明但没有赋值
var a = \'我是a\';

console.log(b); // 报错：Uncaught ReferenceError: Cannot access \'b\' before initialization ==> 找不到b这个变量
let b = \'我是b\';

console.log(c); // 报错：Uncaught ReferenceError: Cannot access \'c\' before initialization ==> 找不到c这个变量
const c = \'我是c\';

3、var 声明不存在块级作用域，let 和 const 声明存在块级作用域

举例：

    var a = \'我是a\';
    let b = \'我是b\';
    const c = \'我是c\';


console.log(a); // 我是a
console.log(b); // 报错：Uncaught ReferenceError: b is not defined ==> 找不到b这个变量
console.log(c); // 报错：Uncaught ReferenceError: c is not defined ==> 找不到c这个变量

报错是因为找不到 b 和 c 这两个变量。

4、同一作用域下，var 可以重复声明变量，let 和 const 不能重复声明变量

var a = \'我是a\';
var a = \'qianguyihao\';
console.log(a); // 打印结果：qianguyihao

let b = \'我是b\';
let b = \'qianguyihao\';
console.log(b); //报错：Uncaught SyntaxError: Identifier \'b\' has already been declared  ==> 变量 b 已经被声明了

const c = \'我是c\';
const c = \'qianguyihao\';
console.log(c); //报错：Uncaught SyntaxError: Identifier \'c\' has already been declared  ==> 变量 c 已经被声明了

备注：通过第3、第4点可以看出：使用 let/const 声明的变量，不会造成全局污染。

5、let 和 const 的暂时性死区（DTC）

举例 1：（表现正常）

const name = \'qianguyihao\';

function foo() 
    console.log(name);


foo(); // 执行函数后，打印结果：smyhvae

上方例子中， 变量 name 被声明在函数外部，此时函数内部可以直接使用。

举例 2：（报错）

const name = \'qianguyihao\';

function foo() 
    console.log(name);
    const name = \'hello\';


foo(); // 执行函数后，控制台报错：Uncaught ReferenceError: Cannot access \'name\' before initialization

代码解释：如果在当前块级作用域中使用了变量 name，并且当前块级作用域中通过 let/const 声明了这个变量，那么，声明语句必须放在使用之前，也就是所谓的 DTC（暂时性死区）。DTC 其实是一种保护机制，可以让我们养成良好的编程习惯。

关于”暂时性死区“的更多介绍，详本项目的另一篇文章《JavaScript之ES6语法：变量let、const和块级作用域.md》。

6、const：一旦声明必须赋值；声明后不能再修改

一旦声明必须赋值：

const a;
console.log(a); // 报错：Uncaught SyntaxError: Missing initializer in const declaration

总结

基于上面的种种区别，我们可以知道：var 声明的变量，很容易造成全局污染。以后我们尽量使用 let 和 const 声明变量吧。

const 常量到底能不能被修改

我们知道：用 const 声明的变量无法被修改。但还有一点，我们一定要记住：

• 如果用 const 声明基本数据类型，则无法被修改；

• 如果用 const 声明引用数据类型（即“对象”），这里的“无法被修改”指的是不能改变内存地址的引用；但对象里的内容是可以被修改的。

举例 1：（不能修改）

const name = \'qianguyihao\';
name = \'vae\'; // 因为无法被修改，所以报错：Uncaught TypeError: Assignment to constant variable

举例 2：（不能修改）

const obj = 
    name: \'qianguyihao\',
    age: 28,
;

obj =  name: \'vae\' ; // 因为无法被修改，所以报错：Uncaught TypeError: Assignment to constant variable

举例 3：（可以修改）

const obj = 
    name: \'qianguyihao\',
    age: 28,
;
obj.name = \'vae\'; // 对象里的 name 属性可以被修改

因为 变量名 obj 是保存在栈内存中的，它代表的是对象的引用地址，它是基本数据类型，无法被修改。但是 obj 里面的内容是保存在堆内存中的，它是引用数据类型，可以被修改。

传值和传址的区别

详见《JavaScript基础/对象简介.md》。

for 循环的经典案例

详见《JavaScript之ES6语法：变量let、const和块级作用域.md》。

参考链接

• JS 中 var、let、const 区别

varletconst之间的区别

目录

• 变量
• • var
  • • var声明作用域
    • 变量提升
  • let
  • • 暂时性死区
    • 块级作用域
    • for循环中的let声明
  • const
  • 区别
  • 总结

变量

ECMAScript变量是松散类型的，也就是说变量可以用于保存任何类型的数据，每个变量只不过是一个用于保存任意值的命名占位符。
有三个关键字可以声明变量：var let const，var在ECMAScript的所有版本中都可以使用，let和const只能在ECMAScript6及更晚的版本中使用。

var

var message;

这段代码声明了一个名为message的变量，可以用来保存任何类型的值。不初始化的情况下，会保存一个特殊值undefined。

var message = '遥岑'
message = 10 //合法 但不建议

message只是被定义为一个保存了字符串值的变量，初始化变量不会将它标记为字符串类型，只是一个简单的赋值而已。后面可以改变保存的值，也可以改变值的类型，但不推荐这么做。

var message = 10
message = 20
message = 73
console.log(message) //73

反复多次使用var声明同一个变量也是可以的。

var message = '遥岑',
    num = 5,
    text = false;

因为ECMAScript是松散类型的，所以使用不同数据类型初始化变量可以用一条语句声明，换行和缩进不是必须的，但这样有利于理解。
在严格模式下，不能定义名为eval和arguments的变量，否则会导致语法错误。

var声明作用域

ES6之前只有全局作用域和函数作用域，var既可以作为全局作用域，也可以作为函数作用域。

//全局作用域
var message = '遥岑'
function test() 
    //函数作用域
    var message = '阿翡'
    console.log(message) //阿翡

test()
console.log(message) //遥岑

使用var在函数内部定义一个变量，就意味着该变量将在函数退出时被销毁。
如果在函数内定义变量忽略var，可以创建一个全局变量；但不推荐这么做，在局部作用域内定义的全局变量很难维护，也会造成困扰，并不能直接断定var是不是有意为之。在严格模式下，如果这样给未声明的变量赋值，会抛出错误。

变量提升

console.log(message) //undefined
var message = '遥岑'

//相当于
var message
console.log(message)
message = '遥岑

使用这个关键字声明的变量会自动提升到顶部。

let

let和var的作用差不多，但有着很重要的区别，let声明的范围是块作用域。

if(true) 
    var message = '遥岑'
    console.log(message) //遥岑

console.log(message) //遥岑


if(true) 
    let name = 'yc'
    console.log(name) //yc

console.log(name) //报错

name变量的作用域仅限于块内，所以在外部无法引用。

let name
let name //报错

let不允许在同一个块作用域中出现冗余声明。
js引擎会记录用于变量声明的标识符及其所在的块作用域，因此嵌套相同的标识符不会报错，这是因为在同一块中没有重复声明。

var name
let name //报错

这两个关键字声明的不是不同类型的变量，它们只是指出变量在相关作用域内如何存在。

暂时性死区

let声明不会在作用域中被提升。

console.log(name) //报错
let name = 'yc'

在let声明之前不能以任何方式来引用未声明的变量。在let声明之前的执行瞬间被称为暂时性死区，在此阶段引用任何后面才声明的变量都会抛出错误。

块级作用域

let name = 'yc'
console.log(window.name) //undefined

let即使在全局作用域中声明也不会挂载在window对象下，不过let声明仍然是在全局作用域中发生的，相应变量会在页面的生命周期内存续。

for循环中的let声明

在let出现之前，for循环定义的迭代变量会渗透到循环体外部。

for(var i=0;i<5;i++) 
    setTimeout(()=>console.log(i),0)

//5 5 5 5 5

for(let i=0;i<5;i++) 
    setTimeout(()=>console.log(i),0)

//0 1 2 3 4

在退出循环时，迭代变量保存的是导致循环退出的值5，在之后执行超时逻辑时，所有的i都是同一个变量，输出的都是同一个最终值。
而使用let声明迭代变量时，js引擎会在后台为每个迭代循环声明一个新的迭代变量，每个setTimeout引用的都是不同的变量实例。这种每次迭代声明一个独立变量实例的行为适用于所有风格的for循环，包括for in和for of。

const

const的行为和let基本一致，区别在于它声明变量时必须同时初始化变量，修改声明的变量会报错。

const num = 7
num = 8 //报错

const num = 7
const num = 9 //不能重复声明

const也属于块级作用域，不能重复声明赋值，存在暂时性死区。

const num = 
    name:'yc',
    age:24

num.age = 18
console.log(num)

const声明限制只适用于它指向的变量的引用，如果引用的是一个对象，那么修改这个对象的属性是可以的。

for(const i=0;i<5;i++) //报错

for(const key in a:1,n:9) 
   console.log(key) //a n

const不能用来声明迭代变量，但是可以声明不会被修改的for循环变量，也就是每次迭代只是创建一个新变量。

区别

• var：全局作用域下挂载在顶层对象window下；未声明变量会被隐式创建为全局变量；可以多次声明赋值；变量提升
• let：块级作用域，即使在全局下也在块级作用域中；同一块中不能重复声明，可以重复赋值；变量在被声明前不能被访问，存在暂时性死区
• const：块级作用域；不能重复声明和赋值；存在暂时性死区；只读常量，必须初始化，变量指向内存地址不变

总结

var未声明直接赋值的变量都会自动挂在顶层对象下，会造成全局环境变量混乱。var可以多次声明同一个变量不会报错，也会造成代码不容易维护。而ES6新增的let和const客观上为这门语言更精确的声明作用域和语义提供了更好的支持，使用let和const有助于提升代码质量。