js中有三种声明变量的方式,那他们有什么区别和相同点呢?
(一) let与var的区别?
let 为 ES6 新添加申明变量的命令,它类似于 var,但是有以下不同:
var 声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象
let 声明的变量,其作用域为该语句所在的代码块内,不存在变量提升(var没有块级作用域,let有块级作用域)
做同一个作用域下var 可以重复声明,let 不允许重复声明.
在浏览器中全局作用域下 var 声明的变量自动变为为window的属性,let声明的变量不是window的属性
相同点
- var 和let 声明的变量都可以重新赋值
- 他们都可以只初始化 ,不赋值
那为什么var 可以重复声明呢?
var a = 2
var a = 3 //这样重新赋值,不会报错,但不推荐
当我们执行代码时,我们可以简单的理解为新变量分配一块儿内存,命名为a,并赋值为2,但在运行的时候编译器与引擎还会进行两项额外的操作:判断变量是否已经声明:
- 首先编译器对代码进行分析拆解,从左至右遇见var a,则编译器会询问作用域是否已经存在叫 a 的变量了,如果不存在,则招呼作用域声明一个新的变量a,若已经存在,则忽略var 继续向下编译,这时a = 2被编译成可执行的代码供引擎使用。
引擎遇见 var a=3 时同样会询问在当前的作用域下是否有变量a,若存在,则将a赋值为 3 - 由于第一步编译器忽略了重复声明的var,且作用域中已经有a,所以重复声明会发生值得覆盖而并不会报错)。若不存在,则顺着作用域链向上查找,若最终找到了变量a则将其赋值2,若没有找到,则招呼作用域声明一个变量a并赋值为2。
(二)const 和var和 let的区别
- const声明一个常量,赋值后不可更改
- const必须在声明时候初始化,也就是声明的时候必须赋值
- 如果const声明的是一个对象 或者数组,可以重新对他们的属性(方法),进行赋值
对象重新赋值
// 创建常量对象
const car = {type:"Fiat", model:"500", color:"white"};
// 修改属性:
car.color = "red";
// 添加属性
car.owner = "Johnson";
数组重新赋值方法
/ 创建常量数组
const cars = ["Saab", "Volvo", "BMW"];
// 修改元素
cars[0] = "Toyota";
// 添加元素
cars.push("Audi");
总结
三种声明变量的方式,有各自的优点和特色,具体看情况使用他们,可以让你的代码更简洁高效。