js中 var 、let 和const的区别

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,但在运行的时候编译器与引擎还会进行两项额外的操作:判断变量是否已经声明:

  1. 首先编译器对代码进行分析拆解,从左至右遇见var a,则编译器会询问作用域是否已经存在叫 a 的变量了,如果不存在,则招呼作用域声明一个新的变量a,若已经存在,则忽略var 继续向下编译,这时a = 2被编译成可执行的代码供引擎使用。
    引擎遇见 var a=3 时同样会询问在当前的作用域下是否有变量a,若存在,则将a赋值为 3
  2. 由于第一步编译器忽略了重复声明的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");

总结

三种声明变量的方式,有各自的优点和特色,具体看情况使用他们,可以让你的代码更简洁高效。

你可能感兴趣的:(js中 var 、let 和const的区别)