了解 ES6 的变量特性:Var、Let、Const

一、Var

在没出现 let 和 const 之前,我们定义变量只能用 var。但是用 var 定义变量通常有很多的问题,就是我们常说的变量提升,例如:

javascript 复制代码
if (false) {
  var a = 1;
}
console.log(a);

如果初学者第一次看这段代码的时候,肯定会觉得段代码会报错,因为 if 中的条件是 false,并没有执行 var a = 1,所以最后应该报 a 没有定义的错误,但是实际最后却输出了 undefined,这就是变量提升。

什么是变量提升 : MDN 是这么说的:变量提升(Hoisting)被认为是, Javascript 中执行上下文 (特别是创建和执行阶段)工作方式的一种认识。在 ECMAScript® 2015 Language Specification 之前的 JavaScript 文档中找不到变量提升(Hoisting)这个词。不过,需要注意的是,开始时,这个概念可能比较难理解,甚至恼人。 这就没了?对这就没了!当看到的时候同样有这个疑问,所以我在var 描述中找到了这么一句话:变量声明,无论发生在何处,都在执行任何代码之前进行处理。 所以以上代码可以被翻译成这样:

复制代码
var a;
if (false) {
  a = 1;
}
console.log(a);

二、Let

我们先看一下 let 的几大特性:

1、没有声明提升

我们通过代码来看一下:

复制代码
if (false) {
  let a = 1;
}
console.log(a);

fileOf7256.png

执行结果

欣喜若狂终于得到了我们想要的结果,报错,a 没有被定义。

2、重复声明报错

复制代码
var a = 1;
let a = 2;

fileOf7256.png

执行结果

哇塞,报错了,显示 a 已经被定义过了,这简直是太友好了,终于不会一不小心就改变了全局变量,也终于避免了重复命名的危险。

3、不绑定全局作用域

复制代码
let a = 1;
console.log(window.a); // undefined

根本没有定义到全局上,主要还是因为 let 是块级作用域不是全局作用域。

三、Const

在开发中 const 我们一般是来定义常量,即不可更改的量,它的基本特性和 let 是差不多的。

复制代码
const a = 1;
a = 3;

执行上述代码时,会报错,因为 const 定义的是常量,无法进行修改。但是当 const 定义的是引用数据类型时:

复制代码
const a = {
  value: 1,
};
a.value = 2;
console.log(a); // {value: 2}

确实如此,这是因为 const 定义的实际是引用地址,它判断是的引用地址是否发生变化,虽然改变了引用数据中的数据,但是它的引用地址并没有发生变化,所以就可以更改,但是这种方式还是不提倡的。

相关推荐
新*4 小时前
从一段 WebSocket 代码聊开:bytes 不是 zlib、binaryType 决定一切,15MB 大消息的零拷贝优化
javascript·python·websocket·性能优化·blob·zlib·arraybuffer
David猪大卫5 小时前
【C++修炼】map 和 set 的使用
c语言·开发语言·数据结构·c++·经验分享·笔记·学习
OpsEye5 小时前
别再挨个充会员了:多模型编码,最麻烦的从来不是选模型
javascript·ai编程
fengci.6 小时前
CTF2MISC中等部分
开发语言·前端·学习
学以智用7 小时前
jsencrypt.js 完整详解
javascript
xys_6788 小时前
JavaEE通关手册:初识Java
java·开发语言
ShineWinsu9 小时前
对于Qt:QTableWidget常见属性以及QTableWidgetItem类的解析
开发语言·c++·qt·gui·客户端·表格·qtablewidget
Hilaku9 小时前
你们公司有 35 岁以上的前端吗?
前端·javascript·程序员
鸿蒙开发10 小时前
小程序存档写到一半怎么办?双槽保存与损坏恢复实战
前端·javascript·react.js
ShineWinsu10 小时前
对于Qt:QListWidget常见属性以及QListWidgetItem类的解析
开发语言·c++·qt·客户端·列表·qlistwidget·qlistwidgetitem