变量声明的演变,带你搞懂var,let,const

92 阅读2分钟

前言

在Javascript的编程的演进过程中,变量的声明方式发生了显著的变化。这些变化不仅提升了代码的安全性和可读性,也解决了Javascript早期开发的很多常见问题。

es5的var

在2015年以前JavaScript是使用es5,我们常常用var来定义我们的变量,var所定义的变量是全局变量,意味着我们可以在所有区域使用所定义的变量,但同时可能使变量不那么安全,var还能重复声明变量,允许变量提升。(允许变量提升:类似于可以先用这个变量再声明)

// 输出:undefined,因为变量a被提升到顶部但未初始化 var a = 10;
function example() { console.log(b);// 输出:undefined,因为变量b被提升到函数顶部但未初始化 
var b = 20; }
example();
// 示例:var的重复声明
var c = 30; 
var c = 40; // 不会报错,c的值变为40 console.log(c); // 输出:40
// 示例:var的全局作用域和变量提升 console.log(a); // 输出:undefined,因为变量a被提升到顶部但未初始化 var a = 10; function example() { console.log(b); // 输出:undefined,因为变量b被提升到函数顶部但未初始化 var b = 20; } example(); // 示例:var的重复声明 var c = 30; var c = 40; // 不会报错,c的值变为40
console.log(c); // 输出:40

es6 的 let

基于es5的局限性,es6推出了let声明来声明变量let声明的变量与var有所不同,let支持块级作用域用{}来界定,et声明的变量不允许重复声明且不允许变量提升。

let d = 50;
console.log(d); // 输出:50
}
console.log(d); // 报错:d is not defined,因为d的作用域仅限于其所在的块 
// 示例:let的暂时性死区 console.log(e); // 报错:ReferenceError: Cannot access 'e' before initialization 
let e = 60; // 示例:let禁止重复声明 
let f = 70; // let f = 80; 

es6的 const

同时es6还添加了一个const用来声明常量,声明的常量不允许修改,支持块级作用域, 但是如果当const定义的是一个复杂数据类型时,可以发生改变,例如const声明一个对象,我们可以改变对象的属性,但我们不可以改变类型

const Person={
name:'afei',
age:19,
hobbies:["打飞机","打脚"],
}

//Assignment to constant 
Person.hobbies.push("喵鸟")
//PERSON='123'不可以改类型
console.log(Person)

end

大家读完这篇文章,一定对var,let,const三个有了更深的了解,es6中更强大的声明方式让JavaScrip的开发者们开发更加安全更易读懂的代码,掌握这些对于提高代码质量和效率至关重要。