【前端知识之JS】var、const、let之间的区别

1、分析var、const、let之间的区别

const和let是ES6新增的声明变量的关键词。

var有如下特性：

• var定义的变量，没有块的概念，可以跨块访问，但是不能跨函数访问。
• 可以进行变量提升，但是在赋值之前调用的话会显示undefined
• 如果在函数内不使用var，则该变量是全局的。

let有如下特性：

• let定义的变量，不能跨块访问，也不能跨函数访问。
• 不能提前调用，会报错。
• 在同一个块级作用域，不能重复声明变量。

const有如下特性：

• const有以上let的特性
• const用来定义常量，定义的时候必须赋值，如果定义的常量是原始数据类型则不能进行修改。

2、代码演示

1、var特性对应的代码：
var定义的变量，没有块的概念，可以跨快访问，但是不能跨函数访问。

 {
     var temp = "haha"
 }
 console.log(temp);//haha
 //立即执行函数
 (function e() {
     var temp = "haha"
 })();
 console.log(temp);//temp is not defined

可以进行变量提升，但是在赋值之前调用的话会显示undefined

console.log(temp);//undefined
var temp = "haha"

如果在函数内不使用var，则该变量是全局的。

function change() {
    a = 30
}
change()
console.log(a) // 30 

2、let特性对应的代码：
let定义的变量，不能跨块访问，也不能跨函数访问。

if (true) {
    let temp = "haha";
    console.log(temp);//haha
}
console.log(temp);//报错temp is not defined

在同一个块级作用域，不能重复声明变量。

let temp1 = "aaa";
let temp1 = "bbb";
console.log(temp1);//报错'temp1' has already been declared
//因为两个temp不在同一个作用域下，因此可以重复声明
 if (true) {
    let temp = "haha";
    console.log(temp);//haha
}
let temp = "aaa";
console.log(temp)

let一定的变量创建的时候可以不用赋值

 let temp;
console.log(temp)//undefined

3、const特性对应的代码;

  const temp;
  console.log(temp)//报错Missing initializer in const declaration

const temp = 1;
temp = "aaa"//报错

也不是const定义的所有变量都不能改变，如果说定义的变量是引用类型就不会，因为const里面保存的仅仅是地址。

 const person = {
     name : '哈哈',
 }
 person.name = 'test'
 console.log(person.name)//test

因为对象是引用类型的，person中保存的仅是对象的指针，这就意味着，const仅保证指针不发生改变，修改对象的属性不会改变对象的指针，所以是被允许的。也就是说const定义的引用类型只要指针不发生改变，其他的不论如何改变都是允许的。