JavaScript进阶篇:let和const的区别

348 阅读4分钟

想要写好代码,对定义变量必须要更加理解透彻和更加规范,那我们就来看看let和const,究竟能对我们写代码有什么帮助

let声明

let的作用和var的作用大致相似,但值得一提的是,let的声明范围是块作用域,而var的声明范围是函数作用域。

//var的变量声明
if(true){
    var name = 'tomo',
        console.log(name); // tomo
}
console.log(name) // tomo
//let的变量声明
if(true){
    let name = 'tomo',
        console.log(name); // tomo
}
console.log(let) // ReferenceError: name没有定义

由以上例子所示,例2中name之所以在if外中不能被引用,是因为let的作用域为块作用域。块作用域实质上是函数作用域的子集,所以对于var的作用域限制同样适用于let,在函数作用域外,函数作用域内用let定义的变量都会在退出函数时销毁。

另外,let声明的变量也不存在变量提升。例如:

console.log(x); // ReferenceError: x is not defined
let x = 10;

这段代码会抛出错误,因为在let声明变量之前访问它会抛出错误,而var声明的变量在声明之前就已经存在,并且默认值为undefined。

const声明

const的行为与let基本相同,唯一一个重要的区别就是用const声明变量时必须同时初始化变量,且尝试修改const声明的变量会导致运行时错误

const age = 18;
age = 20 //TypeError:给常量赋值

//const也不允许重复声明
const name = 'tomo';
const name = '猪痞恶霸'; //SyntaxError

//const 声明的作用域也是块
const name = 'Tomo';
if(true){
    const name = 'DB';
}
console.log(name); // Tomo

const声明的变量也是块级作用域的,和let类似,也不存在变量提升。

不过,const声明的变量不能重新赋值,但是如果它是一个对象或数组,我们仍然可以修改它的属性或元素。例如:

const obj = {x:1, y:2};
obj.x = 10; // 可以修改
obj = {x:10, y:20}; // TypeError: Assignment to constant variable.

所以在使用let和const时,我们需要根据需要选择合适的声明方式。如果需要声明一个变量可以随时修改,我们应该使用let。如果需要声明一个常量,我们应该使用const。

总的来说,let和const都是在ECMAScript 6中引入的新的声明变量的方式,他们都具有块级作用域和不存在变量提升的特性,但是let声明的变量可以随时修改,而const声明的变量不能重新赋值。所以我们应该根据实际需要选择合适的声明方式。

let和const的区别

let声明的变量具有可变性,可以在声明后进行修改。

let x = 1;
x = 2; // x 的值变为 2

const声明的变量具有不可变性,声明后不能进行修改。

const y = 1;
y = 2; // 抛出 TypeError

总之: let是可改变的而const是不可改变的。

声明风格及最佳实现

ECMAScript6增加let和const从客观上为这门语言更精确的声明作用域和语义提供了更好的支持。行为怪异的var所造成的各种问题,已经让JavaScript社区为之苦恼了许多年。但随着这两个关键字的出现,新的有助于提升代码质量的最佳实践也逐渐显现。

1.不使用var

有了let和const,大多数开发者会发现自己不再需要var了。限制自己只使用let和const有助于提升代码质量,因为变量有了明确的作用域、声明位置,以及不变的值。

2.const优先,let其次

使用const声明可以让浏览器运行时强制保持变量不变,也可以让静态代码分析工具提前发现不合法的赋值操作。因此,很多开发者认为应该优先使用const来声明变量,旨在提前知道未来会有修改时,再使用let。这样可以让开发者更有信心的推断某些变量的值永远不会变,同时也能徐速发现因意外赋值导致的非预期行为。