var、let、const的用法和区别

目录

一、全局变量

二、局部变量

三、块级作用域

1、var与let的区别

四、循环作用域

1、var与let的区别

五、HTML代码中使用的全局变量

1、var与let的区别

六、let和const的区别

1、let和const的主要区别

七、变量的提升

1、var、let与const的区别

八、作用域或块级作用域中var、let与const的使用情况

1、在相同作用域和块级作用域中

2、在不同作用域和块级作用域中

九、const值修改的方式

1、const对象

2、const数组

---

一、全局变量

在函数外声明的变量作用域是全局的

var x = 10
function fun(){
    alert(x)//可以在这里使用x
}
//也可以在这里使用x

二、局部变量

在函数内声明的变量作用域是局部的（函数内） 

//在这里不可以使用x
function(){
    var x = 10;
//在这里面可以使用x
}
//在这里不可以使用x

三、块级作用域

ES6新添加的内容，就是在{}中的作用域叫做块级作用域 

1、var与let的区别

var和let都是用来声明变量的

var和let的区别主要是在块级作用域中的使用

//var中的使用
{
    var x = 10;
}
//在这里是可以使用var定义的x
//let中的使用
{
    let x = 10
}
//在这里是不可以使用let定义的x

四、循环作用域

在for循环语句中使用var和let的情况

1、var与let的区别

var和let的区别主要也表现在循环作用域中的使用

在for语句中定义的var会影响输出外的var定义的变量值；而for循环语句中的let不会影响输出外的var定义的变量值 

//var的使用
var x = 5;
for(var i = 0;i < 10;i++){
    //输入一些代码
}
console.log(x)//控制台中会输出x的值为10
//let的使用
var x = 5;
for(let i = 0;i < 10;i++){
    //输入一些代码
}
console.log(x)//控制台中会输出x的值为5

五、HTML代码中使用的全局变量

就看能否使用window.Name进行变量的调用

1、var与let的区别

//var的使用
var Name = 'Ryan';
//在HTML页面中能使用window.Name调用
//let的使用
let Name = 'Ryan';
//在HTML页面中不能使用window.Name调用

六、let和const的区别

const是定义一个常量，let和const都是只能在块级作用域中使用，都不能在相同作用域或者块级作用域中和其他变量或者函数拥有相同的名称

1、let和const的主要区别

• const声明的常量一定要初始化，而let声明的变量不用；
• const定义常量的值是不能通过再赋值进行修改（数组或者字典可以通过其他方式进行值的修改，后面会讲到），而let定义的变量的值是可以修改的；

七、变量的提升

指的是可以先赋值后定义变量

1、var、let与const的区别

• var定义的变量是可以先赋值后声明，可以变量提升；
• let和const都不具有变量提升的功能；

八、作用域或块级作用域中var、let与const的使用情况

这里要提一下，var自己这个变量不管是在任何作用域当中都是可以重置或修改值，这就是为什么ES6中要加入let和const的使用了，防止在某个域中修改了与var变量名相同的值 

1、在相同作用域和块级作用域中

• var和let不能相互重置声明对方变量的值；
• const作为常量，理所应当是不能被var和let去重新声明常量的值，同时const自己也不能重置声明var、let以及const自己的值；

2、在不同作用域和块级作用域中

• let和const可以重新声明赋值；

九、const值修改的方式

1、const对象

const car = {type:"Fiat", model:"500", color:"white"};
// 修改属性:
car.color = "red";
// 添加属性
car.owner = "Johnson";

2、const数组

const cars = ["Saab", "Volvo", "BMW"];
// 修改元素
cars[0] = "Toyota"; 
// 添加元素
cars.push("Audi");

本节对于var、let、const的用法以及区别学习内容到此结束，感谢关注！！！